Issue #3 - page descriptions
published onYou 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:
- Twitter Card validator
- Facebook Sharing Debugger
- LinkedIn Post Inspector
- Pinterest Rich Pins Validator
- Social Media Preview
- Meta Tags
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.