Issue #3 - page descriptions

You can describe web pages using meta tags. This is important for 3rd party tools, websites, and apps. Search engines may use the description in their search results and social media sites in previews when users post a link.

<meta name="description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<meta property="og:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">

General

Page descriptions are really useful because they can help users understand what a page is about before they click a link. Here are a few things to consider when you describe a page:

  • Make sure your descriptions are concise and descriptive.
  • Write a unique description for each page and try to include relevant keywords.
  • The length of a description should be somewhere between 50 and ~155 characters (this is where Google truncates the text in search result pages).
  • Search engines usually use the description from the meta tag, but they might not if they think other content on the page is more suitable.
  • Descriptions don't factor into ranking algorithms for web search, but can impact a page's click-through-rate (CTR) which can positively impact a page's ability to rank.

Social Media

It’s advised to use the description and og:description meta tag. Facebook, Pinterest and LinkedIn use the description meta tag for their URL previews, if you don't provide a og:description. Twitter ignores the description meta tag and only displays the og:description, but it offers a dedicated twitter:description variation.

<!-- Search engines + Fallback for Facebook, Pinterest and LinkedIn -->
<meta name="description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<!-- Social media sites Like Twitter, Pinterest, Facebook or LinkedIn -->
<meta property="og:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">
<!-- Specific Twitter description -->
<meta property="twitter:description" content="HTML, accessibility, performance, and SEO tips, tricks, and best practices.">

You can test how your page descriptions look like using these scrapers:

These scrapers work for me most of the time, but in a discussion on Twitter Kilian Valkhof pointed out that the official scrapers are outdated, so make sure you test the result properly.

Resources

Did you enjoy this tip?

Sign up for the HTMHell newsletter and receive an HTML tip or trick every week via e-mail.