Ever wonder how websites get rich content working automatically when posted to social media?
Want to #supercharge your #JavaScript debugging game? Check out my latest blog post to up your console.log() game to 💯#100DaysOfCode https://t.co/FcjkSORmLF
— Kenton (@kvizdos ) June 29, 2020
Thanks to some fun meta tags, we can do this level of integration seamlessly. Also, some platforms (like Ghost, my blog platform of choice) have the ability to show different images based on the social media platform it is posted on (different for Twitter, Facebook, etc). Let's learn how to get these setup!
The Basics: how does it work?
Rich social media integration is based on Facebook's "Open Graph" meta tags. Normally, the tags are placed between the <head> tag with any other meta tags.
Why use og tags?
Mainly, og tags help increase your click through rate when posted online. Let's use an example: which one of these would you rather click?
I've been doing some research into #SEO to improve my #webdev. Over the course of my research, I've been writing a blog post.
If u want to learn the basics of SEO, my blog post covers most of the higher level stuff for getting into it! https://t.co/JcXPk3aGEz#100DaysOfCode
— Kenton (@kvizdos ) July 1, 2020
Or
Want to #supercharge your #JavaScript debugging game? Check out my latest blog post to up your console.log() game to 💯#100DaysOfCode https://t.co/FcjkSORmLF
— Kenton (@kvizdos ) June 29, 2020
Using this data, we can pretty well estimate that almost everyone would select the second choice as it is more eye catching. Also, in my opinion, it helps show what the website is actually trying to show you. You can even make your cards brand associated like Netlify:
Have you heard about our Build Plugins? Here's a great intro or re-introduction if you're familiar: https://t.co/L9pdDsrV9s pic.twitter.com/UDBCxMw3A3
— Netlify (@Netlify) July 1, 2020
Think your large, e-commerce site won't work on the Jamstack? Well think again, and check out this post on how @bhavana1110 breaks down the process: https://t.co/fIHQYKOkhV pic.twitter.com/aQyciYji9p
— Netlify (@Netlify) July 1, 2020
See how both of these follow strict branding with the left and an eye catching illustration on the right? Someone definitely got paid the big bucks to figure that one out.
How do I use these?
In the most basic form, you can use these meta tags:
- og:title - This allows you to change the title to something different than the real page title. This is helpful if your website's proper title is something like "Kenton Vizdos Blog - how to make your website look amazing when posted on social media," but for simplicities sake you only want it to show the stuff after "Kenton Vizdos Blog -"
- og:site_name - This changes the displayed URL below the title
- og:description - Create a brief snippet of text to show when applicable. Instead of having the browser automatically try and parse it, you can make something truly custom to each site.
- og:image - Notice how in the tweet I posted above, the image had an orange background while the actual post had a white background? That would be thanks to og image tags.
Once you choose the types of tags you want to use, you simply put them into a meta tag:
<html>
<head>
<title>Hello</title>
<meta property="og:title" content="My personal blog!" />
<meta property="og:description" content="How cool is this??" />
</head>
<body>
<p>My awesome website</p>
</body>
</html>
Congrats! You now know the absolute basics of og tags, now it's time to go make your websites even better when posted online. But wait! There's more...
How to create platform specific og tags
Most of the time, og tags will work on any platform that supports them, but if you want to create different images to match color schemes better, you can do so.
Overall, Twitter has the best custom tags, so lets take a look. Remember, however, that if you use twitter specific tags, it won't appear anywhere else. Having an extra "catch all" og tag may be good.
Twitter was nice when they created these tags. Most of the tags listed above will work perfectly if you replace "og" with "twitter," however there are some good new ones you should know about. Mainly, twitter:image:alt will let you specify an alt text for the card image. Having good acccessibility is always good!
How do I validate these?
Before posting on social media, it's important to double check your work. The good news is that platforms understand the need, so they provide platform specific tools to test them. Here's a list of the top 3:
- Twitter Card validator
- Facebook validator - Note: you must be logged in to use this for some reason
- Linkedin validator
Conclusion
Overall, I hope next time you are making a website you will remember that a little bit more effort can make a website look 10x better when posted on social media.
I hope I helped you learn something in this article, if you did, please share it along to your friends or click the "clap" button below.
Top comments (0)