HTML Metadata Tags for SEO

Why is metadata so important for SEO?

A lot of Technical SEO is build around having the right metadata on a page, and eliminating errors is important.

There are a few broad categories of metadata that need to be considered and optimised to achieve good results. Of course, any optimisation should be taken with a specific goal in mind. Once you have established your objectives you should take measurements to set a baseline or benchmark. Each change should be evaluated against theis baseline.

Technical SEO for metadata concerns itself with having the correct markup. The baseline will inform you which tags need to be changed or altered to set up all the recommended metadata.

There are several good tools for Technical SEO, including

  • Integrity for Mac
  • Scrutiny for Mac
  • Screaming Frog

We use a number of custom and in-house tools such as HutchBot, but that's a separate topic of conversation.

Steer clear of Xenu for Windows though - it's old and not as capable as the others, and the adverts in the reports are disconcerting.

For inspecting the raw data, use 'view source' in your favourite web browser. Avoid the temptation to use 'inspect' or 'developer tools' as they add interpretation or run JavaScript and this can significant alter the HTML markup.

Core SEO Metadata

There are three essential elements that you must place in the HTML <head> tag to set up the page for correct indexing.

  • <title>...</title>
  • <meta name='description' value='...'/>
  • <link rel="canonical" href="https://www.hutchisontechnical.co.uk/pages/seo-metadata" />

The title tag set the page title used in the SERP (search engine results page) and is required. Normally this should be the same as the <h1> tag on the page. Recommended length is no more than 60 characters.

Meta description is short summary of the page, no more than perhaps 150 characters as long descriptions get truncated on the SERP display. Treat it like ad copy and make it readable - they are not used for page ranking but have a noticable effect on CTR (click through rate) so having great punchy text here is key. Try to make the text unique for the page too, as it helps users identify which page they want if you have several appear in the search results.

Canonical pages

An example of a canonical link is <link rel="canonical" href="https://www.hutchisontechnical.co.uk/pages/seo-metadata" />

The canonical tag declares the URL for the authoritive version of the content. Search engines attribute the most weight and link equity to this page, so it's vital to get it right.

In general you should always have a canonical on every page, even if it links to itself. Allegedly this helps identify pirated content - if your page is indexed first then it gains from being the true source.

Canonicals are really powerful when you have multiple ways of displaying a page. For example, filter and facet lists need to use them to avoid dividing the link equity. Another use is when you two or more versions of a site, such as HTTP and HTTPS versions, or a mobile version of the site on m.example.com.

OpenGraph metadata

The OpenGraph metadata is used by Facebook. We use a few of these tags to help present the pages properly when they are shared on social media.

  • <meta property="og:description" content="A lot of Technical SEO is build around having the right metadata on a page, and eliminating errors is important." />
  • <meta property="og:title" content="HTML Metadata Tags for SEO - Hutchison Technical" />
  • <meta property="og:url" content="https://www.hutchisontechnical.co.uk/pages/seo-metadata" />
  • <meta property="og:type" content="website" />
  • <meta property="og:image" content="https://www.hutchisontechnical.co.uk/static/media/wide-logo-2-1-ratio.png" />
  • <meta property="og:image:width" content="1684" />
  • <meta property="og:image:height" content="842" />

Most of this should be fairly obvious. It's considered useful to set title and description, and you make wish to fine tune these values to meet the limits for length on Facebook.

The URL is the address you want to use when this page is shared, i.e. the canonical for the page.

Type is commonly 'website' but there are others that might be better in some circumstances, particularly 'video' and 'article. You may need to add more metadata if you use a different type. You can find out more about the types on the OGP website.

Image come in multiple ratio, and the width/height metadata help the social platform select the right image. Order is important here - the size metadata should be after the image they refer to as it's possible to have many images. You'll have one for Facebook, one for LinkedIn, maybe others in different sizes for other platforms.

Twitter Metadata

Twitter has it's own set of metadata, although it will fall back to OpenGraph and page meta values if the Twitter-specific information is missing.

If you are already setting page and Facebook metadata, you only need to add the following:

  • <meta name="twitter:card" content="summary" />
  • <meta name="twitter:site" content="@htluk" />
  • <meta name="twitter:creator" content="@ntnyh" />
  • <meta name="twitter:image" content="https://www.hutchisontechnical.co.uk/static/media/logo-square-white.png" />

The image should be a 1:1 ratio, a square.

'twitter:card' is the display type in the timeline, generally you'll want 'summary'.

The 'site' and 'creator' fields give attribution to these Twitter accounts. Site is usually your company account, and 'creator' should be the actual person who wrote the content. If your policy is to attribute to the company, then put the same @account in both metadata values.

 

Others ways to optimise for SEO

This covers common metadata for SEO.

Naturally there's a lot more metadata that could be applied that may help in specific circumstances such as RDF, Dublin Core, other tags in the OpenGraph, and markup from schema.org.

Other technical aspects that can also have an impact are page charset, loading times and performance, html lang, hreflang, viewport, http headers, general HTML outline structure, the position & value of heading tags, and if content is duplicated between pages. 

Page metadata plays a big part but when optimising it's vital to think holistically at a page level and for the entire web property.

Get in touch

If this article has helped you and you would like to find out more about the services we offer, get in touch for an informal chat.