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ị  hoặc 

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:

Copy


<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MInscDv7KEgUPIgaCDt045UJfYd-jBOu0fD2dLRrWl4eV-xL0yvEvA0ynnluHZc69LAJBOneFkBaahnQ2QivteXKtyYi7sflb1i7U82iYMl3fpZDPOuj4IwYEqx9mmxXrfLU1x1jDXuO/s1600/blogger.jpg' name='twitter:image'/>

    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MInscDv7KEgUPIgaCDt045UJfYd-jBOu0fD2dLRrWl4eV-xL0yvEvA0ynnluHZc69LAJBOneFkBaahnQ2QivteXKtyYi7sflb1i7U82iYMl3fpZDPOuj4IwYEqx9mmxXrfLU1x1jDXuO/s1600/blogger.jpg' property='og:image'/>

    <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MInscDv7KEgUPIgaCDt045UJfYd-jBOu0fD2dLRrWl4eV-xL0yvEvA0ynnluHZc69LAJBOneFkBaahnQ2QivteXKtyYi7sflb1i7U82iYMl3fpZDPOuj4IwYEqx9mmxXrfLU1x1jDXuO/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:

Copy


<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MInscDv7KEgUPIgaCDt045UJfYd-jBOu0fD2dLRrWl4eV-xL0yvEvA0ynnluHZc69LAJBOneFkBaahnQ2QivteXKtyYi7sflb1i7U82iYMl3fpZDPOuj4IwYEqx9mmxXrfLU1x1jDXuO/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MInscDv7KEgUPIgaCDt045UJfYd-jBOu0fD2dLRrWl4eV-xL0yvEvA0ynnluHZc69LAJBOneFkBaahnQ2QivteXKtyYi7sflb1i7U82iYMl3fpZDPOuj4IwYEqx9mmxXrfLU1x1jDXuO/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7MInscDv7KEgUPIgaCDt045UJfYd-jBOu0fD2dLRrWl4eV-xL0yvEvA0ynnluHZc69LAJBOneFkBaahnQ2QivteXKtyYi7sflb1i7U82iYMl3fpZDPOuj4IwYEqx9mmxXrfLU1x1jDXuO/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!!!

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

BÀI VIẾT CÙNG CHUYÊN MỤC