What Are Facebook OG Tags and How to Add OG Tags to WordPress (Without a Plugin)

Both Facebook and Twitter use social media meta tags to gain more information about a shared content.

Facebook uses the open graph protocol whereas twitter uses twitter cards. Using these markups, you can essentially tell facebook and twitter (and other platforms that use this schema) a lot about your content, like what category your content falls in and what title, description and image to use while displaying your content.

This way, you are better in control of how your content is being shared and thereby can attract more traffic from this shared content.

What Are OG (Open Graph) Tags?

Facebook OG tags (Open graph meta tags) are specifications that allow you to tag your webpage content. When someone shares your page on facebook, facebook accesses these meta tags to display your content.

For example, you can specify an image that facebook must use while a particular article is being shared. This way, facebook knows exactly which image to use and does not have to use a random image on your webpage.

Here are some basic og tags that you can use to tag your content:

1.) og:type

The og:type meta tag allows you to describe the type of content you are sharing. Facebook allows a host of content types and a few of them as are follows:

  • article: As the name suggests, this content type can be used to represent an article, blog post or a news story.
  • place: The place content type can be used to represent a place, venue, a business, a landmark, or any other location.
  • product: The product content type can be used to represent a product in an online store.
  • profile: The profile content type can be used to represent the profile of an individual a person, a celebrity, artists, or musicians.
  • books.author: This content type can be used to represent a single author of a book.

So if you are a content blog, you can use the following meta tag for your article pages:

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

Similarly, if your content is a celebrity profile, then the tag would be as follows:

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

To find the complete list of content types that you can use, check out this link: https://developers.facebook.com/docs/reference/opengraph.

2.) og:url, og:title and og:description:

The og:url, og:title and og:description meta tags are used to represent the original URL of the content, the title of the content and its description. Their format is as follows:

<meta property="og:url" content="http://sitename.com/article.html"/>  
<meta property="og:title" content="Title of the Article" />  
<meta property="og:description" content="Small (less than 200 words) excerpt of the article." /> 

3.) og:image

The og:image property can be used to tell facebook what image to use while displaying your content. Multiple instances of the og:image tags can be used. This gives the user a choice to use his preferred image while sharing.

The format is as follows:

<meta property="og:image" content="http://sitename.com/main-image1.jpg" />
<meta property="og:image" content="http://sitename.com/fallback-image1.jpg" />
<meta property="og:image" content="http://sitename.com/fallback-image2.jpg" />

As shown in the format above, your main image needs to be at the very top followed by fallback images. The fallback images can be used in-case the article does not have a main image.

In-case of a wordpress blog, the main image will be the 'post thumbnail' also known as the 'featured image'. This is unique to each post. A fallback image on the other hand need not be unique to the post and can be a generic image. This image can be used in-case an article does not have a featured image.

Example of a fallback image is as follows:

Fallback Image

Optimizing Images for Facebook: To get a bigger image in your content preview, Facebook suggests that you must use an image which is a minimum of 600 x 315 pixels in dimensions. If you use images that are a minimum of 600 x 315 pixels you will get a preview that looks as follows:

Facebook large image preview

If your image is smaller, then it is cropped to a image with dimensions of 158 x 158 pixels and the preview generated is as follows:

Facebook small image preview

So if you are using a smaller fallback image, keep its dimensions around 200 x 200 pixels.

4.) fb:admins:

The fb:admins is an optional meta tag that allows you to add your facebook user ID so you can get insights for your domain as described here in the facebook domain insights page.

What are Twitter Cards?

Twitter cards is similar to 'og tags' except that it is specific to twitter. Here are some important twitter cards that you can use on your website.

1.) twitter:card:

The twitter:card meta tag allows you to define your content type and is similar to og:type. Here are the different content types that twitter allows:

  • Summery Card and Summery Card with large image: This is the default card and is suitable for a content blog. The 'summery card' can be used for smaller images whereas the 'summery card with large image' can be used to display a large image.
  • Photo Card: This card can be used to display a single photo.
  • Gallery Card: This card can be used to display a collection of four photos.
  • App Card: This card can be used to display details of a mobile app with direct download.
  • Player Card: This card can be used to display a video, audio or media file.
  • Product Card: This card can be used to display product information.

Here is the format of the twitter:card meta tag:

<meta name="twitter:card" content="summary">

If you want to produce a large image display for your blog post, the tag would be as follows:

<meta name="twitter:card" content="summary_large_image">

2.) twitter:url, twitter:title and twitter:description

The twitter:url, title and description tags can be used to define the URL, title and description of a webpage. The good thing is that you need not define these meta tags separately for twitter as twitter can use the og tags as a fallback. So if you have already defined your og:title, og:url and og:desription tags, you need not define them again for twitter.

Here are the og:tags that twitter uses as a fallback:

Object Twitter Tag Fallback OG Tag
Content Title twitter:title og:title
Content Description twitter:description og:description
Content URL twitter:url og:url
Image Source twitter:image:src og:image

3.) twitter:image:src:

The twitter:image:src meta tag defines the URL of the image that needs to be used while displaying the content summery. As mentioned above, this card uses the og:image tag as a fallback. So if you have defined the og:image tag, you need not define this again.

The size of image displayed in this case is decided by the twitter:card tag as mentioned before. Use 'summery' for a smaller image and 'summary_large_image' for a larger image.

Note: The images will only work if your website is white-listed for twitter cards. To get your site white-listed, check out this URL: https://cards-dev.twitter.com/validator

4.) twitter:site

The twitter:site is an optional meta tag that allows you to add your twitter username so you can check twitter card analytics.

Adding FB Open Graph Meta Tags and Twitter Cards to Your WordPress Blog

Now that we have had a rough look at the various tags that can be used, let's see how we can add these tags to our wordpress site without using a plugin:

Step 1: Open your theme's functions.php file. You can also do this by logging in to your wordpress dashboard and then clicking 'Appearance > Editor' and then selecting the functions.php file from the right panel.

Step 2: Add the following code to your functions.php file. This code adds the OG tags and Twitter Cards to the homepage and single post pages of your site.

function og_metatags() {
global $post;
 
if(is_single() || is_home() || is_front_page()) {
        
/** Make necessary edits here **/
$og_type_homepage = "website"; //Content type of the homepage
$og_type = "article"; //Content type of blog posts. Change this to use a different a content type if needed. Eg: profile.
$fallbackimage = ""; //Add the URL of your fallback image between the quotes or leave it blank if you do not want to use one.
$twitter_username = ""; //Add your twitter username here between the quotes or leave it blank. Eg: @twitterusername.
$twitter_card = "summery"; //Change "summery" to "summary_large_image" if you want to use large image.
$fb_admin = ""; //Add your facebook ID here between quotes or leave blank if you do not want to use one.
		
/* Generate post excerpt using custom field if present */
if(get_post_meta( get_the_ID(), 'description', true )) { 
	$og_des = get_post_meta( get_the_ID(), 'description', true ); } 
/* If custom field is not present, generate excerpt from post content */
if(!get_post_meta( get_the_ID(), 'description', true )){   
	$og_des = strip_tags($post->post_content);
	$og_des = strip_shortcodes($og_des);
	$og_des = str_replace(array("\n", "\r", "\t"), ' ', $og_des); 
	$og_des = substr($og_des, 0, 155);
	$og_des = $og_des.'...';}
        ?>
<meta property="og:url" content="<?php if(is_home() || is_front_page()){echo home_url();}else{the_permalink();} ?>"/>  
<meta property="og:title" content="<?php if(is_home() || is_front_page()){bloginfo();}else{single_post_title('');} ?>" />  
<meta property="og:description" content="<?php if(is_home() || is_front_page()){bloginfo(description);}else{echo $og_des;} ?>" />   
<meta property="og:type" content="<?php if(is_home() || is_front_page()){echo $og_type_homepage;}else{echo $og_type;} ?>" />
<?php if( is_single() && has_post_thumbnail($post->ID) ) :?>
<meta property="og:image" content="<?php $featured_img = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'full', false); echo $featured_img[0]; ?>" />
<?php endif; ?>
<?php if(trim($fallbackimage) !== "") :?>
<meta property="og:image" content="<?php echo trim($fallbackimage); ?>" />
<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo(); ?>" />
<?php if(trim($fb_admin) !== "") :?>
<meta property="fb:admin" content="<?php echo trim($fb_admin); ?>" />
<?php endif; ?>
<meta name="twitter:card" content="<?php echo $twitter_card; ?>">
<?php if(trim($twitter_username) !== "") :?>
<meta name="twitter:site" content="<?php echo trim($twitter_username); ?>" /> 
<?php endif; ?>
			
	<?php
    } else {
        return;
    }
}
add_action('wp_head', 'og_metatags', 4);

Step 4: This step involves adding proper doctype to our html header. To do this, add the following to your functions.php page.

/*Adding og prefix*/
function og_tag_prefix($tagdata) {
	if(is_home() || is_front_page() || is_single())
	$tagdata .= ' prefix="og: http://ogp.me/ns#"';
	return $tagdata; 
}
add_filter('language_attributes', 'og_tag_prefix');	

The above code will generate the following output to your opening HTML tag on the single posts pages and the homepage:

<html lang="en-US" prefix="og: http://ogp.me/ns#">

This doctype declaration tells facebook and other platforms that our site uses og tags.

Step 5: Save and FTP the functions.php file or click 'Update' in-case you are using wordpress dashboard to make the edits.

Code Explanation

Here is a brief explanation of the code:

Section 1: Defining Variables

/** Make necessary edits here **/
$og_type_homepage = "website"; //Content type of the homepage
$og_type = "article"; //Content type of blog posts. Change this to use a different a content type if needed. Eg: profile.
$fallbackimage = ""; //Add the URL of your fallback image between the quotes or leave it blank if you do not want to use one.
$twitter_username = ""; //Add your twitter username here between the quotes or leave it blank. Eg: @twitterusername.
$twitter_card = "summery"; //Change "summery" to "summary_large_image" if you want to use large image.
$fb_admin = ""; //Add your facebook ID here between quotes or leave blank if you do not want to use one.

This section of the code is about defining variables that will be used in the code as output. Currently the og:type of the homepage is set to 'website' and that of single post pages is set to 'article'. You can change these if you want.

If you want to use a fallback image as already discussed in this article, upload your image by logging in to your wordpress dashboard and then clicking on 'Media > Add New'. Upload your image from there by clicking 'Select File'. Once uploaded go to 'Media > Library', click on the uploaded image and get the URL of the image from the URL section displayed in the right panel. Now add the URL between the quotes as follows:

$fallbackimage = "http://sitename.com/wp-content/uploads/2015/02/image.jpg";

If you leave this blank the fallback image og tag will not be generated.

If you want to use your twitter username and facebook ID, add them between the quotes. These are optional, so if you leave them blank, these tags will not be generated.

Section 2: Post Excerpt

/* Generate post excerpt using custom field if present */
if(get_post_meta( get_the_ID(), 'description', true )) { 
	$og_des = get_post_meta( get_the_ID(), 'description', true ); } 
/* If custom field is not present, generate excerpt from post content */
if(!get_post_meta( get_the_ID(), 'description', true )){   
	$og_des = strip_tags($post->post_content);
	$og_des = strip_shortcodes($og_des);
	$og_des = str_replace(array("\n", "\r", "\t"), ' ', $og_des); 
	$og_des = substr($og_des, 0, 155);
	$og_des = $og_des.'...';}

Here we check if a custom field named 'description' is set and if yes, save its value to a variable for output later for the og:description tag. If not set, a 155 word auto excerpt will be generated using the post content which will be used for the output.

If you would like to use a custom og description for your posts, do the following:

Step 1: Login to your wordpress dashboard and open the post you want to add a custom description for.

Step 2: Now scroll down to the 'Add New Custom Field' section and click 'Enter New' to add a new custom field.

Step 3: Enter the text 'description' in the 'Name' field and your custom description in the 'Value' field.

Step 4: Click 'Add custom field'.

Once you do this, a custom field named 'description' will be set and this custom description will be used in the output for og:description tag for this particular post. If this field is empty a 155 word excerpt will be auto generated and used instead. This is the same technique we used for generating custom meta description tags.

Section 3: Output

For the output we first check if the current page is the homepage of the site or a single posts page. If it the homepage, the following tags will be generated:

<meta property="og:url" content="http://sitename.com"/>  
<meta property="og:title" content="Your blog's Site Title" />  
<meta property="og:description" content="Your blog's Tagline" />   
<meta property="og:type" content="website" />
<meta property="og:image" content="http://sitename.com/wp-content/uploads/2015/02/fallbackimage.jpg" />
<meta property="og:site_name" content="Your blog's Site Title" />
<meta property="fb:admin" content="3434433" />
<meta name="twitter:card" content="summery">
<meta name="twitter:site" content="@twitterusername" /> 

Please note that the og:title for the homepage is generated using the 'Site Title'. This is the same 'Site Title' that you entered in your wordpress dashboard under 'Settings > General > Site Title'. Similarly the og:description is generated using the 'Tagline' which is here 'Settings > General > Tagline'.

The image used for the homepage is the fallback image or the default image discussed earlier. If you do not add a fallback image, the og:image tag will not be generated.

If it is the single posts page, the following tags will be generated:

<meta property="og:url" content="http://sitename.com/url-of-your-post/" />  
<meta property="og:title" content="The title of your post." />  
<meta property="og:description" content="Custom description set using custom field or a 155 word description generated using the page content as mentioned in 'Section 3: Post Excerpts' above." />   
<meta property="og:type" content="article" />
<meta property="og:image" content="http://sitename.com/wp-content/uploads/2015/02/featured-image.jpg" />
<meta property="og:image" content="http://sitename.com/wp-content/uploads/2015/02/fallbackimage.jpg" />
<meta property="og:site_name" content="Your blog's Site Title" />
<meta property="fb:admin" content="3434433" />
<meta name="twitter:card" content="summery">
<meta name="twitter:site" content="@twitterusername" /> 

As you can see, there are two og:image tags that are being generated. One tag is the 'featured image' and another the 'fallback image'. If the post does not have a featured image, only the fallback image will be used.

Validation

Once you add the code to your site, it is important that you validate the output to ensure everything is working fine. Both facebook and twitter offer debug tools wherein you can enter the URL of a webpage to check if the tags are being generated properly. The links are as follows:

Facebook OG Tag Debugger: https://developers.facebook.com/tools/debug/
Twitter Card Validator: https://cards-dev.twitter.com/validator

Please note that these tools will only work if you are logged in.

Alternatively, you can also check the HTML source of your webpages to see if the tags have been generated properly. To view the source of a webpage, load it in your browser, right click on an empty space and select 'View Source'. Now check the head section of the source to see if your tags are being generated properly.

 
 
 
Related Articles

 

Leave a Reply

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