To make the most of your blog content on social media, setting the right Open Graph and Twitter Card Tags is essential! They are your best bet to display your blog posts with intriguing images, titles and descriptions and to lure new readers and potential customers to your website. But what exactly are Open Graph and Twitter Card Tags and how do you use them for your blog?

Stay tuned to learn everything you need to know about OG and Twitter Card Tags for your favorite networks!

Every social media manager and blogger knows, eye-catching images and the right post format for your content is your number one currency on social media. But after hours of writing the perfect blog post and designing a striking featured image, we’ve all experience an undesired pitfall. The moment you finally copy-paste your blog posts link in your status update, the image turns out too blurry, too small or not at all!

When your are aiming to promote your articles on social media and actively engage with your community, that’s when your marketing potential is going out the window. Odds are, even your most loyal followers or influencers will hold back sharing or recommending your content when it just doesn’t look right!

Thanks to Open Graph or Twitter Card Meta Tags you can take control over how your blog posts, help content and business news are displayed on your social feeds.

To improve the integration of third-party websites in their news feed, Facebook introduced it’s so called Open Graph protocol in 2010. Open Graph Tags are a custom set of meta tags, which turn any website into rich graph object, similar to other in-house Facebook objects you see on your newsfeed. By adding Open Graph Tags to a website’s code, you can control which elements from your blog posts (images, videos, description etc.) are displayed in the Facebook link preview and how.

Other social networks such as LinkedIn, Google+ or Pinterest have since adapted Facebook’s Open Graph tags. Twitter came up with it’s own version of these social meta tags, called Twitter Cards. Twitter Cards pretty much work like Facebook's OG tags. In fact, if Twitter cannot find any Twitter Card tags it will use the information given by OG tags to create a link preview.

You can easily recognize Open Graph or Twitter Cards Meta tags when having a look at  your website’s source code. Both kinds of social meta tags are located in the HTML element.

The most important Open Graph or Twitter Card Meta Tags are the ones determining the image, title and description displayed in a link preview. Additionally you can give extra information about the type of content you are sharing or, in the case of Twitter Cards, how you want it to be displayed.

If you already know, which OG or Twitter Card Tags you want to implement in your Blog post but don’t know how, you can jump right to the bottom of this post and I will let you know the easiest way to do so.
Important Open Graph and Twitter Card Tags for Facebook and Twitter Posts

og:image - The image you want to be displayed in your link preview
og:title - The title as you want it to be displayed in your link preview
og:description - A 200 character summary of your blog post or content



twitter:image - The image you want to be displayed in your link preview
twitter:title - The title as you want it to be displayed in your link preview
twitter:description - A 200 character summary of your blog post or content

The og:image & twitter:image meta tag

The image tag is the most important OG and Twitter Card tags or at least the most obvious if not set correctly. It’s the OG and Twitter Card tag responsible for the correct image information. If you want to grab your reader’s attention, the right image is most likely to do so. Facebook and Twitter crawl your website’s code in search for an image to pull in the automatically generated link preview.

If you have not set any og:image tag, Facebook will randomly take the first image it finds. Twitter might not display any image if the twitter:image tag is missing. This often results in company logos showing up instead of the correct featured image of your post.

Example:

The og:title & twitter:title meta tag

Every good social media post needs an intriguing and eye-catching title. This is exactly what the og:title and twitter:title tag is for. It is providing all necessary information for Facebook and Twitter or any of the other networks to display a bold headline in the automatically generated link previews of your blog post.

The og:title tag works similar to the regular meta title tag, which often serves as a substitute, if this open graph tag is missing.

Example:





The og:description & twitter:description meta tag

Additionally, your post should show a description of  what your blog post or shared website is all about. This Open Graph or Twitter Card tag is very similar to the regular HTML tag, however, instead of showing up in the Google search results, this little snippet will show up in the generated link preview.
Try to sum up your text in a few words, make it sound interesting to catch your reader’s attention but stay under 200 characters! Facebook and Twitter both will not show much more than those first two lines.

In comparison to the actual description tag you also do not need to worry about keywords in this text as it will not have any effect on SEO.

Example:

Learn more about OG and Twitter Card Tags and how to set easily them up for you blog.