Make Your Website Have a Beautiful Thumbnail Link Preview
A thumbnail image of your website can be essential to attract new users. Understand the Open Graph protocol to have a beautiful preview image for your website.
Recently, I tried to figure out how to make the link preview for the Web Highlights homepage appear with a thumbnail image.
I never thought about it; it just works for many websites. Let’s say I want to share one of my Medium articles on Twitter. When I paste the link to Twitter it magically creates a beautiful link preview for the article:
It seems like magic, but actually, there are a few Open Graph meta tags that need to be added to a website to appear like this. It’s a small detail, but it can help your site stand out on social media and drive more traffic to your page.
Take, for instance, the Web Highlights page before I did the changes:
Sure, it correctly grabs the title of the page and the description, but it’s not the best-looking tweet in a feed.
The concept of previewing URLs can not only be seen on Twitter but on most social media platforms like LinkedIn, Facebook, etc.
Also, within Blog posts, you can paste URLs, and they will be converted into a nice thumbnail preview. Here is what the preview of the Web Highlights page looks like after I added the needed metadata:
Here is what it looks like on Facebook:
Now, let’s dig deeper into Open Graph to make your website stand out on any social media platform.
What is Open Graph?
Open Graph is an internet protocol created by Facebook to standardize the use of metadata within a webpage to represent the content of a page. By adding metadata to your website, search engines can understand your content better.
By using Open Graph tags on our page, we can tell platforms like Twitter, LinkedIn, Facebook, etc., what image they should use as the preview image for our post.
How to add Open Graph information to your website?
To turn your web page into an open graph object, you need to add basic metadata to your page. This means that you will place additional <meta> tags in the <head> of your web page. The four required properties for every page are (Source ogp.me):
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.og:image - An image URL which should represent your object within the graph.og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/"One can assume that Medium.com is an expert in the field of SEO. Therefore, let’s briefly look into the code of an article to find out the meta tags.
You can see that Medium provides the four required meta tags and more. You can find all structured open graph properties on ogp.me.
Furthermore, Medium provides some additional meta tags for Twitter. They are not part of the open graph protocol but defined by Twitter.
When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. — developer.twitter.com
Here is what the meta tags of the Web Highlights page look like to show such a big thumbnail preview as seen above:
Open Graph can be validated.
Once you provide all meta tags to your website, you want to check whether it is shown correctly. Sometimes your website is cached by search engines or platforms and not directly shown correctly.
In order to make sure your website is being rendered correctly, here are some things you can do:
- Validate your website using an Open Graph validator like this one: https://www.opengraph.xyz/
- Use open graph debuggers from social media platforms like the Sharing Debugger from Facebook or the Post Inspector from LinkedIn.
- Use Chrome Extensions to validate your web page during development. Personally, I like the SEO META in 1 CLICK extension.
- Paste your link to social platforms and see what preview is shown
So, to add such a big thumbnail image as we saw at the beginning of the post, you would also need to add the meta tag twitter:card and set its content to summary_large_image.
When you pass your website to some validators, you can check whether everything is working correctly. Usually, I test it on opengraph.xyz, as it might take some time until your changes are visible on Twitter, LinkedIn, or other social platforms.
Notice that your image should follow the recommended size of at least 1200px630px (Source: everywheremarketer.com) to appear good.
Final Thoughts
I hope this article has helped you understand the importance of Open Graph and how it can help make your website more attractive to search engines and social media sites.
I am always happy to answer questions and am open to criticism. Feel free to contact me at any time! Get in touch with me via LinkedIn, follow me on Twitter, or subscribe to get my stories via email.