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. Việc này có thể giúp thu hút thêm nhiều người đến trang web của bạn bằng cách cung cấp bản xem trước có nhiều thông tin hơn so với thông tin thông thường.

Eiji Kitamura

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. Việc này có thể giúp thu hút thêm nhiều người dùng đến trang web của bạn bằng cách cung cấp bản xem trước có nhiều thông tin hơn so với thông thường.

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 Open Graph (OGP) để cung cấp tiêu đề trang, nội dung mô tả và hình ảnh cho Facebook.
• Sử dụng Thẻ Twitter để cung cấp tiêu đề trang, nội dung mô tả, hình ảnh và mã 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 có thông tin phong phú hơn so với thông tin có sẵn. Nếu không có thẻ này, các trang web xã hội sẽ chỉ cung cấp thông tin cơ bản mà không có hình ảnh hoặc thông tin hữu ích khác.

Theo bạn, quảng cáo nào có nhiều khả năng được nhấp vào hơn? Mọi người thường bị thu hút bởi hình ảnh và cảm thấy tự tin hơn rằng họ sẽ thích những gì họ tìm thấy khi xem trước.

Khi có mã đánh dấu phù hợp: tiêu đề chính xác, nội dung mô tả ngắn và hình ảnh được đưa vào. 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 thích hợp, thì chỉ có tiêu đề trang được đưa vào.

Khi ai đó trên mạng xã hội muốn chia sẻ trang web của bạn với bạn bè, họ có thể sẽ thêm một số ghi chú giải thích trang web đó tuyệt vời như thế nào rồi chia sẻ. Tuy nhiên, việc mô tả một trang web thường rườm rà và có thể không đúng trọng tâm theo quan điểm của chủ nhân của trang. Một số dịch vụ hạn chế số ký tự mà người dùng có thể nhập vào ghi chú.

Bằng cách thêm siêu dữ liệu thích hợp vào các trang của mình, bạn có thể đơn giản hoá quy 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 tốn thời gian (hoặc ký tự) quý báu để mô tả đường liên kết.

Sử dụng schema.org + vi dữ liệu để cung cấp đoạn trích nhiều định dạng trên Google+

Trình thu thập thông tin 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 schema.org, bạn giúp các trang web 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 đều được nhúng trong phần đầu của trang web, nhưng vi dữ liệu lại nằm ở nơi có ngữ 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ưới dạng một khối nội dung về một mục cụ thể.

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

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. Giá trị của itemtype có thể được xác định theo loại nội dung trên trang web của bạn. Bạn có thể tìm thấy một danh mục phù hợp trên trang này.

Thêm itemprop để mô tả từng mục bằng từ vựng 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 mạng xã hội, các giá trị itemprop thông thường là name, description và image.

Xác thực đoạn trích nhiều định dạng

Để 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 – Search Console

Sử dụng Giao thức Open Graph (OGP) để cung cấp đoạn trích 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 giống như các đối tượng khác trên Facebook.

<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 thông tin đoạn trích chi tiết khi trang được chia sẻ.

Sử dụng thẻ không gian tên og: meta để mô tả siêu dữ liệu

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

Thuộc tính	Nội dung
og:title	Tiêu đề của trang web.
og:description	Nội dung mô tả trang web.
og:url	URL chính tắc của trang web.
og:image	URL đến hình ảnh đính kèm trong bài đăng được chia sẻ.
og:type	Một chuỗi cho biết loại trang web. Bạn có thể tìm thấy một loại 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 nội dung bạn có thể đính kèm vào bài đăng trên Facebook, hãy truy cập vào trang web chính thức của Giao thức Open Graph.

• ogp.me

Xác thực đoạn trích nhiều định dạng

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

• Trình gỡ lỗi

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

Thẻ Twitter là một tiện ích mở rộng cho Giao thức Open Graph áp dụng cho Twitter. Thẻ này cho phép bạn thêm tệp đính kèm đa phương tiện như hình ảnh và video vào Tweet có đườ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, các Tweet có đường liên kết đến trang của bạn sẽ có một thẻ được thêm vào, trong đó có thông tin chi tiết mà bạn đã thêm.

Sử dụng thẻ meta không gian 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àm 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 gán mã 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.

Tìm hiểu thêm

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

• Trang web dành cho nhà phát triển của Twitter

Xác thực đoạn trích nhiều định dạng

Để xác thực mã đánh dấu, Twitter cung cấp:

• Trình xác thực thẻ

Phương pháp hay nhất

Trong cả ba lựa chọn, cách tốt nhất là bạn nên đưa tất cả các lựa chọn này 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 dữ liệu vi mô và OGP có chung một số mã đánh dấu:

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

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