Sửa lỗi không hiển thị ảnh trang tĩnh khi chia sẻ
vào
17 thg 6, 2018
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:
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:
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!!!
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-K5_nXHPsNHMQMEZH5Hvbfzt__NlgdcrzeF62OtEEZAtLupRgdmwf4wIMzfAQ8N6VUaDcPloB6X5wOJtqyBThCZ-Hyqq0iSiqNgw7G9WK4qvmDqHQdeNRMi7g7qWJ9kvudJRYzR9RRska/s1600/blogger.jpg' name='twitter:image'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-K5_nXHPsNHMQMEZH5Hvbfzt__NlgdcrzeF62OtEEZAtLupRgdmwf4wIMzfAQ8N6VUaDcPloB6X5wOJtqyBThCZ-Hyqq0iSiqNgw7G9WK4qvmDqHQdeNRMi7g7qWJ9kvudJRYzR9RRska/s1600/blogger.jpg' property='og:image'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-K5_nXHPsNHMQMEZH5Hvbfzt__NlgdcrzeF62OtEEZAtLupRgdmwf4wIMzfAQ8N6VUaDcPloB6X5wOJtqyBThCZ-Hyqq0iSiqNgw7G9WK4qvmDqHQdeNRMi7g7qWJ9kvudJRYzR9RRska/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-K5_nXHPsNHMQMEZH5Hvbfzt__NlgdcrzeF62OtEEZAtLupRgdmwf4wIMzfAQ8N6VUaDcPloB6X5wOJtqyBThCZ-Hyqq0iSiqNgw7G9WK4qvmDqHQdeNRMi7g7qWJ9kvudJRYzR9RRska/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/AVvXsEj-K5_nXHPsNHMQMEZH5Hvbfzt__NlgdcrzeF62OtEEZAtLupRgdmwf4wIMzfAQ8N6VUaDcPloB6X5wOJtqyBThCZ-Hyqq0iSiqNgw7G9WK4qvmDqHQdeNRMi7g7qWJ9kvudJRYzR9RRska/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/AVvXsEj-K5_nXHPsNHMQMEZH5Hvbfzt__NlgdcrzeF62OtEEZAtLupRgdmwf4wIMzfAQ8N6VUaDcPloB6X5wOJtqyBThCZ-Hyqq0iSiqNgw7G9WK4qvmDqHQdeNRMi7g7qWJ9kvudJRYzR9RRska/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!!!
Nội dung chính
