Add Open Graph Tags To Your WordPress Site

If you want to add Open Graph tags to your site and you don’t want to use a plugin or have more options on customising them, you can insert the following code into your theme’s functions.php file:


/**************************************************
 ** Add Open Graph Tags to Header
 *************************************************/
 
 //Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
    }
add_filter('language_attributes', 'add_opengraph_doctype');
 
//Let's add Open Graph Meta Info
 
function Insert_OpenGraph_In_Head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
		
		$title = esc_html(get_the_title());
		$desc = esc_html(get_the_excerpt());
		$Post_ID = get_the_id();
		
        echo '<meta property="og:title" content="' . $title . '"/>'. PHP_EOL;
		echo '<meta property="og:description" content="' . $desc . '"/>'. PHP_EOL;
        echo '<meta property="og:type" content="article"/>'. PHP_EOL;
        echo '<meta property="og:url" content="' . get_permalink() . '"/>'. PHP_EOL;
        echo '<meta property="og:site_name" content="'. get_bloginfo('name') .'"/>'. PHP_EOL;
		
		/** You'll need to have an admin and app id from Facebook to use the below
		 ** fb:admins Is the Profile ID of the page admin (separate multiple with commas
		 ** fb:app_id Is your app id
		 ** More Info at: https://developers.facebook.com/docs/sharing/webmasters/
		 ** This is used for analytics and insights so you can delete the following 
		 ** TWO Lines of code if you don't want/need it and you'll still be able to share
		 ** You just won't be able to access analytics in the Meta Business Manager
		**/
		echo '<meta property="fb:admins" content="YOUR ADMIN ID"/>'. PHP_EOL;
		echo '<meta property="fb:app_id" content="YOUR APP ID HERE"/>'. PHP_EOL;
	
	/************************
	 ** SHARE IMAGE	
	*************************/
	// Set default variable
	$sharethumbnail = '';
	
	// Use Thumbnail - replace "YourImageSize" with the image size you want to use for the social share
	$sharethumbnail = get_the_post_thumbnail_url( $Post_ID, 'YourImageSize' );
    
	/*********************************************************
     ** Set a default image if we don't have a featured image
     *********************************************************/	 
	if(!$sharethumbnail)
	{
		// We don't have a thumbnail If yu just want to use a default share image
		// Use our default placeholder - change the file path and name as appropriate
		$sharethumbnail = esc_url(get_stylesheet_directory_uri()).'/images/your-default-share-image.jpg';
	}
	echo '<meta property="og:image" content="' . $sharethumbnail . '"/>'. PHP_EOL;
    echo '';
}

add_action( 'wp_head', 'Insert_OpenGraph_In_Head', 5 );

/** END OPEN GRAPH TAGS FOR HEADER **/

This will populate the Open Graph tags with the relevant information based on the current page the visitor is on.

You can combine the above code with something like the Advanced Custom fields plugin which would enable you to upload a specific social sharing image for each post instead of having to use the featured image.

Assuming you have installed “Advanced Customer Fields” and created a Image/Media Field called “og_image” You can replace the above

sharethumbnail

with the following:


	/************************
	 ** SHARE IMAGE	
	*************************/
	$sharethumbnail = '';
	// Get Our Social Share Image from ACF - replace "og_image" with the name of your field
    if(get_field('og_image'))
	{
		// Use the OG Image
		$sharethumbnail = get_field('og_image');
    }
    else
	{
		// Use Thumbnail as we're not using an ACF Field
        //$sharethumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		$sharethumbnail = get_the_post_thumbnail_url( $Post_ID, 'featured-filmreview' );
        
    }
	if(!$sharethumbnail)
	{
		// We don't have a custom image or a featured image so Use our default thumbnail
		$sharethumbnail = esc_url(get_stylesheet_directory_uri()).'/images/wkrn-default-share-image.jpg';
	}
	echo '<meta property="og:image" content="' . $sharethumbnail . '"/>'. PHP_EOL;
    echo '';
Disclaimer: The code on this website is provided "as is" and comes with no warranty. The author of this website does not accept any responsibility for issues arising from the use of code on this website. Before making any significant changes, ensure you take a backup of all files and do not work directly on a live/production website without thoughly testing your changes first.

Leave a Reply

Your email address will not be published. Required fields are marked *