When you spend quite some time writing and fixing your content for your readers, you also want to set up the right tags, which are essential for your SEO. Some of them might bring little to almost no noticeable effect but others can boost your content to the top of the Search Engine Results Page (SERP).
So, if you are looking for a solution to gain higher rankings on Google, Bing, Yahoo, or anywhere else, meta tags are the answer. Simply put, meta tags tell search engines and users what your website is about. Implicitly, when implemented incorrectly, the negative impact can be significant and deal-breaking.
So let’s take a deeper dive into what meta tags are, why they matter, and how to properly when implementing them on your website.
What Are Meta Tags For Search Engines?
Meta tags are lines of code that provide search engines and users with information about your pages and content. In other words, meta tags are the ones that make it easier for search engines to define what the content of your website is about and how relevant it is for each search. This is what makes them so essential for SEO.
Meta tags are placed in the <head> section of the HTML code of a website and it is usually the frontend developer who sets them. But, CMSs like WordPress for example, have a specially dedicated section for meta tags such as canonical links or meta descriptions. This way marketers don’t have to have coding knowledge or rely on a developer for their SEO.
<meta name="title" content="Website Title Here"> <meta name="url" content="http://websiteurl.com"> <meta name="description" content="About Website"> <meta name="keywords" content="Website,best website">
Nevertheless, since they live inside the code, the meta tags are mostly invisible from the user’s perspective, and only readable by search engines. But, some meta tag information is visible on search engine results pages, like title tags and meta descriptions.
Most Common Meta Tags For Search Engines
When talking about search engines like Google, there are four main types of meta tags, including the two examples already mentioned.
- Meta Keywords Attribute – A list of keywords relevant for the content within a page.
- Title Tag – For search engines, this is the title of your page, and you can see it next to the favicon on each tab.
- Meta Description Attribute – A short text that describes the topic of the page.
- Meta Robots Attribute – This is an attribute for search engine crawlers or robots, basically telling them what to do with each page.
Meta Tags For Social Sharing
Meta tags have been the norm for search engines like Google and Bing for a long while now. But, in recent years, social media platforms like Facebook and Twitter started using their own crawlers. Therefore they are using their own meta tags. And while these look and work more or less the same as the “traditional” meta tags, there are a few differences.
What are social meta tags?
Social meta tags are code snippets bundled together that enabled the integration of content between social networks and third-party sites. Using social meta tags ensures the compatibility of third party content that a social platform pulls into its site.
Why use social meta tags?
The reasons we create content on websites depends on our goal. Some content aims purely at getting traffic, while other is meant to increase sales, brand awareness, or create engagement.
So, considering that social media networks, particularly Facebook and Twitter have billions of users we can ensure a broader reach and boost our chances to achieve these goals using social meta tags.
Social meta tags help to package and promote your content just like an advertisement. Through the social meta tags, you dictate how to present the post so that it can be inviting to click on, like, share or visit a website and buy a service or product.
Not only that social tags help us introduce new content to users, but it helps format content in such a way that it stands out and makes it easier to share the content. Aside from that, social meta tags also help social media networks to crawl and index the content correctly on their platform the increasing the visibility of the content, brand, product.
Tips for social meta tags
- The headlines for the title meta tags should be precise but attractive enough to inspire users to click and share.
- The description in the meta tag should be to the point with a maximum of four sentences.
- With Open Graph protocol for Facebook use social meta tag Type ‘article’ for a blog post and ‘website’ for the rest of the pages.
- If one has URLs that are duplicate posted then remember to use canonical URL in the social meta tag for URL.
- Never include a brand or something that gives away your product in your title social meta tag for Facebook.
- Facebook dimensions for images are minimum 1200×630.
- Most social sites can read Facebook’s Open Graph Protocol, including Twitter which defaults to it if one does not use a Twitter card. For an optimum experience, use social meta tags for both Twitter card and Open Graph on a web page.
What happens when we do not use social meta tags
The simple answer is that the social network will try and display your content as best as it can. But, without the proper meta tags in place, your preview might be broken. For example, if Facebook’s crawlers can’t find a tag that indicated an image is present, your snippet will show as pure text.
This, understandably so, is not really appealing for your users. Not to mention that the post will seem broken, which might scare away even the bravest of your potential visitors. In short, social meta tags enhance the attractiveness of our posts on social media feeds by making the content visible, clickable, and shareable to users.
Facebook Open Graph
Open Graph is a protocol created by Facebook that integrates web page content into the social media platform by using specific meta tags. In other words, the tags inform Facebook of the information it can pull and share on its site from a third party/website.
However, other social sites also recognize Facebook’s open graph protocol and use it to import data from other websites into their sites like LinkedIn and Twitter.
How to add social meta tags in an HTML page with Open Graph
Open Graph or OG tags are placed in the <head> section of an HTML document, under the “traditional” metatags. And like with the normal meta tags, OG boasts more than a dozen Facebook open graph tags. However, only five of these tags are commonly used, and should not miss from your meta tag list:
<meta property="og:title" content=""/> <meta property="og:url" content=""/> <meta property="og:type" content=""/> <meta property="og:description" content=""/> <meta property="og:image" content=""/>
Once you implemented your meta tags, it is recommended you use a Facebook open graph debugger to check how your web page content will appear in a Facebook feed. The debugger will expose any error(s) if present so you can safely fix them before pushing your content “live”.
Twitter Cards
Whenever we visit Twitter, the catchy framed photos in our feeds break the monotony of text. The framed pictures have a few lines of description at the bottom and it makes us feels like clicking on the ‘frame photos’ because they are so inviting.
The framed photo and text is known as a Twitter card. Twitter cards allow you to include pictures in your ‘tweeted’ posts. All one needs is some meta tag code in the <head> of your web page from which you want to pull information to your Twitter social account.
The most common type of Twitter cards are summary cards and photo summary cards though other card types exist as well.
<meta name="twitter:card" content=""> <meta name="twitter:title" content=""> <meta name="twitter:description" content=""> <meta name="twitter:creator" content=""> <meta name="twitter:site" content="">
Checking that Twitter Cards work
Twitter has a validator to confirm that the meta tags on the Twitter card are working properly. We can also use the validator to check how the post appears in a Twitter feed.
Also, sometimes, when we make updates on a web page, the updated content does not always reflect in the Twitter posts. This is because the browsers tend to cache the old tweet and not show the new content. The Twitter card validator can be used in this situation and force the update to show.
Meta tags for WordPress
If you are a WordPress website owner, we have good news, you do not need to write any code to add social meta tags on your site for whatever social network you fancy.
All you have to do is install an appropriate plugin and activate it, that’s all. The plugin itself will pull and populate the images, descriptions, and titles in your web pages, ready for sharing on any social site.
One popular example of such plugins is WordPress SEO by Yoast, which is used for Google, Facebook Open Graph protocol tag, and Twitter cards. But WPSSO Core and JM Twitter Cards are also perfect for social meta tags, and just as awesome as Yoast.
Other Meta Tags
As search engines and technologies evolve, meta tags evolve too. And this can be seen from the multitude of existing tags that we are not using anymore or as much today. A few examples are:
<meta name="revisit-after" content="30 days">
This Revisit tag as used when crawlers were not as “proactive” So the ag basically asked them nicely to revisit the site periodically as the content was updated and changes were made. Today this tag is irrelevant since crawlers revisit content periodically by default.
Other examples of tags that became obsolete are the distribution tag, the page refresh tag, and the redirect/refresh tag which was replaced by canonical URLs.
<meta name="distribution" content="web">
<meta http-equiv="refresh" content="30">
<meta http-equiv="refresh" content="x_seconds; url=http://www.yourhost.com/pagetosendto.html">
Robots Meta Tag
Ironically Robots meta tag is still a crucial tag, but not for the right reasons. Rather, because of improper implementation. In short, this specific tag allows you to notify the crawlers about a page that should not be indexed. It is also used for “nofollow” links, or links on a specific page you don’t want the crawlers to follow.
Today, most of us manage these two actions for the Google Search Console. But, there are still situations when web owners or webmasters mistakingly set the entire site on these noindex/nofollow settings because they misuse the tags. And, as you can guess then the entire website rank will suffer.
So, if you insist on using these tags, there are four ways to properly implement it, based on what you want the crawlers to do on each page.
- Do not index, do not follow – The crawlers are instructed to skip both actions, so the page is not indexed and the links are not followed.
<meta name="robots" content="noindex, nofollow">
- Index but do not follow – The crawlers are instructed to skip the “follow” action only, so the page gest indexed but the links are not followed.
<meta name="robots" content="index, nofollow">
- Don’t index but follow – The crawlers are instructed to skip the “index” action, so the page is not indexed but the links should be followed.
<meta name="robots" content="noindex, follow">
- Index and follow – – The crawlers are instructed to both index the page and follow the links within it.
<meta name="robots" content="index, follow">
The Charset Tag
Charset Tag is used to declaring the document and characters used inside. For example, text/HTML in English characters. and it can look something like this:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> or <meta charset="utf-8"/>
However, this is less commonly used, as the same action can be done faster and more efficiently from the HTTP header as an encoding declaration and a doctype declaration.
Conclusion
Most of the tags mentioned today are a crucial part of our digital existence. They define how search engines like Google or social media platforms like Facebook or Twitter digest and present our content. The better the implementation, the better the end result.
however, as we’ve seen above, there are plenty of tags that are now obsolete, or simply have been replaced by better and more efficient processes For example, why risk setting your entire site as noindex/nofollow when you can easily control that fro the Google Search Console with a few clicks?
Either way, we hope our complete guide to meta tags helped you understand these hidden gems better, and how and when to use them. For more articles like this one, keep an eye out for our Guides and Reviews section. Until next time!
Comments are closed.