Open Graph Tags

Add Open Graph tags to your WordPress posts and pages automatically without a plugin.

Facebook and other social media sites use Open Graph tags to display the posts and pages that get shared on social media sites. Using Open Graph tags gives you control over how your shared links appear on these social media sites.

Example:

<meta property="og:title" content="Open Graph Tags" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Add Open Graph tags to your WordPress posts and pages automatically without a plugin." />
<meta property="og:image" content="http://atconet.com/wp-content/uploads/2019/04/site-icon-250.png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta property="og:url" content="http://atconet.com/open-graph-tags" />

Add to functions.php:

// meta description tag & open graph tags
// add the excerpt box for pages
add_post_type_support( 'page', 'excerpt' );

// customize the excerpt for use in meta description tags
function my_get_excerpt($post_id) {
	$temp = $post;
	$post = get_post( $post_id );
	setup_postdata( $post );
	$excerpt = wp_strip_all_tags( get_the_excerpt(), true );
	$description = implode( ' ', array_slice( explode( ' ', $excerpt), 0, 35 ) ); // # of words in Meta Description
	wp_reset_postdata();
	$post = $temp;
return $description;
}


// add meta description tag to page header
function add_meta_description_tag() { ?>
	<meta name="description" content="<?php if ( is_single() || is_page() ) { // for posts & pages
		$description = my_get_excerpt( get_the_ID() );
		echo $description;
	}
	if ( is_archive() ) { // use the Category Description for the Meta Description
		echo wp_strip_all_tags( term_description() );
	} ?>
	" />
<?php
}
add_action('wp_head', 'add_meta_description_tag', 1);


// add og tags to page header
function add_og_tags() {
	if ( is_single() || is_page() ) { // for posts & pages
		$og_description = my_get_excerpt( get_the_ID() );
	}
	if ( is_archive() ) { // use the Category Description for the og description
		$og_description = wp_strip_all_tags( term_description() );
	}
	// get the title of current page
	$my_title = esc_html( get_the_title() );
	// use post thumbnail or not for og image url
	$page_id = get_queried_object_id();
	if ( has_post_thumbnail( $page_id ) ) { // Facebook recommends 1200 x 630 pixels for the og:image dimension
		$image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $page_id ), "full" );
		$og_image_path = $image_data[0];
		$og_image_width = $image_data[1];
		$og_image_height = $image_data[2];
	}
	else { // set a default image (Facebook recommends 1200 x 630 pixels for the og:image dimension)
		$og_image_path = "https://domain.com/wp-content/uploads/YYYY/MM/og-image.jpg";
		$og_image_width = "1200"; // 200 minimum width
		$og_image_height = "630"; // 200 minimum height
	} ?>
	<meta property="og:title" content="<?php echo $my_title; ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:description" content="<?php echo $og_description; ?>" />
	<meta property="og:image" content="<?php echo $og_image_path; ?>" />
	<meta property="og:image:width" content="<?php echo $og_image_width; ?>" />
	<meta property="og:image:height" content="<?php echo $og_image_height; ?>" />
	<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php }
add_action('wp_head', 'add_og_tags', 1);
}