Back to blog
Have you ever wondered why sometimes your links shared on Facebook or Twitter look weird? Do you know how to influence the looks of your shared blog posts on these social media?
If you are not sure whether you’ve done everything you could to optimize the information about your blog post or a page that is displayed on Facebook and Twitter, read on. We’ll show you how using the right social media tags can help you improve the look & feel of your post previews.
When sharing an article link, you want your post to look nice when published on social media. You’d like it to contain a quality image, correct name, description, and URL. Facebook, Twitter and other social media platforms get these parameters from your website.
You can control what they pull from the post by including social media meta tags (for example, open graph tags) in the HTML code of your posts.
If the Facebook meta tags (=Open Graph meta tags) are present, you determine what’s displayed in the Facebook post. If you do not include these Open Graph (og) meta properties, Facebook will still display the information about your blog post, but probably not how you’d want it to. This works analogically with Twitter meta tags, too. Let’s demonstrate using social media meta tags and link sharing on Facebook.
Web content sharing on Facebook
Facebook is a great social media platform for sharing your new content. Creating a new post from your website article is as simple as inserting the link into a new Facebook post box.
Let’s take a look at this process. We will use our post about Facebook Marketing Strategy as an example.
After inserting the URL into the new post box, Facebook pulls the data from the target URL and creates a nicely formatted post for us. The format is instantly shown in the preview – both for a laptop setting and mobile. If you use Kontentino to manage your social media content, the preview is instantly available in the Kontentino Calendar.
Understanding meta tags in the web page’s HTML code
Meta properties for search engines
At the very top, we can see several properties defining the parameters of this article, also called meta tags or meta properties. Some of them are used by search engines to understand what the website content is by providing additional information that is not displayed on the post page. These, for example, include meta tags such as:
- Meta title – <title>
- Meta description – meta name=”description”
- Robots – meta name=”robots”
The image below shows the HTML code for this Kontentino post. You can see these meta tags marked with the green colour.
Identifying meta tags in the HTML code of of the post Facebook Ads Target Audiences 101: The Ultimate Guide
Quick tip: Not sure, how to display the HTML code of your website? Simple hit CTRL+U in your web browser on Windows or Option + Command + U on Mac
Thanks to these meta tags, search engines know that indexing of this web page (post) and its parameters are set to follow (dofollow). The meta title entered, and the meta description is used by search engines to display the link to this post in their search results (on their search results page – SERP). As you can see, the meta title and meta description properties are set to:
- Meta title: ‘Facebook Ads Target Audiences 101: The Ultimate Guide | Kontentino Blog – Simplifying Social Media Approval Workflow’
- Meta description: ‘Find out how to reach the right people with Facebook Ads target audiences.’
We know that these meta tags do not have an optimal length, but we’re not here to talk about SEO or Google. So, let’s jump right to the meta tags below, which contain the ‘og:’ text.
These meta tags or meta properties are sometimes referred to as social meta tags, social media meta tags or simply og meta properties.
As you can see, there are 7 different og meta properties in the HTML code of our blog post. They are:
- og: locale
- og: type
- og: title
- og: description
- og: url
- og: site_name
- og: image
Plus, there are some more Facebook meta tags – the og: properties associated with the og:image meta tag which include:
- og:image:width
- og:image:height
- og:image:alt
- og:image:type
Twitter meta tags
Apart from these, you’ll also find some special social meta tags for Twitter in the HTML code, such as:
- meta name=”twitter:card”
- meta name=”twitter:title”
- meta name=”twitter:description”
- meta name=”twitter:site”
- meta name=”twitter:image”
Let’s go back to our Facebook post sharing example. We’ll need to understand, decode, and edit the content of the ‘og:’ meta properties to influence the looks of our new FB post with the post link embedded.
Read on and find out more about: i) Decoding the og: meta properties; ii) Guidelines on writing the content for social meta tags; and iii) Editing the content of these social meta properties in your website’s CMS.
Facebook and Twitter publishing with Kontentino
Sign up for a 14-day trial of Kontentino and master the social media meta tags with us. See the post preview in Kontentino before you publish the post.
The ‘og:’ in your website’s HTML code stands for ‘Open Graph’. It is an acronym of an Open Graph protocol that enables you to tell Facebook how your shared content should be displayed. As we already mentioned (and Facebook states it in their instructions for developers), ‘without these Open Graph tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content.’ Defining this information explicitly with Open Graph tags helps ensure the highest quality of posts on Facebook.
As you can see, these og meta tags are extremely important for Facebook. If you have not yet heard about them or think that they are quite new, you’d be surprised to find out that the Open Graph protocol was launched by Facebook already 10 years ago (in 2010). Today, however, it is held by the Open Web Foundation.
The Open Graph protocol builds on the various existing technologies and schemas to assist developers in richly representing any web page within the social graph. Enough history and definitions; let’s get into the details of the various og meta tags. We’ll only look at the 4 of them in detail – those that are responsible for the looks of our embedded post on Facebook: og:title, og:image, og:url, and og:description.
og:title meta property
This meta property is one of the four basic metadata within the Open Graph protocol (those are: og:title, og:type, og:image, og:url). By specifying the og:title, we set the title of our object (in this case – a blog post), as it should appear within the social graph. Facebook will then pull this og:title and display it as the post title (just under the URL at our first image).
og:image meta property
We insert a URL of the image URL which should represent our object (article) within the social graph. In this case, the link to the featured image should be included in this property. By specifying the og:image, we make sure that this very image is displayed on Facebook.
Otherwise, Facebook might choose another image from our post; it might be the main image displayed in our post listing and at the top of our article or any other image appearing in the blog post.
og:url meta property
This meta tag contains the canonical URL of our object that will be used as its permanent ID in the social graph. In our case, the URL in the og:url is https://www.kontentino.com/blog/facebook-ads-target-audiences/.
og:description meta property
Finally, specifying the og:description meta tag should help us have the description displayed when sharing this post. Now, as you can see in the HTML code image, it’s ‘Find out how to reach the right people with Facebook Ads target audiences.’
Twitter meta tags
Twitter meta tags work analogically to the Open Graph meta tags and specify the content that Twitter will pull when sharing a web page on this social media platform.
Mastering og meta tags
Facebook and Twitter offer guidelines on how to utilize the above-mentioned meta tags. In our table below, we summarise the basic information about them along with the respective recommendations.
Now that we understand the various types of social meta tags and their implications, it’s time to jump into our web page CMS and find out where and how to edit them. We’ll show you examples from WordPress CMS, being the no. 1 CMS in the world by far.
If you are using an SEO plugin, such as Yoast SEO, Rank Math, All in One SEO, or similar, they’ll come in handy when editing these social metadata. Almost all of the good SEO plugins will enable you to change the meta tags for Facebook and Twitter separately. In the following text, we’ll show you how to set these in Rank Math.
We start by editing the post and clicking on the SEO tab. There, the ‘social’ tab needs to be opened.
Finding the place to edit social media meta tags in your CMS
Rank Math contains a live previewer enabling you to see how the changes made would impact the embedding of your post on Facebook or Twitter. Click the ‘Preview & Edit Social Media’ button.
Editing the Facebook meta tags
Firstly, we’ll see the preview of the Facebook post and below it, the social media meta tags that can be adjusted.
Post link share preview generated by your CMS – in this case, the RankMath plugin
In our case, the og:image, og:title, and og:description properties have not yet been specified. As you can see, the simulator (preview snippet editor) shows the values from the basic meta data used for search engines.
Editing social media meta tags: the og:title and og:description tags of your blog post
In our very first image in this blog post, we can see that the missing title is the most problematic. However, we’ll fill in both the title and description.
Next, after saving the changes, we should look at what the updated post will look like when shared on Facebook.
New social media meta tags filled in for the post
Although Facebook recommends using 2 to 4 sentences for the og:description meta tag, we’ll just stick with one sentence for this demonstration. We’ll want to see whether Facebook displays it at all, thanks to creating some space on the card by reducing the length of the og:title parameter.
Before we check the result, we should mention other solutions enabling you to edit the Open Graph parameters in WordPress. If you are not using an SEO plugin, you can use a dedicated Open Graph plugin such as OG or manually insert the social metadata into your web page’s HTML code. The latter will be useful for other CMS, too. WIX has an inbuilt solution for inserting og meta properties, so do other major content management systems.
Once you’re done editing the Facebook or Twitter meta tags, it’s time to try sharing your post on these social media platforms. Let’s look at how our post would look on Facebook now. We can use the Facebook Debugger (officially called Facebook Sharing Debugger, referred to as FB preview tool sometimes) to look at the modified posts on Facebook. Before doing so, do not forget to clear your cache if it has not been cleared automatically after saving the post.
Open Graph meta tags in Facebook Link Sharing Debugger
Link preview in the Facebook Sharing Debugger showing your social media meta tags in action
As you can see above, all looks good and the changes to Facebook meta tags have taken effect.
Common misconceptions about social media meta tags
Myth 1: Social media meta tags are only for SEO purposes.
Meta tags aren’t just for search engines—they play a critical role in how your content is displayed on social networks. Social media meta tags like og:image and og:title specifically optimize your posts for platforms like Facebook and Twitter, improving engagement.
Myth 2: All images will display perfectly on social media.
Not every image from your post will display correctly when shared. Without specifying og:image or using a Twitter card, social platforms may select a generic image or incorrectly format the visual, affecting your post’s appearance.
Myth 3: Meta tags are only important for single-page websites.
Meta tags are essential for websites that span multiple pages. Whether your site contains blogs or product listings, using og:type and other meta tags ensures consistent and optimized display across multiple social platforms.
Myth 4: You can rely on social media platforms to display your content correctly.
Relying on Facebook or Twitter to automatically format your post is risky – to say the least. Without manually setting key meta tags like og:url and og:description, social platforms may pull incorrect or incomplete data, impacting your content’s visual appeal.
Myth 5: Social meta tags are difficult to implement without coding skills.
WordPress plugins and tools like Rank Math simplify the process of adding and managing social media meta tags. You don’t need to be a web developer to ensure your posts are optimized for social sharing.
Myth 6: Twitter cards only work with static images.
Twitter cards support various media formats, including GIF formats and videos. You can attach photos or other media to your summary card, making your posts more dynamic and engaging on this social network.
Myth 7: Meta tags are only for your own content.
Meta tags aren’t just about your own website; they help when your content is shared on other websites too. Properly setting meta property=”og:image” and meta property=”og:title” ensures your content looks professional no matter where it’s shared.
Conclusion
We hope this article has helped you understand the og meta properties and their importance for link sharing on Facebook and Twitter. If you’d like to lift your social media marketing up to another level, be sure to try Kontentino (if you haven’t done so already). It is an easy-to-use tool for creating social media content, supporting efficient team collaboration and content approval.
Our Content Calendar integrates the preview feature, so you don’t have to go anywhere else to see what your new link post will look like, saving your precious time to check and optimize your social media meta tags.
And what can be better than setting the UTM tags to track the post-performance in your web analytics, setting a future publication date, or assigning a boosting budget to the post to achieve a wider reach?
FAQ
What is a social media meta tag?
A social media meta tag provides crucial data like titles, images, and descriptions for social media platforms when sharing web pages. It’s essential for enhancing user engagement on major social platforms.
What are examples of meta tags?
Examples include meta property=”og:title”, meta property=”og:image”, and meta property=”og:url” content, which optimize social sharing on platforms like Facebook and Twitter, ensuring your content is well-represented.
What is social media metadata?
Social media metadata includes open graph data like a concise title, description, and high-quality images, which improve the appearance of social media posts on platforms like Twitter and Facebook.
What are social media tags?
Social media tags are identifiers like twitter card tags or og tags embedded in the HTML file to influence how web pages are displayed when shared on social platforms, increasing social exposure.
How to create meta tags?
To create meta tags, a web developer inserts a few lines of code into the HTML file of a webpage, including parameters such as the title tag, description tag, and unique image representing the content.
What social media uses meta?
Meta tags are used by major social platforms like Facebook, Twitter, and LinkedIn to optimize how web pages and social media posts appear when shared across networks, enhancing user engagement.
Is a meta tag necessary?
Yes, meta tags are crucial for online marketing because they control how your content looks on social platforms, ensuring the right image and title are shown, which increases social sharing and engagement.
How to find meta tags?
You can inspect a website’s HTML file to find meta tags. Tools like Facebook Debugger and online general services also help you view specific meta properties like og:image or og:type.
How many meta tags should I use?
Use essential meta tags like og:title, og:image, og:url, and Twitter card tags to optimize your social exposure. Prioritize quality over quantity by focusing on high-impact tags for social sharing.
What is a Facebook meta tag?
A Facebook meta tag, such as meta property=”og:title”, is part of the Open Graph protocol. It helps determine how your web pages or social media posts appear on Facebook, ensuring better user engagement.
What is the meta property og:title content?
The meta property og:title content defines the title of your web page as it appears when shared on social media platforms like Facebook.
What is the meta property og:image content?
The meta property og:image content specifies the URL of the image that will appear when your content is shared on social media platforms.
What is the meta property og:type content?
The meta property og:type content defines the type of content (e.g., article, website) being shared, helping social platforms categorize and display it properly.
What is metadata? 3 examples?
Metadata examples include the description tag, session variables for user identifying parameters, and the meta property=”og:image” tag, which helps platforms select the right image for social sharing.
