Add Facebook Open Graph Tags To WordPress

in WordPress

Facebook Shop

When a link is shared on Facebook it will be crawled to get the page title and description. The way Facebook will get this information is to search for Open Graph tags, these are meta tags added to your page with a title, description and image data. This data is then used to populate the Facebook status box when someone shares your link.

Add the following to your head tag so that Facebook will understand the content you are posting.

Page Title

To tell Facebook what the title of the page is you need to use the meta tag og:title, this will appear at the top of the post on Facebook.

<meta property="og:title" content="" />

Page Type

As you can post lots of different type of content to Facebook includes, articles, activities, businesses, groups, people, places..etc you can use the type meta tag to tell Facebook what type of content this is.

List Of Content Types

<meta property="og:type" content="" />

Post Image

You can set an image to use as the post image on Facebook by using the image meta tag.

<meta property="og:image" content="" />

Post URL

To set the URL for the shared link. This will be the link that will be placed on Facebook when your content is shared.

<meta property="og:url" content="" />

Post Description

Along with a default title and image you can set a small description of the content.

<meta property="og:description" content="" />

Site Name

Provide Facebook with your website name which can be referenced in your post on Facebook.

<meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" />

Wordpress doesn't come with the functionality to add Facebook open graph meta tags, but you can use the below snippet to add open graph meta tags to all your posts. Simply add the following code to your functions.php page and it will automatically create the Facebook open graph tags for you, so no need to have the Facebook plugins on your WordPress site.

// Facebook Open Graph
add_action('wp_head', 'add_fb_open_graph_tags');
function add_fb_open_graph_tags() {
	if (is_single()) {
		global $post;
		if(get_the_post_thumbnail($post->ID, 'thumbnail')) {
			$thumbnail_id = get_post_thumbnail_id($post->ID);
			$thumbnail_object = get_post($thumbnail_id);
			$image = $thumbnail_object->guid;
		} else {	
			$image = ''; // Change this to the URL of the logo you want beside your links shown on Facebook
		//$description = get_bloginfo('description');
		$description = my_excerpt( $post->post_content, $post->post_excerpt );
		$description = strip_tags($description);
		$description = str_replace("\"", "'", $description);
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php echo $image; ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php echo $description ?>" />
<meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>" />

<?php 	}

function my_excerpt($text, $excerpt){
    if ($excerpt) return $excerpt;

    $text = strip_shortcodes( $text );

    $text = apply_filters('the_content', $text);
    $text = str_replace(']]>', ']]>', $text);
    $text = strip_tags($text);
    $excerpt_length = apply_filters('excerpt_length', 55);
    $excerpt_more = apply_filters('excerpt_more', ' ' . '[...]');
    $words = preg_split("/[\n
	 ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
    if ( count($words) > $excerpt_length ) {
            $text = implode(' ', $words);
            $text = $text . $excerpt_more;
    } else {
            $text = implode(' ', $words);

    return apply_filters('wp_trim_excerpt', $text, $excerpt);

Open Graph Tester Tool

Once the above code is on your website and you would like to test the contents of your website without sharing it on Facebook then you can use the following tool to check a web page and make sure that the open graph data is correct.

Open Graph Tester

Subscribe To Newsletter

Get weekly updates to your email