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

This article is meant to help you fix the Open Graph metatags of the single entry view when using the WordPress SEO plugin by Yoast. This will help you get a better behaviour when sharing your single entry view content on the social networks, specially 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:

add_filter( 'wpseo_canonical', 'my_gv_wpseo_canonical' );
function my_gv_wpseo_canonical( $canonical ) {
    if( function_exists('gravityview_is_single_entry') && gravityview_is_single_entry() ) {
        return add_query_arg( array() );
    }
    return $canonical;
}

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 meta

In order 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 customise the code for your own FORM ID and choosing the right form field (FIELD ID) to be used as input for the title.

add_filter( 'wpseo_title', 'my_gv_wpseo_title', 10, 1 );
function my_gv_wpseo_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;
    }
    $entry = gravityview_get_entry( $entry_id );
    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
	switch ( $form_id ) {
		// Customise to your own case FORM ID
		case '254':
			// Customise to your own FIELD ID 
			$title_field = '1';
			break;
	}
    if( !empty( $title_field ) && isset( $entry[ $title_field ] ) ) {
    	$title = $entry[ $title_field ];
    }
    return $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 customised according to the entry information, place the following code into your theme's functions.php making sure to adapt it to your own FORM ID and selecting the FIELD ID that will populate the meta values.

add_filter( 'wpseo_metadesc', 'my_gv_wpseo_metadesc', 10, 1 );
function my_gv_wpseo_metadesc( $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;
    }
    $entry = gravityview_get_entry( $entry_id );
    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
	switch ( $form_id ) {
		// Customise to your own case FORM ID
		case '254':
			// Customise to your own FIELD ID
			$desc_field = '1';
			break;
	}
    if( !empty( $desc_field ) && isset( $entry[ $desc_field ] ) ) {
    	$desc = $entry[ $desc_field ];
    }
    return $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.

add_action( 'wpseo_opengraph', 'my_gv_wpseo_opengraph_image', 10, 1);
function my_gv_wpseo_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;
    }
    $entry = gravityview_get_entry( $entry_id );
    $form_id = empty( $entry['form_id'] ) ? '' : $entry['form_id'];
	switch ( $form_id ) {
		// Customise to your own case FORM ID
		case '30':
			// Customise to your own FIELD ID
			$img_field = '1';
			break;
	}
    if( isset( $entry[ $img_field ] ) && !empty( $entry[ $img_field ])) {
    	$img = $entry[ $img_field ];
    }else{
 		//specify here a default image
		$img = 'http://yourwebsite.com/wp-content/uploads/2017/07/Image2.jpg';
    }
    $GLOBALS['wpseo_og']->image_output( $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.