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!!!

Đăng nhận xét

✪★ Chèn link ảnh/video trực tiếp vào khung bình luận để hiển thị hình ảnh hay video cho phần nội dung.
✪★ Nếu tải file mẫu không được, vui lòng để lại nhận xét vào khung bình luận bên dưới để được hỗ trợ nhé .

Mới hơn Cũ hơn