Issue #3 - page descriptions
Sometimes we neglect or even completely forget about essential parts of our HTML documents. For example, when I audit websites I see many web pages without page descriptions or with poorly written descriptions. Even if this post holds nothing new for you, see it as a reminder to check the descriptions on your existing sites.
Have a great weekend,
Manuel
HTMHell Newsletter 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
metatag, 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 scrappers:
- Twitter Card validator
- Facebook Sharing Debugger
- LinkedIn Post Inspector
- Pinterest Rich Pins Validator
- Social Media Preview
- Meta Tags
These scrapper work for me most of the time, but in a discussion on Twitter Kilian Valkhof pointed out that the official scrappers are outdated, so make sure you test the result properly.