Khám phá xã hội

Bạn có thể tác động đến cách trang web của mình xuất hiện khi được chia sẻ qua mạng xã hội bằng cách thêm một vài dòng mã vào mỗi trang. Điều này có thể giúp thu hút nhiều người hơn đến trang web của bạn bằng cách cung cấp các bản xem trước thông tin phong phú hơn so với khi không có sẵn.

Bạn có thể tác động đến cách trang web của mình xuất hiện khi được chia sẻ qua mạng xã hội bằng cách thêm một vài dòng mã vào mỗi trang. Điều này có thể giúp thu hút nhiều người hơn đến trang web của bạn bằng cách cung cấp các bản xem trước thông tin phong phú hơn so với khi có sẵn.

Tóm tắt

  • Sử dụng vi dữ liệu schema.org để cung cấp tiêu đề trang, nội dung mô tả và hình ảnh cho Google+.
  • Sử dụng Giao thức Biểu đồ Mở (OGP) để cung cấp tiêu đề, nội dung mô tả và hình ảnh trang cho Facebook.
  • Sử dụng Thẻ Twitter để cung cấp tiêu đề trang, nội dung mô tả, hình ảnh và mã nhận dạng Twitter cho Twitter.

Bạn có thể tác động đến cách trang web của mình xuất hiện khi được chia sẻ qua mạng xã hội bằng cách thêm một vài dòng mã vào mỗi trang. Điều này có thể giúp tăng mức độ tương tác bằng cách cung cấp bản xem trước thông tin phong phú hơn so với khi có sẵn. Nếu không có, các trang web mạng xã hội chỉ cung cấp thông tin cơ bản mà không có hình ảnh hoặc các thông tin hữu ích khác.

Bạn nghĩ phiên bản nào có nhiều khả năng được nhấp vào hơn? Mọi người bị thu hút vào hình ảnh và cảm thấy tự tin hơn rằng họ sẽ thích nội dung họ tìm thấy khi có bản xem trước sớm.

Có mã đánh dấu phù hợp: cung cấp tiêu đề chính xác, một đoạn mô tả ngắn và hình ảnh. Việc thêm các mục này có thể giúp tăng mức độ tương tác.
Đi kèm với mã đánh dấu phù hợp: có tiêu đề chính xác, nội dung mô tả ngắn và hình ảnh. Việc thêm các mục này có thể giúp tăng mức độ tương tác.
Nếu không có mã đánh dấu phù hợp thì chỉ tiêu đề trang được đưa vào.
Nếu không có mã đánh dấu phù hợp, thì hệ thống sẽ chỉ bao gồm tiêu đề trang.

Khi ai đó trên mạng xã hội muốn chia sẻ trang web của bạn với bạn bè của họ, họ có thể sẽ thêm một số ghi chú giải thích và chia sẻ về trang web đó. Tuy nhiên, việc mô tả một trang web thường rườm rà và có thể bỏ lỡ quan điểm của chủ sở hữu trang. Một số dịch vụ hạn chế số lượng ký tự mà người dùng có thể đưa vào ghi chú.

Bằng cách thêm siêu dữ liệu thích hợp vào các trang, bạn có thể đơn giản hoá quá trình chia sẻ cho người dùng bằng cách cung cấp tiêu đề, nội dung mô tả và hình ảnh hấp dẫn. Điều này có nghĩa là họ không phải dành thời gian quý báu (hoặc ký tự) để mô tả đường liên kết.

Sử dụng schema.org + vi dữ liệu để cung cấp các đoạn mã chi tiết trên Google+

Trình thu thập dữ liệu sử dụng nhiều phương pháp để phân tích cú pháp một trang và hiểu nội dung của trang đó. Bằng cách sử dụng vi dữ liệu và từ vựng trên schema.org, bạn giúp các trang web mạng xã hội và công cụ tìm kiếm hiểu rõ hơn nội dung của trang.

Ví dụ:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Mặc dù hầu hết siêu dữ liệu được nhúng trong phần tiêu đề của trang web, nhưng vi dữ liệu vẫn tồn tại ở nơi có bối cảnh.

Thêm itemscope để xác định phạm vi vi dữ liệu

Bằng cách thêm itemscope, bạn có thể chỉ định thẻ ở dạng khối nội dung về một mục cụ thể.

Thêm itemtype để xác định loại trang web

Bạn có thể chỉ định loại mục bằng cách sử dụng thuộc tính itemtype cùng với itemscope. Bạn có thể xác định giá trị của itemtype tùy vào loại nội dung trên trang web của mình. Bạn có thể tìm thấy mã phù hợp trên trang này.

Thêm itemprop để mô tả từng mục bằng từ vựng trên schema.org

itemprop xác định các thuộc tính cho itemtype trong phạm vi. Để cung cấp siêu dữ liệu cho các trang web mạng xã hội, các giá trị itemprop điển hình là name, descriptionimage.

Xác thực đoạn mã chi tiết

Để xác thực đoạn trích chi tiết trên Google+, bạn có thể sử dụng các công cụ như:

Công cụ kiểm tra dữ liệu có cấu trúc

Sử dụng Giao thức Open Graph (OGP) để cung cấp đoạn mã chi tiết trên Facebook

Giao thức Open Graph (OGP) cung cấp cho Facebook siêu dữ liệu cần thiết để cho phép các trang web có chức năng tương tự như các đối tượng Facebook khác.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Khi được đưa vào phần đầu của trang, siêu dữ liệu này sẽ cung cấp nhiều thông tin về đoạn trích khi trang được chia sẻ.

Dùng các thẻ meta nằm trong vùng chứa tên của og: để mô tả siêu dữ liệu

Thẻ meta bao gồm thuộc tính property và thuộc tính content. Thuộc tính và nội dung có thể có các giá trị sau:

Tài sản Nội dung
og:title Tiêu đề của trang web.
og:description Nội dung mô tả về trang web.
og:url URL chính tắc của trang web.
og:image URL đến hình ảnh đính kèm với bài đăng chia sẻ.
og:type Một chuỗi cho biết loại của trang web. Bạn có thể tìm thấy một giải pháp phù hợp với trang web của mình tại đây.

Các thẻ meta này cung cấp thông tin ngữ nghĩa cho trình thu thập dữ liệu từ các trang mạng xã hội, chẳng hạn như Facebook.

Tìm hiểu thêm

Để tìm hiểu thêm về những thứ bạn có thể đính kèm vào bài đăng trên Facebook, hãy truy cập trang web chính thức về Open Graph Protocol.

Xác thực đoạn mã chi tiết

Để xác thực mã đánh dấu trên Facebook, bạn có thể dùng các công cụ như:

Sử dụng Thẻ Twitter để cung cấp đoạn trích chi tiết trên Twitter

Thẻ Twitter là phần mở rộng cho Giao thức biểu đồ mở áp dụng cho Twitter. Chúng cho phép bạn thêm các tệp đính kèm nội dung nghe nhìn như hình ảnh và video vào bài đăng kèm theo đường liên kết đến trang web của bạn. Bằng cách thêm siêu dữ liệu thích hợp, những bài đăng có đường liên kết đến trang của bạn sẽ được thêm một thẻ chứa nhiều thông tin chi tiết mà bạn đã thêm.

Dùng các thẻ meta có vùng chứa tên twitter: để mô tả siêu dữ liệu

Để thẻ Twitter hoạt động, miền của bạn phải được phê duyệt và phải chứa thẻ meta có twitter:card là thuộc tính name thay vì thuộc tính property.

Dưới đây là một ví dụ nhanh:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Bằng cách chỉ định mã nhận dạng Twitter cho giá trị của twitter:site, Twitter sẽ nhúng thông tin này vào bài đăng được chia sẻ để mọi người có thể dễ dàng tương tác với chủ sở hữu trang.

Thẻ Twitter.

Tìm hiểu thêm

Để tìm hiểu thêm về Thẻ Twitter, hãy truy cập:

Xác thực đoạn mã chi tiết

Để xác thực mã đánh dấu của bạn, Twitter cung cấp:

Phương pháp hay nhất

Với cả ba lựa chọn này, tốt nhất bạn nên đưa chúng vào trang web của mình. Ví dụ:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Lưu ý rằng vi dữ liệu và OGP dùng chung một số mã đánh dấu:

  • itemscope nằm ở thẻ head
  • titledescription được chia sẻ giữa vi dữ liệu và OGP
  • itemprop="image" đang sử dụng thẻ link với thuộc tính href thay vì sử dụng lại thẻ meta với property="og:image"

Cuối cùng, hãy nhớ xác thực rằng trang web của bạn hiển thị như dự kiến trên mỗi trang web mạng xã hội trước khi xuất bản.