In a WordPress post, the meta description plays a major role in better CTR (Click-through-rate). Yoast provides a decent way to add it using its free plugin. This is visible in the source code of the page.

How to Show Meta Description below Post Title in WordPress

In this section, you can learn the steps to display yoast meta description after post title in generatepress theme. This can be done using the hook element and php code. Decide the location on whether to show on posts or all singular items.

yoast meta description below title gp premium

Total Time Needed :

Minutes

Required Tools:

– Laptop or Smartphone or PC

Things Needed?

– A WordPress Website, Yoast Plugin, GeneratePress Premium

The following are the steps.

Step 1 :

Add the Meta description to your post using Yoast plugin features.

Step 2

Install the GeneratePress theme and premium plugin.
Activate the Elements module.

Step 3

Add “New Element”.
Choose the “Hook” option.
Give a name to the element.

Step 4

Copy the following code in the text box.
<?php echo get_post_meta(get_the_ID(), ‘_yoast_wpseo_metadesc’, true); ?>

Step 5

Under Hooks, select the Location as “generate_after_entry_title”
Under Display rules, select Location as “Post”. (Note: This will display only on posts. You can select “Singular” to display on page, categories, tags etc.

Step 6

To style the content with tag, you can use typical code like
<?php echo ‘<h3>’ . get_post_meta(get_the_ID(), ‘_yoast_wpseo_metadesc’, true) . ‘</h3>’; ?>

Step 7

If you want to add color to the text, make it italic, set background then you can create a class in style.css file.
A typical class file would look like this –

.yoast-meta-color
{
font-family: “Open Sans”,’Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
color: #00FFFF;
background-color: #333333;
}

Step 8

Then add the following or edit the code like this –
<?php echo “<p class=’yoast-meta-color’>” . get_post_meta(get_the_ID(), ‘_yoast_wpseo_metadesc’, true) . “</p>”; ?>
This will decorate the meta information displayed below the post title in WordPress.

You can also watch this video on how to show meta description to the WordPress post and display it to the visitor.

How to Show on Other Themes

You can make changes to the above code based on your theme requirement.

Most likely you just have to add this PHP code with help of a plugin or using your theme functions.

Since the Yoast code is universal, it should work on other WordPress themes. Though there are new ways to implement the same, this is an easy and working method.

How to Display Meta Description in WordPress using Yoast and GeneratePress