Những Social Meta Tags quan trọng nhất mà website cần có.

Hiện nay là một dịch vụ quan trọng ảnh hưởng đến Internet. Do đó, Google và các hiện nay trên thế giới đều đã bổ sung các Social Meta Tags chuẩn của mạng xã hội để giúp việc chia sẻ website trên các mạng xã hội hiện nay dễ dàng hơn. Chúng ta sẽ cùng tìm hiểu những Social Meta Tags quan trọng nhất mà website của bạn cần có trong bài viết này.

Những Social Meta Tags quan trọng nhất mà website cần có. - facebook google Open Graph protocol social Twitter - Phát triển website

The Open Graph protocol – Social Meta Tags

Hiện tại trên Internet có rất nhiều trang mạng xã hội, và mỗi mạng xã hội đều có những chuẩn riêng để việc chia sẽ website của bạn trên dịch vụ của họ được dễ dàng. Tuy nhiên, bạn chỉ cần theo chuẩn của các dịch vụ mạng xã hội phổ biến nhất tại VN là : Facebook, Google+, Twitter

Social Meta Tags cho Facebook

Facebook sử dụng chuẩn của Open Graph (The Open Graph protocol), bao gồm những tag Meta quan trọng như sau :

  • og:title : Chứa tiêu đề của trang web.
  • og:description : Chứa đoạn văn mô tả ngắn về nội dung trang web.
  • og:type : Kiểu của đối tượng mà trang web muốn trình bày. Ví dụ trong 1 website tin tức có bài viết về bộ phim nào đó thì bạn nên để og:type là video.movie. og:type có những kiểu chính như sau :
    • article
    • website
    • video.movie
    • music.song
    • profile
  • og:url : chứa url của trang web, các bạn chú ý url chứa trong đây cần chính xác và duy nhất.
  • og:image : chứa url của hình ảnh minh hoạ cho trang web thêm sinh động. Thông thường đây sẽ là nơi chứa url của featured image
  • og:site_name : đây sẽ là nơi chứa thông tin giới thiệu về website như slogan, domain,….
  • og:video : chứa url của video có trong trang web (bài viết)
  • og:locale : vị trí địa lý của website. Nếu ở Việt Nam thì bạn sử dụng giá trị vi_VN

Lưu ý là url bạn sử dụng trong Open Graph cần phải có http://… hoặc https://…

Bạn có thể sử dụng tool debug của Facebook để test website của bạn có theo chuẩn Open Graph tại link https://developers.facebook.com/tools/debug/

Ví dụ sau là mẫu của Facebook Open Graph trên website :

<html prefix="og: http://ogp.me/ns#">
<head>
    ...
    <meta property="og:title" content="Tiêu đề bài viết" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="http://blog-xtraffic.pep.vn/nhung-social-meta-tags-quan-trong-nhat-ma-website-can-co/" />
    <meta property="og:image" content="http://xtraffic.pep.vn/img/logo/xtraffic.pep.vn-logo.gif" />
    <meta property="og:description" content="Tóm tắt bài viết" />
    ...
</head>
...

Social Meta Tags cho Google+

Google+ là mạng xã hội của Google và được rất nhiều kiểu dữ liệu khác nhau : Schema.org microdata (Khuyến cáo nên dùng), Open Graph protocol, Title and meta “description” tags.

Theo khuyến cáo của Google thì bạn nên sử dụng chuẩn Schema.org microdata vì nó hỗ trợ cho cả Google+ lẫn trên Google Search Engine.

Ví dụ sau đây về chuẩn của Google mà website cần có

<html itemscope itemtype="http://schema.org/Article">
<head>
    ...
    <title>Tiêu đề bài viết. Nên sử dụng tối đa là 70 ký tự.</title>
    <meta name="description" content="Tóm tắt bài viết. Nên sử dụng tối đa là 155 ký tự." />
    <meta itemprop="name" content="Tiêu đề bài viết">
    <meta itemprop="description" content="Tóm tắt bài viết....">
    <meta itemprop="image" content="http://xtraffic.pep.vn/img/logo/xtraffic.pep.vn-logo.gif">
    ...
</head>
...

Social Meta Tags cho Twitter

Mặc dù Twitter có sử dụng chuẩn riêng của họ, nhưng họ cũng hỗ trợ chuẩn Open Graph protocol giống như Facebook nên bạn cũng không cần phải thêm chuẩn của Twitter vào website của bạn.