Labels

Triển khai và sửa lỗi Open Graph Meta Data


Nói một cách dễ hiểu, các mạng xã hội như Facebook, Twitter… không thể tự nhận ra các thông tin trên trang web của bạn. Muốn nó biết bài viết đó có tiêu đề là gì, phần mô tả (description), thumbnail… thì mình phải chỉ cho nó các phần đó. Open Graph là keyword bạn cần tìm

Open Graph đơn giản là một cách để làm cho trang web thành một đối tượng có các thuộc tính mà mạng xã hội đòi hỏi. Các thuộc tính này do ta thiết lập, bằng code hoặc bằng plugin

Bốn thuộc tính cơ bản phải có trên mỗi trang web là:
  • og:title: Tiêu đề trang bài đăng
  • og:description: mô tả cho bài đăng
  • og:image:  Ảnh thumbnail sẽ hiển thị
  • og:url: Đường dẫn tới trang web


Ngoài ra bạn có thể vọc vạch thêm tại http://ogp.me/. Sau đây tôi sẽ hướng dẫn bạn cách triển khai và sửa lỗi cho nó

I. Thẻ khai báo open graph trong blogger


Blogger định nghĩa open graph qua thẻ <b:includable id='openGraphMetaData'> theo cấu trúc sau

<b:includable id='openGraphMetaData'>
  <b:comment render='false'>Metadata for Open Graph protocol. See http://ogp.me/.</b:comment>
  <meta expr:content='data:blog.url.canonical' property='og:url'/>
  <meta expr:content='data:view.title.escaped' property='og:title'/>
  <meta expr:content='data:view.description.escaped' property='og:description'/>
  <b:if cond='data:view.featuredImage'>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
  <b:elseif cond='data:widgets'/>
    <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
      <meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
    </b:loop>
  <b:elseif cond='data:blog.postImageUrl'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
  </b:if>
</b:includable>

Các giá trị

- og:title - Tiêu đề của trang hiện tại, đây là thuộc tính chuẩn ta không cần chỉnh sửa gì thêm
- og:url - Url của trang hiện tại, đây là thuộc tính chuẩn ta không cần chỉnh sửa gì thêm
- og:description - Mô tả của trang hiện tại, thuộc tính này sẽ cần tùy chỉnh và fix lỗi
- og: image - Ảnh thumbnail của trang hiện tại (Tỷ lệ: 1200px / 630px), thuộc tính này sẽ cần tùy chỉnh và fix lỗi, trong đó
   + Đoạn đánh dấu màu xanh chỉ sử dụng cho template v3 (widget v2)
   + Đoạn đánh dấu màu đỏ áp dụng cho cả v1-2 (widget v1) và v3 (widget v2)

Đây cũng là 1 lý do nữa khiến ta phải nâng cấp template lên v3 (widget v2)

II. Triển khai


Cách 1: Dùng <b:includable id='all-head-content'>


<b:includable id='all-head-content'> là 1 thẻ được định nghĩa trên server blogger áp dụng cho cả 3 mẫu template v1-2-3, nó bao gồm luôn cả thẻ khai báo open graph

<b:includable id='all-head-content'>
..
  <b:include name='openGraphMetaData'/>
...
</b:includable>

Vì vậy bạn chỉ cần đặt code sau

<b:include data='blog' name='all-head-content'/>

Nằm trong cặp thẻ <head>...</head> để sử dụng

Cách 2. Dùng <b:includable id='openGraphMetaData'>


<b:includable id='openGraphMetaData'> cũng được định nghĩa trên sever, bạn chỉ cần gọi nó để sử dụng theo cú pháp

<b:include name='openGraphMetaData'/>

Cách 3: Dán trực tiếp code (khuyên dùng)


Cách này sẽ giúp ta làm chủ code cũng như sẽ dùng để tùy chỉnh, fix lỗi, bạn sẽ dán toàn bộ nội dung sau nằm trong cặp thẻ <head>...</head>

+ Với temp v1 và v2 (widget v1)

<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:blog.postImageUrl'/>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
</b:if>

+ Với temp v3 (widget v2)

<meta expr:content='data:blog.url.canonical' property='og:url' />
<meta expr:content='data:view.title.escaped' property='og:title' />
<meta expr:content='data:view.description.escaped' property='og:description' />
<b:if cond='data:view.featuredImage'>
    <meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image' />
    <b:elseif cond='data:widgets' />
    <b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
        <meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image' />
    </b:loop>
    <b:elseif cond='data:blog.postImageUrl' />
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image' />
</b:if>

LƯU Ý: chỉ được dùng 1 trong 3 cách, dùng cách này thì phải xóa cách kia đi không được tích hợp cùng lúc gây trùng lặp nội dung

Với temp v3 tiêu đề, đường dẫn ảnh ọt khá ok, ta chỉ cần sửa phần mô tả 1 chút, với temp v1-2 ta sẽ cần chỉnh sửa mô tả và ảnh

III. Fix lỗi


1. Mô tả (og:description)


Dữ liệu data:view.description được hiểu như sau


Như vậy nếu khi viết bài bạn thêm mô tả vào phần "Mô tả tìm kiếm" thì sẽ không cần chỉnh sửa thêm code <meta expr:content='data:view.description.escaped' property='og:description' />



Các trang còn lại sẽ lấy mô tả của blog. Còn nếu bạn quá lười làm điều này ? Lúc này ta sẽ chơi chiêu lầy đó là lấy đoạn trích ngắn để làm mô tả

Với cả 3 temp v1-2-3 tôi sẽ viết lại code phần mô tả (<meta expr:content='data:view.description.escaped' property='og:description'/>) như sau

<b:if cond='!data:view.isSingleItem'>
<meta expr:content='data:view.description.escaped' property='og:description'/>
</b:if> 

Thẻ này đã loại bỏ đi mô tả cho trang bài viết và trang tĩnh, giờ ta sẽ cần đặt lại mô tả cho chúng. Phân tích: để lấy được đoạn trích ngắn, bắt buộc ta phải viết code trong tiện ích Blog1, tuy nhiên thẻ meta nằm trong body sẽ không valid 1 số chuẩn html, vì thế tôi sẽ lấy đoạn trích ngắn và insert nó vào thẻ head dùng javascript

Tìm đến thẻ <b:includable id='post' var='post'> và chèn code vào sau nó

+ Với Blog1 v1

<b:if cond='data:view.isSingleItem'>
<script type='text/javascript'>
var meta=document.createElement(&quot;meta&quot;),meta_content= &quot;<data:post.snippet/>&quot;;;meta.name=&quot;og:description&quot;,meta.content=meta_content,document.getElementsByTagName(&quot;head&quot;)[0].appendChild(meta);
</script>
</b:if>

+ Với Blog1 v2

<b:if cond='data:view.isSingleItem'>
<script type='text/javascript'>
var meta=document.createElement(&quot;meta&quot;),meta_content= &quot;<data:post.snippets.short/>&quot;;;meta.name=&quot;og:description&quot;,meta.content=meta_content,document.getElementsByTagName(&quot;head&quot;)[0].appendChild(meta);
</script>
</b:if>


Như vậy đoạn trích ngắn (tính đến dấu ngắt nhảy) sẽ luôn được dùng làm mô tả cho bài viết

2. Ảnh thumbnail


data:blog.postImageUrl chỉ có hiệu lực cho trang bài viết và trang tĩnh, như vậy các trang còn lại chưa được định nghĩa thẻ og:image dẫn đến việc một số bạn dán trang của mình lên facebook không hiển thị thumbnail

Như vậy với temp v1 và v2 tôi sẽ viết lại thẻ định nghĩa thumbnail như sau

<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
    <b:else/>
        <meta content='https://1.bp.blogspot.com/-keqVlJeDxRA/Vupbj8ebLMI/AAAAAAAADXg/jEq7fAGhLyEO13ayr69hPg_c-m5yK1-Mw/w1200-h630-p-k-no-nu/imac-605421_960_720.png' property='og:image'/>
</b:if>

Với ảnh thay thế https://1.bp.blogspot.com/-keqVlJeDxRA/Vupbj8ebLMI/AAAAAAAADXg/jEq7fAGhLyEO13ayr69hPg_c-m5yK1-Mw/w1200-h630-p-k-no-nu/imac-605421_960_720.png tùy thích, bạn có thể upload ảnh lên blogger để dễ chỉnh size (màu xanh)

3. Trích xuất nội dung trên Facebook Open Graph


Khi bạn đã tối ưu Open Graph Meta Data trên trang của mình thì đợi 1 thời gian facebook cũng sẽ cập nhật cho bạn, trong trường hợp bạn muốn cập nhật ngay hoặc muốn xem kết quả thu thập dữ liệu từ facebook thì truy cập địa chỉ https://developers.facebook.com/tools/debug/og/object/, dán URL muốn test và nhấn vào "Tìm nạp thông tin trích xuất mới"


Kết quả tôi thu được


Giới hạn của facebook
  • Giới hạn của og:title : 110 ký tự
  • Giới hạn của og:description: 90 ký tự

Phần vượt quá giới hạn sẽ bị ẩn đi. Bạn cũng có thể sử dụng trình gỡ lỗi này để khắc phục một số lỗi trên trang của mình

Như vậy bạn đã thấy được tầm quan trọng của Open Graph Meta Data và hiểu tại sao trang của mình khi paste lên facebook lại không hiển thị được như người ta rồi chứ. Bài viết khá khó cho bạn mới nhưng bạn cứ chịu khó đọc kĩ sẽ hiểu được nguyên lý hoạt động

Chúc bạn thành công !