Cách thêm thẻ meta chia sẻ ảnh đầy đủ chính xác
vào
30 thg 10, 2018
Khi bạn chia sẻ một trang bất kỳ trong Blog của mình lên các mạng xã hội có thể bạn sẽ gặp lỗi không hiển thị hình ảnh, nguyên nhân trang mà bạn chia sẻ đang bị thiếu thẻ meta og:image trong thẻ <head>. Do vậy để sửa lỗi này bạn cần thêm lại thẻ meta og:image cho trang.
Mặc định Blogger cung cấp sẵn thẻ meta open graph <b:include name='openGraphMetaData'/>, nội dung trong thẻ này có dạng sau:
Trong đó chúng ta sẽ lọc ra đoạn sử dụng thẻ meta ảnh og:image
Sử dụng điều kiện cho tất cả các trang đều lấy ảnh từ bài viết, tuy nhiên nếu bài viết không có ảnh đồng nghĩa khi chia sẻ lên mạng xã hội sẽ không có ảnh, do đó chúng ta cần thêm một điều kiện cho url ảnh cố định khi bài viết không chèn ảnh.
Cụ thể sẽ thêm điều kiện <b:else/> nếu không thì sử dụng url ảnh cố định
Một vài lưu ý:
Mặc định Blogger cung cấp sẵn thẻ meta open graph <b:include name='openGraphMetaData'/>, nội dung trong thẻ này có dạng sau:
Copy
<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>
Trong đó chúng ta sẽ lọc ra đoạn sử dụng thẻ meta ảnh og:image
Copy
<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>
Sử dụng điều kiện cho tất cả các trang đều lấy ảnh từ bài viết, tuy nhiên nếu bài viết không có ảnh đồng nghĩa khi chia sẻ lên mạng xã hội sẽ không có ảnh, do đó chúng ta cần thêm một điều kiện cho url ảnh cố định khi bài viết không chèn ảnh.
Cụ thể sẽ thêm điều kiện <b:else/> nếu không thì sử dụng url ảnh cố định
Copy
<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:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bL6zv4ztNTRckXs2t1pbqA23cHWcDbVXGFesr1OjGWPxb_mGngR5vKXsUuQ5YqEZv3oCnqxINnx20atpEm3gU3GcEGgOUsBnbY8sU6cmZJnJshG1qWjGcrauFJUvzd6RcJCGd1h141F0/w1200-h630-p-k-no-nu/blogger.jpg' property='og:image'/>
</b:if>
Một vài lưu ý:
- Kích thước ảnh chuẩn khi chia sẻ có chiều rộng: 1200px và chiều cao 630px
- url ảnh cố định khi up lên đặt kích thước ban đầu s1600 sau đó sửa thành w1200-h630-p-k-no-nu
- Sử dụng Trình gỡ lỗi chia sẻ của Facebook để Debug (Thu thập lại)
Nội dung chính
