What are meta tags?.

HTML meta tags

HTML meta tags describe the content of a web page and are essential for passing specific information to search engine crawlers. They’re the foundation of on-page SEO and live in the website’s <head> section. Google can use this information to build rich snippets or to order search results.

Metadata syntax

Metadata syntax comes down to two attributes: “name”, which identifies the type of information the tag provides, and “content”, which describes the actual content of the tag.

<head>
  <meta name="type_of_information" content="actual_content">
</head>

As well as these two, you can add a third attribute, “http-equiv”, which tells the browser these are HTTP header values.

Three characteristics of metadata stand out:

• Uniqueness: every page of the site should have unique meta tags that accurately reflect its specific content. This matters most for the title tag and the meta description, which are the touch points between the site and the visitor directly in the SERP.
• Length is another key factor to always consider, to avoid truncation in the SERP. What counts isn’t the absolute number of characters but the pixels: just think how a capital “M” takes up more space than a lowercase “i”, and this matters even more with mobile-first indexing. To handle it, use Screaming Frog’s “SERP Snippet” tab to preview your meta titles and descriptions in real time, on both desktop and mobile.
• Relevance: meta tags must be relevant to the content and not an attempt to over-optimise for SEO, which, given Google’s latest algorithms, could lead to penalties.

Meta tags

• Title tag: defines the title of the web page and is used by search engines in SERP snippets. It contributes to ranking and must be optimised for length and relevance, otherwise Google’s algorithm may rewrite or truncate it. Since it’s the first touch point with visitors, it must clearly explain the content of the linked page to increase CTR.

A best practice for the meta title is to include the main keyword, ideally at the start. That doesn’t mean stuffing the title with keywords, but writing a concise title relevant to every SEO’s real goal: the document’s search intent!

• Meta description: a summary of the page content. In traditional marketing terms, it’s the first “10 seconds” in which every site has to introduce itself and make a good impression. Unlike the meta title it doesn’t contribute to ranking, but it helps increase CTR.
• Meta robots tags: hints on how Google and other search engines should behave when analysing the crawled site. The most used meta robots include:
  • noindex: asks the bot not to show the crawled item in its results.
  • nofollow: stops search engines following the links on the page. Also useful to avoid passing link juice to the linked page. To block a specific hyperlink, don’t use this attribute in the head but directly in the code of that link.
  • none: the most restrictive option for search engine bots, equivalent to noindex, nofollow.
  • noarchive: stops Google showing a “cached” link in the SERP.
  • noimageindex: prevents images from being indexed in the SERP.

Meta robots tags can be analysed very easily with Screaming Frog in the 1Directives tab.

• Hreflang: an attribute used for international projects; it tells search engines about the language versions, avoiding duplicate content and increasing the chance of appearing in geo-targeted SERPs.
• Canonical: a very valuable attribute that declares which content is the main version and which is secondary (or duplicate). Don’t confuse it with hreflang: they look similar but serve different goals. It’s recommended to add a self-referencing canonical to every page (unless it’s canonicalised).
• Meta keywords tag: deprecated
• Viewport tag: in an increasingly mobile world, this attribute controls how content is displayed on mobile devices. With mobile-first indexing it’s crucial for search engine rankings as well as for a good UX.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width part sets the page width to the device’s screen width (which varies from device to device).

The initial-scale=1.0 part sets the initial zoom level when the browser first loads the page.

• Open Graph tags: define how content is shown on social media when shared.
• Meta charset: a very important tag that sets the character encoding of a web page, so the UX isn’t degraded and bounce rate doesn’t rise. There are dozens of encodings, but the most common are:
  • UTF‑8 – character encoding for Unicode;
  • ISO-8859–1 — character encoding for the Latin alphabet.

<meta charset=UTF-8">

• Meta refresh redirect: tells the browser to redirect to a different page after a set time. This worsens the navigation UX, so a 301 (permanent) or 302 (temporary) redirect is recommended instead.

<meta http-equiv="refresh" content="3;url="https://example.com/">

Since I advise against meta refresh redirects, you can find them easily with the filters in SEO Spider’s Response Codes tab.