Skip to content

Instantly share code, notes, and snippets.

@pathawks

pathawks/OpenGraph for Blogger.md

Last active October 28, 2023 23:41
Show Gist options
  • Save pathawks/1343315 to your computer and use it in GitHub Desktop.
Save pathawks/1343315 to your computer and use it in GitHub Desktop.
Download ZIP
OpenGraph for Blogger
Raw
og.html
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->
Raw
OpenGraph for Blogger.md

Adding Open Graph metadata to Blogger is easy. Simply copy the code below and paste it into your template after the <header> tag.

A couple notes:

  • og:locale Should probably actually reflect the blog's locale instead of just being a hardcoded string. Unfortunately, Blogger only gives us en-us with a hyphen, instead of an underscore, so that won't work.
  • If you're using your blog as a personal profile, you may consider changing the second og:type from website to profile and adding your personal information
  • og:image Is only supplied if Blogger finds an image in the current post. However, not supplying og:image is invalid. You could provide an alternate image of your blog logo, or a Gravatar.
  • If you do something cool with this, I'd love to hear about it. [email protected]
@saurav28
Copy link

Thanks for this
I have followed the steps above.

I have few images in my blog post uploaded from local.
I have added the code under the header tag in the template html.

Now when i am trying to share the post. i am getting preview of only image i.e. the first one.
Is it possible to get preview of all images ?

best Regards,
Saurav

@waldandrade
Copy link

How can i edit the og data?

@RevealedFrom
Copy link

I added og:title and og:description to the top, but when Blogger generates each page, it automatically creates another og:title and og:description based on the contents of the page, and Facebook take these because they are further down.

How does Blogger generate the two tags or how can I override them?

@gokaybiz
Copy link

I added og:title and og:description to the top, but when Blogger generates each page, it automatically creates another og:title and og:description based on the contents of the page, and Facebook take these because they are further down.

How does Blogger generate the two tags or how can I override them?

I think u cant.

@ROvroNeel
Copy link

I added og:title and og:description to the top, but when Blogger generates each page, it automatically creates another og:title and og:description based on the contents of the page, and Facebook take these because they are further down.

How does Blogger generate the two tags or how can I override them?

Yes You can, Just remove
<b:include data='blog' name='all-head-content'/> from your template

@cangkirdesa
Copy link

how to do meta tags by taking a thumbnail image on blogger static page

@EliasPereirah
Copy link

Thank you very much, this helps a lot, I didn't know how to do it.

I think would be nice to have a "else" for this "if":
<b:if cond='data:blog.postImageThumbnailUrl'>

</b:if>
So we could put a default image too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment