How to add Open Graph Meta Tags and Twitter cards to your Blogger Sites
This articles shows how to add open graph meta tags for blogger and
provide the necessary codes to add to your website.
Homepage image not showing in social media when
sharing. When you share your home page URL to social media. It will not show the
correct image else it shows the recently posted image as the
thumbnail.
But the code provided in the article is worked for both homepage and
single pages and your article pages.
Open Graph Protocol
are developed by Facebook to share rich media in Social networks.
Today many technologies are combined with the open graph and make the social
presence rich. This is the short brief about open graph tags.
Download the Code for Open Graph Meta Tags for Blogger
1. Before you begin Backup your template.
2. Open your blogger theme and go to edit options. Copy and Paste
this code -> xmlns:og='http://ogp.me/ns#' in the html tag like this 👇👇👇
3. Click the Below Download Button
to get your code.
4. Open the file you downloaded and press CTRL+F to find the "Your Website Logo image" and replace that with your own URL of the
image of your homepage. Save the file. So that when you
share your homepage or single page, it shows the correct image you
set.
5.
How to set your own image URL of the homepage for your open graph meta
tags -
*Create a new post
* Upload the image you want to
display
*Copy the URL of the image by selecting the
image
*Paste the homepage image URL in the location mentioned in step 4.
6. Now Copy and Paste the code
(Note that you must correctly added your URL of homepage image in
the location mentioned in step 4), below the header tag "<head>" of your
website.
7. Save the Theme. Share the link in social media and check how
it works.
Useful links:
To get a preview for your open graph meta tag when it is shared to
Facebook
Visit ->
Facebook Debugger for Open Graph
Also Read ->
More about Open Graph Protocol
Also Read ->
Facebook Docs about Open Graph
Also Read -> Javascript Countdown timer for file download
Watch Video about Open graph tags and twitter cards
What is Twitter Card
Twitter Card also use the open graph technology but Twitter made some
customizations for their social media i.e
twitter:card
which is specific for Twitter users.
Download the Code for Twitter card for Blogger
1. Before you begin Backup your template.
2. Click the Below Download Button to get your code.
3. Open the file you downloaded and press CTRL+F to find "Your homepage image url" and replace that with your
own URL of image of homepage. And Search for "Your single page image url" and replace that with your
own URL of image of single page.
4. Usually many use the same image for homepage and pages of
blogger. Don't know how to set your own image then click and ->
Read this.
5. Save the file. Now Copy and Paste the code (Note that you must correctly added your URLs of homepage image and
single page image in the correct location mentioned in step 3), below the header tag "<head>" of your website.
6. Save the Theme. Share the link in social media and check how it
works. That is all, You did it.
Useful Links:
To get a preview for your twitter card Visit ->
Twitter Card validator
Also Read ->
Twitter docs about twitter cards
Conclusion
After adding these things, your website should available to Facebook and
Twitter crawler then only you can get the result in correct locations.
So be sure you should allowed search engines to crawl you
webpages.
By now you have learnt how to add open graph meta tags and twitter cards in
your websites.
-----------------------------------------------------------------------------------------------------------------------------
Content last updated on 16th July 2022, 3:00PM IST
Post a Comment