The perfect meta data for wordpress

This guide provides step-by-step instructions for the perfect meta data title, description, url and image tailored to your Wordpress website.

By Dario Bellotta

Code

The perfect meta data for wordpress

Difficulity: More advanced

What you need is the: Yoast SEO Plugin for WordPress.

Follow me on Instagram: @darioevaristobellotta

Start:

To ensure that both your pages and posts have optimal meta-data – including titles, descriptions, URLs, and images – as you see here:

(you can check your OG meta data here: https://www.opengraph.xyz/)

You just have to replace your <title> aswell as your <meta name=”description”> in your header.php located in: /wp-content/themes/your-theme/header.php with this code:

<title><?php
$meta_title = get_post_meta(get_the_ID(), '_yoast_wpseo_title', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_title)) {
$meta_title = get_the_title();
}
echo $meta_title;
?></title>

<meta name="description" content=" <?php 
$meta_description = get_post_meta(get_the_ID(), '_yoast_wpseo_metadesc', true);
// If the meta description is not set, you can use the excerpt as a fallback
if (empty($meta_description)) {
$meta_description = get_the_excerpt();
}
echo $meta_description;
?>
"/>

<!-- Open Graph protocol -->
<meta property="og:url" content="<?php echo $url ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $meta_title; ?>">
<meta property="og:description" content="<?php echo $meta_description; ?>">
<meta property="og:image" content="
<?php
$social_image = get_post_meta(get_the_ID(), '_yoast_wpseo_opengraph-image', true);
// If the social image is not set, you can use a default fallback
if (empty($social_image)) {
$social_image = 'your-backup-image.png';
}

echo $social_image;
?>
">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="<?php wp_title( '|', true, 'right' ); ?>">
<meta property="twitter:url" content="<?php echo $url ?>">
<meta name="twitter:title" content="<?php echo $meta_title; ?>">
<meta name="twitter:description" content=" <?php echo $meta_description; ?>">
<meta name="twitter:image" content="<?php echo $social_image; ?>">

It should look like this:

now you can edit the meta title, the meta description and the OG Image for sharing inside your wordpress pages with YOAST SEO Plugin. Just scroll to the bottom of your pages or blog posts.

Admin Backend -> Pages -> Edit -> Scroll down to “Yoast Seo Plugin”

Admin Backend -> Posts -> Edit -> Scroll down to “Yoast Seo Plugin”

and there you can edit the title, the description and the image

The URL will be inserted automatically, and for a backup image, you can substitute ‘your-backup-image.png’ in the provided code with the URL of your backup image.

Dario Bellotta