0

Facebook and Twitter are currently grabbing the first image it finds on the page when sharing my homepage URL. What I want Facebook and Twitter to grab is my homepage image.

I tried to edit my existing Blogger/Blogspot open graphs, by adding some of the meta tags I found in the below blog posts but I am unable to achieve my goal. Can anyone please help me.

Here are my existing open graph meta tags:

  <!-- Metadata for Open Graph protocol. See http://ogp.me/. -->
  <b:if cond='data:view.isHomepage'>
    <meta content='website' property='og:type'/>
  </b:if>
  <b:if cond='data:view.isSingleItem'>
    <meta content='article' property='og:type'/>
  </b:if>
  <b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
    <meta content='object' property='og:type'/>
  </b:if>
  <meta expr:content='data:blog.title.escaped' property='og:site_name'/>
  <meta expr:content='data:view.title.escaped' property='og:title'/>
  <meta expr:content='data:blog.url.canonical' property='og:url'/>
  <meta expr:content='data:view.description.escaped' property='og:description'/>
  <b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' 
  expr:content='data:widgets.Blog.first.posts[0].featuredImage' name='meta' property='og:image'/>
  <b:if cond='data:view.featuredImage'>
    <meta expr:content='data:view.featuredImage' property='og:image'/>
    <meta expr:content='data:view.featuredImage' name='twitter:image'/>
  </b:if>
  <meta content='summary_large_image' name='twitter:card'/>
  <meta expr:content='data:view.title.escaped' name='twitter:title'/>
  <meta expr:content='data:blog.url.canonical' name='twitter:url'/>
  <meta expr:content='data:view.description.escaped' name='twitter:description'/>
  <b:if cond='data:view.isHomepage'>
Vantimist
  • 1
  • 3
  • First of all, please use the available debug tools. For Facebook, that would be https://developers.facebook.com/tools/debug. And after a re-scrape, that said it could not fetch the image URL you had specified. After then explicitly scraping that image URL itself, it appears to work - for that particular image. If you keep having this problem with other images, and don’t want to fix it by scraping the image URL manually each time, then go and research if blogspot blocks access to images for what they think are “bots” or something. – CBroe Jun 11 '20 at 10:24
  • Yehey, I just solved my problem with Twitter. **My only problem now is Facebook.** @CBroe I Always debug my URL after editing but could not achieve my goal... – Vantimist Jun 11 '20 at 11:34
  • What did you change for the `twitter:image` piece to get it to work as you wanted? – Andy Piper Jun 11 '20 at 12:23
  • 1
    @AndyPiper after name='twitter:description'/> I added the below: – Vantimist Jun 12 '20 at 11:25

1 Answers1

1

You can use the tag <meta content='image_url_here' property='og:image'/>, between the bloc condition (url== homePage):

<b:if cond='data:view.isHomepage'>
    <meta content='image_url_here' property='og:image'/>    
</b:if>
Mostapha Bourarach
  • 11
  • 4