Generate Open Graph and Twitter meta tags in WordPress without a plugin.

Open Graph and Twitter Cards enable any web page to become a rich object in a social graph. These metadata promote your blog posts with attractive images, titles, and descriptions and attract new readers and potential customers to your website.

Assuredly, every user has continued support for metatags on their websites or blogs. Difficulties transpire for WordPress users when they have to use different plugins for this very simple task. No doubt WordPress plugins make one’s life easy by just clickety-click installation and setup. But at the backend, these plugins bloat your blog posts and make them buggy or slow – I mean real slow!

For WordPress users, I would urge them not to use any plugin merely to append Open Graph and Twitter meta tags to their blog articles. It’s not a good practice. The best way to go is to create your function to generate essential metadata/metatags.

Let’s dive right into it and create a custom function named gen_automatic_metadata() (you can name it whatever you wish) within the functions.php file which would automatically generate Open Graph and Twitter Cards including General Meta Tags for the individual blog post.

function gen_automatic_metadata() {
  // CODE GOES HERE
}

// Prints scripts or data in the head tag
add_action('wp_head', 'gen_automatic_metadata');

Common Meta Tags

Let’s first set the following meta tags common to our function.

charset – specifies the character encoding for the HTML document.
viewport – gives the browser instructions to control the page’s dimensions and scaling.
fb:app_id – allow FB to associate the URL Open Graph with an application.

// Common Meta Tags
echo '<meta charset="' . get_bloginfo('charset') . '">';
echo '<meta name="viewport" content="width=device-width,initial-scale=1">';
echo '<meta property="fb:app_id" content="ADDYOURIDHERE">';

Open Graph & Twitter Card for Single Post

Above we have appended the three main common meta tags. Now we will code dynamic Open Graph & Twitter Card tags specifically for single posts/articles.

if (is_single() && get_post_type() == 'post') {
  // Getting Description
  $excerpt = get_the_excerpt();
  $excerpt = substr($excerpt, 0, 160);
  $excerpt = substr($excerpt, 0, strrpos($excerpt, ' ')) . '...';

  // Meta Description
  echo '<meta name="description" content="' . $excerpt . '">';

  // Open Graph
  echo '<meta property="og:title" content="' . get_the_title() . '">';
  echo '<meta property="og:type" content="article">';
  echo '<meta property="og:url" content="' . esc_url(get_permalink()) . '">';
  echo '<meta property="og:description" content="' . $excerpt . '">';
  echo '<meta property="og:locale" content="' . get_locale() . '">';
  echo '<meta property="og:image" content="' . esc_url(get_the_post_thumbnail_url()) . '">';
  echo '<meta property="og:image:secure_url" content="' . esc_url(get_the_post_thumbnail_url()) . '">';
  echo '<meta property="og:image:type" content="' . wp_get_image_mime(esc_url(get_the_post_thumbnail_url())) . '">';
  echo '<meta property="og:image:alt" content="' . get_the_title() . '">';
  echo '<meta property="ia:markup_url" content="' . esc_url(get_permalink()) . '">';

  // Twitter Card
  echo '<meta name="twitter:card" content="summary_large_image">';
  echo '<meta name="twitter:title" content="' . get_the_title() . '">';
  echo '<meta name="twitter:image" content="' . esc_url(get_the_post_thumbnail_url()) . '">';
  echo '<meta name="twitter:image:alt" content="' . get_the_title() . '">';
  echo '<meta name="twitter:url" content="' . esc_url(get_permalink()) . '">';
  echo '<meta name="twitter:description" content="' . $excerpt . '">';
}

If you want to dive deep into Open Graph & Twitter Cards follow the below links.

Open Graph & Twitter Card for other pages

If a user shares a link to the main blog page, category page, or search page from your website, we need to generate a new set of meta tags for those pages.

We would do that in an else statement of your function.

else {
  $title = 'TITLE OF YOUR BLOG PAGE';
  $desc = 'DESCRIPTION OF YOUR BLOG PAGE';
  $metaimg = 'ABSOLUTE LINK OF YOUR META IMAGE';

  // Meta Description
  echo '<meta name="description" content="' . $desc . '">';

  // Open Graph
  echo '<meta property="og:title" content="' . $title . '">';
  echo '<meta property="og:type" content="website">';
  echo '<meta property="og:url" content="' . esc_url(get_site_url()) . '">';
  echo '<meta property="og:description" content="' . $desc . '">';
  echo '<meta property="og:locale" content="' . get_locale() . '">';
  echo '<meta property="og:image" content="' . esc_url($metaimg) . '">';
  echo '<meta property="og:image:secure_url" content="' . esc_url($metaimg) . '">';
  echo '<meta property="og:image:type" content="' . wp_get_image_mime(esc_url(get_the_post_thumbnail_url())) . '">';
  echo '<meta property="og:image:alt" content="' . $title . '">';

  // Twitter Card
  echo '<meta name="twitter:card" content="summary_large_image">';
  echo '<meta name="twitter:title" content="' . $title . '">';
  echo '<meta name="twitter:image" content="' . esc_url($metaimg) . '">';
  echo '<meta name="twitter:image:alt" content="' . $title . '">';
  echo '<meta name="twitter:url" content="' . esc_url(get_site_url()) . '">';
  echo '<meta name="twitter:description" content="' . $desc . '">';
}

Final Code

Below is the complete gen_automatic_metadata() function.

function gen_automatic_metadata() {
  // Common Meta Tags
  echo '<meta charset="' . get_bloginfo('charset') . '">';
  echo '<meta name="viewport" content="width=device-width,initial-scale=1">';
  echo '<meta property="fb:app_id" content="ADDYOURIDHERE">';

  if (is_single() && get_post_type() == 'post') {
    // Getting Description
    $excerpt = get_the_excerpt();
    $excerpt = substr($excerpt, 0, 160);
    $excerpt = substr($excerpt, 0, strrpos($excerpt, ' ')) . '...';
  
    // Meta Description
    echo '<meta name="description" content="' . $excerpt . '">';
  
    // Open Graph
    echo '<meta property="og:title" content="' . get_the_title() . '">';
    echo '<meta property="og:type" content="article">';
    echo '<meta property="og:url" content="' . esc_url(get_permalink()) . '">';
    echo '<meta property="og:description" content="' . $excerpt . '">';
    echo '<meta property="og:locale" content="' . get_locale() . '">';
    echo '<meta property="og:image" content="' . esc_url(get_the_post_thumbnail_url()) . '">';
    echo '<meta property="og:image:secure_url" content="' . esc_url(get_the_post_thumbnail_url()) . '">';
    echo '<meta property="og:image:type" content="' . wp_get_image_mime(esc_url(get_the_post_thumbnail_url())) . '">';
    echo '<meta property="og:image:alt" content="' . get_the_title() . '">';
    echo '<meta property="ia:markup_url" content="' . esc_url(get_permalink()) . '">';
  
    // Twitter Card
    echo '<meta name="twitter:card" content="summary_large_image">';
    echo '<meta name="twitter:title" content="' . get_the_title() . '">';
    echo '<meta name="twitter:image" content="' . esc_url(get_the_post_thumbnail_url()) . '">';
    echo '<meta name="twitter:image:alt" content="' . get_the_title() . '">';
    echo '<meta name="twitter:url" content="' . esc_url(get_permalink()) . '">';
    echo '<meta name="twitter:description" content="' . $excerpt . '">';
  } else {
    $title = 'TITLE OF YOUR BLOG PAGE';
    $desc = 'DESCRIPTION OF YOUR BLOG PAGE';
    $metaimg = 'ABSOLUTE LINK OF YOUR META IMAGE';
  
    // Meta Description
    echo '<meta name="description" content="' . $desc . '">';
  
    // Open Graph
    echo '<meta property="og:title" content="' . $title . '">';
    echo '<meta property="og:type" content="website">';
    echo '<meta property="og:url" content="' . esc_url(get_site_url()) . '">';
    echo '<meta property="og:description" content="' . $desc . '">';
    echo '<meta property="og:locale" content="' . get_locale() . '">';
    echo '<meta property="og:image" content="' . esc_url($metaimg) . '">';
    echo '<meta property="og:image:secure_url" content="' . esc_url($metaimg) . '">';
    echo '<meta property="og:image:type" content="' . wp_get_image_mime(esc_url(get_the_post_thumbnail_url())) . '">';
    echo '<meta property="og:image:alt" content="' . $title . '">';
  
    // Twitter Card
    echo '<meta name="twitter:card" content="summary_large_image">';
    echo '<meta name="twitter:title" content="' . $title . '">';
    echo '<meta name="twitter:image" content="' . esc_url($metaimg) . '">';
    echo '<meta name="twitter:image:alt" content="' . $title . '">';
    echo '<meta name="twitter:url" content="' . esc_url(get_site_url()) . '">';
    echo '<meta name="twitter:description" content="' . $desc . '">';
  }
}

// Prints scripts or data in the head tag
add_action('wp_head', 'gen_automatic_metadata');

That’s all you need to do. As soon as you save your functions.php file it will start showing all the metadata in the <head> tag. To validate your metadata use Sharing Debugger & Twitter Card Validator.

I hope this article helped you add Open Graph & Twitter Card to your website in a more efficient manner. You can edit this function to make it more robust and add more meta tags as per requirement.

If you liked this article, then please like and share. Also, feel free to drop your details below if you require any assistance with your project to add this script.