SEO and traps with creating meta description in WordPress

Learn more about traps while creating the meta description and how it impacts SERP Snippet

An HTML element that offers a brief overview of a web page is known as a meta description (example <meta name="description" content="Describe your page content here">). The meta description tag of a website is displayed as part of the search snippet on a search engine results page (SERP) and is intended to provide the user with a summary of the content on the page and how it relates to their search query.

The click-through rate (CTR) can be influenced by the meta description. That is, they can impact whether a person visits your page. As a result, it is the critical on-page SEO factor.

In this article, we’ll cover the traps that are hidden while using WordPress and plugins that automate that process.

How actually meta description is created in WordPress

Managing the page meta description varies and depends on templates or plugins. Quite often we are trying to use plugins that do the job automatically. But how actually the meta description created?

The meta description can actually be created in the following places:

1. Traditional meta: <meta name="description" content="Describe your page content here">
2. Twitter cards: <meta property="twitter:description" content="Describe your page content here">
3. Open Graph: <meta property="og:title" content="Describe your page content here">

Traps

We used to use plugins to generate automatically the meta description. Here are traps and how to avoid them:

1. Plugin may generate meta description from the page using WordPress excerpt feature¹. That may not be perfectly suitable as the description is taken from the first sentences of the content and cut to the specified limit. As a result, the page description is trimmed in the search result snippet with added three dots at the end. The solution: use a plugin that allows controlling the meta description separately for each page and post.
2. You may get even more than one plugin to generate meta description and that requires verifying that all 3 (traditional meta, Twitter cards and Open Graph) page descriptions are the same. Solution: verify in the code that all generated meta descriptions are equal. The best method is to check the HTML code that is generated for the page. The final result should create all meta descriptions with the same content. Example:

   <meta name="description" content="Describe your page content here">
   <meta property="twitter:description" content="Describe your page content here">
   <meta property="og:title" content="Describe your page content here">
   

What, if meta descriptions differ from each other

At the moment of writing this article it seems that in Google and Bing the meta description is first taken from the Open Graph and then from the Traditional meta. So, if your meta description differs then first Open Graph is used.

By having different meta descriptions we may get unexpected results. Not only in the search results but also in social media preview generators. An example from Slack (URL preview):

<meta name="description" content="Voice-driven web apps using Web Speech API. Reading page content out loud.">
<meta property="twitter:description" content="The Web Speech API is a browser-based audio interface for processing audio inputs and outputs. We'd like to introduce the feature called Page To Speech for reading content out loud. Page To Speech allows you to process page content and read it out loud for the user. Major challenges Converting page content to human-understandable text...">
<meta property="og:title" content="The Web Speech API is a browser-based audio interface for processing audio inputs and outputs. We'd like to introduce the feature called Page To Speech for reading content out loud. Page To Speech allows you to process page content and read it out loud for the user. Major challenges Converting page content to human-understandable text...">

resulted in:

Are there other ways to generate meta description?

Yes. The other way is to use special identifiers in the page content and then process it to generate the meta description. Example: <span data-meta-type="meta-description">This is my page description</span>. We are using this approach along with the custom meta description field in each post. This approach requires processing the page content on-the-fly programmatically, but it gives us more flexibility.

Additionally we are measuring meta content length using rule meta-description-too-long-or-too-short in our SiteLint Platform.