How to add meta tags in WordPress

 — 

Trying to add meta tags to WordPress for SEO? This how-to guide will explain how you can do this with and without a plugin.

Add meta tags to WordPress using a plugin

To add meta tags using a plugin, you should use Yoast SEO on your WordPress website.

When installing Yoast SEO, it automatically creates a system of where you can add your page’s title, meta description and even Open Graph and Twitter card meta tags too.

However, just be sure that your theme isn’t repeating the meta code to conflict.

Add meta tags without a WordPress plugin

To add meta tags to your WordPress website without the use of a plugin, follow the steps below:

  1. Navigate to Appearance>Editor>Theme Header (header.php).
  2. Once there, place the code below between the <head></head> tags of your website (pick and choose the tag types you need, however, refer to the note below for guidance).
  3. You could do if statements to ensure the right content is shown for special pages such as archives and 404s pages, etc.

Title and meta description

<?php the_title( '<title>', '</title>' ); ?>
<meta name="description" content="<?php the_excerpt(); ?>" />

Open Graph meta tags

<meta property="og:locale" content="<?php echo get_locale(); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php the_title(); ?>" />
<?php if ( get_the_excerpt() ) : ?>
<meta property="og:description" content="<?php the_excerpt(); ?>" />
<?php endif; ?>
<meta property="og:url" content="<?php echo ( isset( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http' ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>" />
<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>" />
<?php if ( get_the_post_thumbnail() ) :
$image_data_wh = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'large' ); 
?>
<meta property="og:image:width" content="<?php echo $image_data_wh[1]; ?>" />
<meta property="og:image:height" content="<?php echo $image_data_wh[2]; ?>" />
<meta property="og:image" content="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'large' ); ?>" />
<meta property="og:image:secure_url" content="<?php echo str_replace( 'http://', 'https://', get_the_post_thumbnail_url( get_the_ID(), 'large' ) ); ?>" />
<?php endif; ?>

Twitter Card meta tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="<?php the_title(); ?>" />
<?php if ( get_the_excerpt() ) : ?>
<meta name="twitter:description" content="<?php the_excerpt(); ?>" />
<?php endif; ?>
<?php if ( get_the_post_thumbnail() ) : ?>
<meta name="twitter:image" content="<?php echo get_the_post_thumbnail_url( get_the_ID(), 'large' ); ?>" />
<?php endif; ?>

Note, it’s best to use all three together. However, especially best to use the Open Graph and Twitter Card meta tags together.

Finally, to ensure you’re able to use the large size of your post’s thumbnail, be sure to add the code below into your functions.php file too.

add_theme_support( 'post-thumbnails' );