Up next in 10
How to set Featured image for Blogger Homepage _ Open Graph Meta Tags _ Open Graph image
Jan 24, 2024
In this tutorial video, the presenter demonstrates how to set a featured image for the Blogger homepage by utilizing Open Graph Meta Tags. The video likely covers step-by-step instructions on implementing Open Graph Meta Tags in the HTML code of a Blogger template to define the featured image and enhance the appearance of shared links on social media platforms. Viewers can expect practical insights into optimizing Open Graph image settings, ensuring a visually appealing representation of their Blogger homepage when shared on social networks. Whether you're a Blogger user, content creator, or someone looking to improve the visibility and presentation of your blog on social media, this video aims to provide a clear and informative guide for setting featured images using Open Graph Meta Tags.
Show More Show Less View Video Transcript
0:00
Hello everyone, welcome to K2 blogging and in this video I will show you how you can
0:04
set a custom feature image for your homepage. So as you can see that both of this website is hosted on blogger
0:11
But when I share the homepage link, it is showing a custom feature image
0:16
And when I share this homepage link, it is taking the first image of the blog post
0:21
So let me just open the website here. And as you can see that I have not used this feature image in the homepage
0:27
Still, when I share the homepage URL, it is taking a custom feature image
0:33
So how we can set a feature image in our blogger website
0:37
So recently I got a comment, how you can set a feature image for my blogger homepage
0:42
So let's check how we can do that. So let me just go to the blogger dashboard and here make sure to take a backup first
0:49
before changing anything in your theme. And after that, let's click on edit HTML
0:54
And here let me just scroll down a little bit. And here you will see this option open graph
1:00
So this option may vary from theme to theme. So here in this theme, the open graph is added at the top section
1:06
But if you open another theme, this is the another theme SEO flex
1:12
So let me just click on edit HTML here. And as you can see that the open graph is not added in the head section
1:18
So we need to find that option. So I will type control plus F and I will type like open graph
1:25
And here it is open graph metadata. And here you will see this option open graph feature image option, og image
1:34
So you can search for this option property og image. So here in this template, we have set a different options like we have set a condition like
1:45
if you share a post image, then it will take the blog post feature image
1:50
But if you share any other pages like homepage about us page, then it will use this as a
1:55
feature image. So you can search for this option property og image
2:01
So here it is. And here we are going to use a custom code like this
2:07
And here we are using the image of that feature image. So let me just open this URL
2:13
And as you can see that this is the featured image. So for this, what I can do is just remove your existing feature image open graph tag here
2:27
And what I can do is I will use this feature image code here
2:31
So I will provide this link in the description so you can use it in your blogger theme
2:37
So let me just paste it here. And then I will use my own custom feature image link here
2:44
So to add this, what I can do is let me just go to the page here, I will click a new page
2:51
and I will upload a custom feature image from my computer. Okay, I have uploaded a feature image like this
2:58
So let me select it. And I will set it as original size
3:05
And I will right click on the image and I will click on copy image address
3:10
Now I will go back here. Let's go to the theme. Let's click on edit HTML and I will type control plus F and I will type like open graph
3:24
And here it is. And you will see this option property OG image
3:29
So I will select this line and I will remove that. Now what I can do is let me just paste the URL here and let me just copy this code from
3:41
here and I will paste it here. Now let me just replace the image URL like this
3:50
So I will replace the image URL here. Now your custom open graph image is set in your theme as well
3:59
Now we don't need this as well. So I will remove this tag as well. Okay
4:06
Now we have set our open graph thumbnail and you can also do the same with Twitter as well
4:12
You can set a custom image for Twitter. So let's see here, as you can see that there is a Twitter card and I have added the same
4:19
custom feature image for Twitter. Or you can set a different custom image
4:23
So whenever someone share your homepage URL in Twitter, it will show this feature image
4:29
So you can also add a separate image for Twitter as well. Okay
4:33
So we have added our open graph tag like this. Now let's click on save here
4:40
So it may take some time to detect the feature image by different social media platforms
4:45
like Facebook, Telegram. Now let's go back here. Let me just open this
4:52
Let's click on view page source and let's find that open graph here
5:00
And here is the open graph. As you can see that the property OG images is added and here we have set the URL here
5:08
like this. But if I open a blog post, so let me just select here and let's click on view page source
5:19
and here you will see a different open graph images. So let me just drop it here and here you can see that there is a different open graph images
5:29
So let me just open it here. And as you can see that it is taking the post image as a open graph images for the post
5:39
But if you open the homepage, it is taking the custom open graph images
5:44
So let me just click on here and let me just open this image like this
5:52
And as you can see that we have set this as a feature image for the homepage
5:57
Now let's go to the telegram and let me just paste the URL here
6:03
So if you directly paste it, sometimes it may not show the thumbnail
6:07
So what I can do is I will right click on here, I will click on paste and let's click
6:10
on send. So it is still taking the old images. So it will take some time to detect by the social media platforms, but eventually it
6:19
will show up the custom feature image for your homepage. So I hope you have understand how to use a custom feature image in blogger website
6:29
And if you have any doubt regarding this, then you can ask me in the comment section
6:33
And if you found this video helpful, then make sure to hit the like button and don't
6:37
worry if this is not showing, then it will may take some more time to detect by the social
6:42
media platforms. So make sure to have patience and it will automatically change with your custom feature
6:48
image for your homepage. And for more videos like this, do subscribe our channel
6:54
I will see you in the next video. Bye-bye
Photo Rating Sites
Online Goodies
Skins, Themes & Wallpapers
Social Network Apps & Add-Ons
Photo & Video Sharing
Photo & Image Sharing