Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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!!!
                    Nội dung chính