Add Open Graph meta tags to WordPress without a plugin

Home » SEO » Add Open Graph meta tags to WordPress without a plugin
March 30, 2021 SEO
Add Open Graph meta tags to WordPress without a plugin

Every time someone shares a WordPress post on Facebook, Twitter, LinkedIn, or any other social platform, the platform’s crawler fetches the page and reads its metadata to generate a preview card. That preview card — the combination of image, title, and description that appears inline in the social feed — determines whether someone clicks through or keeps scrolling. Without Open Graph meta tags in the page’s <head>, the platform’s crawler guesses at which image and text to use, often picking an irrelevant image, a truncated or misformatted title, or pulling the meta description tag which may be empty or too long for the card format. The result is a preview that looks unprofessional, fails to communicate the article’s value proposition, and generates significantly fewer clicks than a properly tagged share. Open Graph is a protocol originally created by Facebook and now recognized by virtually every social platform. It uses a set of <meta property="og:*" /> tags to explicitly declare the canonical title, description, image URL, content type, and page URL that should appear in social share previews. Twitter additionally uses its own <meta name="twitter:*" /> card tags, although it falls back to Open Graph values when its own tags are absent. Full SEO plugins like Yoast and RankMath handle Open Graph output automatically as part of their feature set, but on sites that run without a dedicated SEO plugin, you need to output these tags yourself. The wp_head action hook, which fires inside the <head> element of every WordPress page, is the correct place to output them. For singular posts and pages the relevant data comes from get_the_title(), get_the_excerpt(), and get_the_post_thumbnail_url(). The featured image is the most impactful field — a specific 1200×630 pixel image recommended by Facebook renders far better in feed previews than a site logo fallback. Combining these tags with a canonical URL tag (as described in our post on adding canonical URL tags without a plugin) gives you solid social sharing and SEO foundations without installing a heavyweight plugin.

Problem: WordPress does not output Open Graph meta tags by default, resulting in poor social share previews on Facebook, Twitter, and LinkedIn.

Solution: Add the following code to your functions.php file:

<?php
add_action( 'wp_head', 'ha_output_open_graph_tags', 5 );

function ha_output_open_graph_tags() {
    if ( ! is_singular() ) {
        return;
    }

    global $post;

    $title       = get_the_title( $post->ID );
    $description = has_excerpt( $post->ID )
        ? get_the_excerpt( $post->ID )
        : wp_trim_words( get_the_content(), 30 );
    $url         = get_permalink( $post->ID );
    $image       = get_the_post_thumbnail_url( $post->ID, 'large' );

    // Fallback to site logo or default image if no featured image
    if ( ! $image ) {
        $image = get_template_directory_uri() . '/images/og-default.jpg';
    }

    echo '<meta property="og:type"        content="article" />' . "
";
    echo '<meta property="og:title"       content="' . esc_attr( $title )       . '" />' . "
";
    echo '<meta property="og:description" content="' . esc_attr( $description ) . '" />' . "
";
    echo '<meta property="og:url"         content="' . esc_url( $url )          . '" />' . "
";
    echo '<meta property="og:image"       content="' . esc_url( $image )        . '" />' . "
";
    echo '<meta property="og:site_name"   content="' . esc_attr( get_bloginfo( 'name' ) ) . '" />' . "
";

    // Twitter Card tags (fallback to OG if absent, but explicit is better)
    echo '<meta name="twitter:card"        content="summary_large_image" />' . "
";
    echo '<meta name="twitter:title"       content="' . esc_attr( $title )       . '" />' . "
";
    echo '<meta name="twitter:description" content="' . esc_attr( $description ) . '" />' . "
";
    echo '<meta name="twitter:image"       content="' . esc_url( $image )        . '" />' . "
";
}

NOTE: Do not add this snippet if you already use Yoast SEO, RankMath, or any other SEO plugin that outputs Open Graph tags — duplicate OG tags cause validation warnings and may cause social crawlers to use the wrong values. The image should ideally be 1200×630 pixels (1.91:1 ratio) for Facebook and LinkedIn previews and at least 800×418 pixels for Twitter large card format. After adding the snippet, test your pages using the Facebook Sharing Debugger and the Twitter Card Validator to confirm the tags are read correctly.

Related posts