How to fix Open Graph meta tags for single entry pages when using the WordPress SEO plugin

This article is deprecated: this functionality exists in Social Sharing & SEO extension.

This article is meant to help you fix the Open Graph metatags of the Single Entry screen when using the WordPress SEO plugin by Yoast. This will help you get better behavior when sharing your single-entry view content on social networks, especially on Facebook.

By default, WordPress SEO plugin will output the following on the head section of a single entry view page:

<!-- This site is optimized with the Yoast WordPress SEO plugin v1.7.1 - https://yoast.com/wordpress/plugins/seo/ -->
<meta name="description" content="My WordPress SEO meta description"/>
<link rel="canonical" href="http://example.com/view/my-demo-issue-tracker/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="My demo issue tracker view" />
<meta property="og:description" content="My WordPress SEO meta description" />
<meta property="og:url" content="http://example.com/view/my-demo-issue-tracker/" />
<meta property="og:site_name" content="Sandbox" />
<!-- / Yoast WordPress SEO plugin. -->

Fix the canonical link

As shown in the example above, we want to transform the default canonical link

<link rel="canonical" href="http://example.com/view/my-demo-issue-tracker/" /> 

in the link to the current single-entry view and not to the multiple entries view. To accomplish it, please paste the following code in your theme's functions.php:

# For all Yoast versions
add_filter( 'wpseo_canonical', 'my_gv_yoast_canonical_url' );

function my_gv_yoast_canonical_url( $canonical_url ) {
    return ( function_exists( 'gravityview_is_single_entry' ) && gravityview_is_single_entry() ) ? 
        add_query_arg( array() ) : 
        $canonical_url;
};

The new link will look like this: <link rel="canonical" href="http://example.com/view/my-demo-issue-tracker/entry/1384/" />

Fix the og:title and title 

To make sure the opengraph title tag is specific for your single entry view, please add the following code to your theme's functions.php, making sure to customize the code for your FORM ID and choosing the right form field (FIELD ID) to be used as input for the title.

# For Yoast v13 and below
add_filter( 'wpseo_title', 'my_gv_yoast_title_and_opengraph_title', 10, 1 );

# For Yoast v14 and above
add_filter( 'wpseo_title', 'my_gv_yoast_title_and_opengraph_title', 10, 1 );
add_filter( 'wpseo_opengraph_title', 'my_gv_yoast_title_and_opengraph_title', 10, 1 );

function my_gv_yoast_title_and_opengraph_title( $title ) {
    if ( ! function_exists( 'gravityview_is_single_entry' ) || ! function_exists( 'gravityview_get_entry' ) ) {
        return $title;
    }

    // Get single Entry id
    $entry_id = gravityview_is_single_entry();
    if ( empty( $entry_id ) ) {
        return $title;
    }

    // Get Entry
    $entry = gravityview_get_entry( $entry_id, true );
    if (! $entry ) {
        return $title;
    }

    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
    $title_field = null;

    switch ( $form_id ) {
        // Your form ID
        case '1':
            // Title field ID
            $title_field = '2';
            break;
    }

    return ( $title_field && ! empty( $entry[ $title_field ] ) ) ? 
        $entry[ $title_field ] : 
        $title;
};

After applying this code, you should expect a different og:title meta: <meta property="og:title" content="Sit amet turpis elementum ligula vehicula" />

Fix the og:description and description

If you would like to make sure the description meta tag is also customized according to the entry information, place the following code into your theme's functions.php, making sure to adapt it to your FORM ID and selecting the FIELD ID that will populate the meta values.

# For Yoast v13 and below
add_filter( 'wpseo_metadesc', 'my_gv_yoast_meta_and_opengraph_description', 10, 1 );

# For Yoast v14 and above
add_filter( 'wpseo_metadesc', 'my_gv_yoast_meta_and_opengraph_description', 10, 1 );
add_filter( 'wpseo_opengraph_desc', 'my_gv_yoast_meta_and_opengraph_description', 10, 1 );

function my_gv_yoast_meta_and_opengraph_description( $desc ) {
    if ( ! function_exists( 'gravityview_is_single_entry' ) || ! function_exists( 'gravityview_get_entry' ) ) {
        return $desc;
    }

    // Get single Entry id
    $entry_id = gravityview_is_single_entry();
    if ( empty( $entry_id ) ) {
        return $desc;
    }

    // Get Entry
    $entry = gravityview_get_entry( $entry_id, true );
    if (! $entry ) {
        return $desc;
    }

    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
    $desc_field = null;

    switch ( $form_id ) {
        // Your form ID
        case '1':
            // Description field ID
            $desc_field = '2';
            break;
    }

    return ( $desc_field && ! empty( $entry[ $desc_field ] ) ) ? 
        $entry[ $desc_field ] : 
        $desc;
};

This code will affect the following lines:

<meta name="description" content="sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas"/>
<meta property="og:description" content="sit amet turpis elementum ligula vehicula consequat morbi a ipsum integer a nibh in quis justo maecenas" />

Fix the og:image

To make sure WordPress SEO picks the image according to the displayed entry, paste the following code into your theme's functions.php, making sure to address the correct FORM ID and FIELD ID.

# For Yoast v13 and below
add_action( 'wpseo_opengraph', 'my_gv_yoast_v13_opengraph_image', 10, 1);

function my_gv_yoast_v13_opengraph_image( $img ) {
    if ( ! function_exists( 'gravityview_is_single_entry' ) || ! function_exists( 'gravityview_get_entry' ) ) {
        return $img;
    }

    // Get single Entry ID
    $entry_id = gravityview_is_single_entry();
    if ( empty( $entry_id ) ) {
        return $img;
    }

    // Get Entry
    $entry = gravityview_get_entry( $entry_id, true );
    if (! $entry ) {
        return $img;
    }

    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
    $img_field = null;

    switch ( $form_id ) {
       // Your form ID
        case '1':
            // Image field ID
            $img_field = '2';
            break;
    }

    $img = ( $img_field && ! empty( $entry[ $img_field ] ) ) ? $entry[ $img_field ] : $img;

    $opengraph_image = new WPSEO_OpenGraph_Image( $image, $GLOBALS['wpseo_og'] );
    $opengraph_image->add_image( $img );
    $opengraph_image->show();
};

# For Yoast v14 and above
add_filter( 'wpseo_opengraph_image', 'my_gv_yoast_v14_opengraph_image', 10, 1 );

function my_gv_yoast_v14_opengraph_image( $img ) {
    if ( ! function_exists( 'gravityview_is_single_entry' ) || ! function_exists( 'gravityview_get_entry' ) ) {
        return $img;
    }

    // Get single Entry ID
    $entry_id = gravityview_is_single_entry();
    if ( empty( $entry_id ) ) {
        return $img;
    }

    // Get Entry
    $entry = gravityview_get_entry( $entry_id, true );
    if (! $entry ) {
        return $img;
    }

    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
    $img_field = null;

    switch ( $form_id ) {
       // Your form ID
        case '1':
            // Image field ID
            $img_field = '2';
            break;
    }

    return ( $img_field && ! empty( $entry[ $img_field ] ) ) ? 
        $entry[ $img_field ] : 
        $img;
};

You should get a proper image meta tag as follows: <meta property="og:image" content="https://example.com/131357700_9b7f1079d4.jpg" />

Read more about the  WordPress SEO plugin available hooks.