Sửa lỗi không hiển thị ảnh trang tĩnh khi chia sẻ

Nếu bạn thường xuyên sử dụng trang tĩnh viết bài chắc hẳn bạn sẽ thấy lỗi không có ảnh bài viết khi chia sẻ lên mạng xã hội như Twitter, Facebook, Google. Nguyên nhân chính khi bạn chèn thẻ data data:blog.postImageUrl hay data:blog.postImageThumbnailUrl nó không hoạt động với lỗi hiển thị <!--Can't find substitution for tag [blog.postImageUrl]--> hoặc <!--Can't find substitution for tag [blog.postImageThumbnailUrl]-->

Như vậy để lấy được ảnh bắt buộc bạn đưa thẻ meta hình ảnh của trang tĩnh vào trong widget Blog1 cụ thể trong thẻ <b:includable id='main' var='top'> hoặc trong <b:includable id='post' var='post'> như sau:

<b:if cond='data:view.isPage'>
  <b:if cond='data:post.firstImageUrl'>
    <meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
    <meta expr:content='data:post.firstImageUrl' property='og:image'/>
    <meta expr:content='data:post.firstImageUrl' property='og:image'/>
  <b:else/>
    <meta content='https://3.bp.blogspot.com/-NzQRAz9sMNs/Wxfi-suOPqI/AAAAAAAALlM/OMy5ZzJwiRouaVNVBDxjKbsoIR6VWrNEQCLcBGAs/s1600/blogger.jpg' name='twitter:image'/>
    <meta content='https://3.bp.blogspot.com/-NzQRAz9sMNs/Wxfi-suOPqI/AAAAAAAALlM/OMy5ZzJwiRouaVNVBDxjKbsoIR6VWrNEQCLcBGAs/s1600/blogger.jpg' property='og:image'/>
    <meta content='https://3.bp.blogspot.com/-NzQRAz9sMNs/Wxfi-suOPqI/AAAAAAAALlM/OMy5ZzJwiRouaVNVBDxjKbsoIR6VWrNEQCLcBGAs/s1600/blogger.jpg' property='og:image'/>
  </b:if>
</b:if>

3 thẻ meta hình ảnh trên mình sử dụng cho Twitter, Facebook, Google, với thẻ meta trong thẻ <head> bạn sửa lại như sau:

<b:if cond='data:view.isSingleItem'>
  <!-- Twitter graph meta -->
  <meta content='summary' name='twitter:card'/>
  <meta content='' name='twitter:site'/>
  <meta content='' name='twitter:creator'/>
  <meta expr:content='data:blog.pageName' name='twitter:title'/>
  <meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <b:else/>
    <meta expr:content='data:blog.title' property='twitter:description'/>
  </b:if>
  <b:if cond='data:view.isPost'>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
      <b:else/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
        <b:else/>
        <meta content='https://3.bp.blogspot.com/-NzQRAz9sMNs/Wxfi-suOPqI/AAAAAAAALlM/OMy5ZzJwiRouaVNVBDxjKbsoIR6VWrNEQCLcBGAs/s1600/blogger.jpg' name='twitter:image'/>
      </b:if>
    </b:if>
  </b:if>
  <!-- Facebook graph meta -->
  <meta content='' property='fb:app_id'/>
  <meta content='' property='fb:admins'/>
  <meta content='' property='fb:pages'/>
  <meta content='' property='og:site_name'/>
  <meta content='article' property='og:type'/>
  <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
    <meta expr:content='data:blog.title' property='og:description'/>
  </b:if>
  <b:if cond='data:view.isPost'>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
      <b:else/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
        <b:else/>
        <meta content='https://3.bp.blogspot.com/-NzQRAz9sMNs/Wxfi-suOPqI/AAAAAAAALlM/OMy5ZzJwiRouaVNVBDxjKbsoIR6VWrNEQCLcBGAs/s1600/blogger.jpg' property='og:image'/>
      </b:if>
    </b:if>
  </b:if>
  <!-- Google  graph meta -->
  <meta content='article' property='og:type'/>
  <meta expr:content='data:blog.canonicalUrl' itemprop='og:url'/>
  <meta expr:content='data:blog.pageName' itemprop='og:headline'/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' itemprop='og:description'/>
    <b:else/>
    <meta expr:content='data:blog.title' itemprop='og:description'/>
  </b:if>
  <b:if cond='data:view.isPost'>
    <b:if cond='data:blog.postImageUrl'>
      <meta expr:content='data:blog.postImageUrl' property='og:image'/>
      <b:else/>
      <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
        <b:else/>
        <meta content='https://3.bp.blogspot.com/-NzQRAz9sMNs/Wxfi-suOPqI/AAAAAAAALlM/OMy5ZzJwiRouaVNVBDxjKbsoIR6VWrNEQCLcBGAs/s1600/blogger.jpg' property='og:image'/>
      </b:if>
    </b:if>
  </b:if>
</b:if>

Với Facebook sử dụng công cụ debug fix lại những trang tĩnh mà bạn đã từng share. Chấm hết bài!!!
Bài đăng mới hơn Bài đăng cũ hơn
Bài viết này có hữu ích không?