Do you know which meta tags control how your web page displays on Twitter or Facebook? Which will boost your SEO and which won't? Read this post for the answers to these and other questions related to meta tags.
Meta tags are part of the HTML code of a site. They are not visible to users. Instead, they “talk” to search engines and browsers providing important information about your site. Their functions vary from optimizing your site for search engines to displaying it correctly on social media and mobile devices. This info is useful not only for SEO specialists but professional front-end developers, too.
They are called meta tags because they contain metadata – data about data. A lot of them start with the word “meta.” However, many do not. In this article, we’ll go through some of the most common meta tags in 2021 that you can use and optimize to increase visibility and search engine rankings.
Meta tags go in the <head> section of the website. They are visible if you check the site’s code (Ctrl+U). For example, if you view the code of our blog page, you’ll see a lot of lines that start with <meta name> and <link rel> attributes. Those are all meta tags.
Meta tags may seem daunting to people who don’t know any code and have no wish to learn it, but they are all very standardized, and you don’t really need to know how to code in order to manage them.
Besides, they can often be added to the site via the admin panel with an SEO plugin, e.g., Yoast or All in One SEO for WordPress. You can check this guide on adding meta tags in WordPress.
The title tag is actually a Page Title Element, not a meta tag per se. It is visible not only to bots but to people as well. That’s how users will see your page displayed on a search engine results page (SERP) and later on in the browser tab (if they decide to go to your site).
The title has to sound right to stimulate the click. Ideally, it is a mini call to action no longer than 60 characters in length with essential keywords closer to the beginning of the tag.
<title> Order PSD to HTML conversion, front-end development. – GetDevDone® </title>
You can use punctuation and symbols such as pipe (|) and asterisk (*) to break up the text visually:
<title>What Are Core Web Vitals and Why They Matter | Blog – GetDevDone®</title> The title element is a mandatory tag. This means it has to go on every page of your site. Make sure the title tags are unique for each page. Otherwise, you run the risk of harming your SEO.
Meta name description is a proper meta tag which is also super important for SEO. Although search engines do not use it for ranking, they may display it as a snippet describing the page’s content on a SERP.
Like the title tag, a good meta description contains a call to action but is slightly longer – up to 160 words (the rest may be cut off). It should include keywords, but not too many since keyword stuffing looks like spam. The meta description must be unique for every page, emphasizing one keyword per page.
Here is a meta description of our About Us page:
<meta name="description" content="GetDevDone® provides fast, high-quality conversion of Web design into HTML and its extensions, as well as full custom CMS/eCommerce development services."> And here is how the title and description look like on a SERP.
Unlike the title and meta description tags, the robots meta tag is not mandatory. You only need it if you want to block search engines from indexing a particular page or block crawlers from following the links on a page, for example, links added by other people in a comments section, which may harm your SEO if followed.
So it may look something like:
<meta name="robots" content="noindex">Or
<meta name="robots" content="nofollow">You don’t have to use the “index” and “follow” values since they are the default. There are other parameters like “noimageindex,” “nocache,” etc. If you decide to use the robots meta tag, you can check Google’s guide on how to do it correctly.
This is a lesser-known meta tag than the ones above, but it may be vital if you have identical pages on your site. Of course, the best practice is to avoid duplicate content. Still, sometimes it is simply impossible. For example, if you have an online store and need to put a product in two different categories or the site automatically generates several links for the same page.
In those cases, it’s best to decide which page you want to be the main one and designate it as canonical. If you don’t, Google will make the decision for you. It will crawl the page it chooses more often than the other similar pages and will serve it to users in the search results. By selecting a canonical link yourself, you determine which page will be served.
(There is a caveat: Google might ignore your designation and choose a different page as canonical, but if you follow the guideline for canonicalization, there is a high chance that Google will go with your choice).
Another benefit of designating a canonical page is consolidating the links that the individual duplicate pages may get from external sources. This aggregation of link equity could make the page rank higher.
To identify a page as canonical, add a <link rel="canonical"> metatag to its head as well as the heads of all other duplicate pages. For example, here’s the canonical link code from our About Us page:
<link rel="canonical" href="https://getdevdone.com/about-us.html"/>Check this article for guidelines on how to add the canonical meta tag to pages in various content management systems and online store engines.
You need to use the Hreflang meta tag only if you have different versions of your site for different audiences based on language or country. It lets you specify which version to show to the user depending on their language or location.
Even if you don’t use it, Google will probably serve the correct version for a specific audience based on the content language and other signals like currency. However, they explicitly recommend including the tag.
This is the syntax:
<link rel="alternate" hreflang="language_code" href="page_url" />Here is how it is used on the Guardian home page:
Notice that the language is the same (English), but the countries are different: the UK (en-GB), the US (en-US), and Australia (en-AU). The generic “en” version will be served to users from the rest of the world.
To specify a language, you need to use the language codes and to define a location, you need the country codes.
But the real issue with adding the hreflang tag correctly is that it has to be bi-directional. For example, if you have a Spanish version and an English version of a page, the Spanish one needs to link to the English one and vice versa to prevent outsiders from linking to your pages and claiming them to be localized versions of your site.
There are several methods of adding the Hreflang tag:
They all have their pros and cons. The first one is the easiest to master if you are a beginner and have a small site with only a few pages that need to be localized.
However, it gets cumbersome quickly and may not work for large sites with many pages and multiple languages. Google has a technical guide on how to add the meta tag.
These meta tags let you control how your page displays on social media platforms like Facebook, LinkedIn, or Twitter if it’s shared there. Do you have to use the tags? No, you don’t, but then platform algorithms will “decide” how to display your page and what information to provide about it, and the result may not look the way you would prefer.
To ensure that the page shows up nicely in a post and attracts likes, shares, and visits, you need to specify which title, description, and image you want to display. It might seem like a lot of extra work, but if you hope that any of your content will be shared, it is well worth the time and effort.
This is how much code The Guardian uses for an article page:
And here is the result:
The <meta property="og”> tags in the source code above refer to the Open Graph protocol used by Facebook, LinkedIn, and Google. Twitter also supports the Open Graph protocol but has its own meta tags for its twitter cards as well.
You don’t have to use as many social media meta tags as The Guardian does, but an essential few like title, description, image, and URL will go a long way. Here is a comprehensive article on the most popular social media tags.
Not all meta tags which sound like they may be good for SEO actually are. Some examples include the Googlebot meta tag, author, copyright, abstract. You can check this article for a list of “bad” meta tags. We’ll just say a few words here about the most popular useless tag: meta keywords.
The Meta Keywords tag is now obsolete. It was important in the 1990s when primitive search engine algorithms relied on it to gain information about website content. However, it was abused by unscrupulous SEOs, leading search engines to drop its support in the late 90s. As far back as 2009, Google claimed that they were not using the keywords meta tag in their rankings.
To sum up, meta tags are unavoidable, and if used correctly, can boost your SEO. Other meta tags, such as viewport, preload, link rel stylesheet, favicon, etc., can also reflect on your SEO because they influence your site’s usability. But we’ll cover them in a different article.
GetDevDone has been a leading provider of web development services for the past 16+ years.
Our offering includes pixel-perfect, responsive design to HTML/CSS conversion, creating email templates and engaging HTML5 banners, frontend development with popular JS frameworks (Vue, React, Angular), eCommerce development (Shopify development, Magento, WooCommerce), CMS-based development (Drupal, WordPress development, HubSpot), and much, much more.
Let’s talk about your project today!
It's impossible to imagine modern web pages without icons. They're used everywhere: in product descriptions, contact details, and many other page elements. Two popular options for implementing icons are Icon Fonts and SVG Icons. What are their benefits and drawbacks? Which to choose for your own website? This post should give you all the answers.
What is web accessibility? Why is it important to your business? How to make your website more accessible? Read this post for the answers.
Over the years, the QA process at our company has been polished to perfection. That allows us to deliver only high-quality web pages and websites regardless of the technology they are based on. If you're curious about what happens under our QA hood, read this interview with one of our leading Quality Assurance experts.