A few words regarding OG tags
OG Tags are meta tags which can be added to your HTML. They allow you to control how your content appears on Facebook when a user posts a link to your page.
Adding custom OG tags on your website is fairly straight forward in WordPress
Adding tags in your <head> can be done by editing the function.php file located inside your theme or child theme. You can easily assign different tags based on the page type and retrieve the relevant information from your database. You will find below an example showing how to do this.
Please note that this code aims to make it easy to copy the relevant part(s) that you might need but could be minimised. You may also add/remove meta tags as desired.
Function.php code example
//Add Open Graph tags
function facebook_open_graph() {
global $post;
if ( !is_singular()){return;}
if(is_product()){
echo '<meta property="og:type" content="product">';
echo '<meta property="og:title" content="' . get_the_title() . '">';
echo '<meta property="og:url" content="' . get_permalink() . '">';
if(!has_post_thumbnail( $post->ID )) {
$default_image="https://YourDefaultImageURL.jpg";
// echo '<meta property="og:image" content="' . $default_image . '"/>';
echo '<meta property="og:image:secure_url" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
// echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
echo '<meta property="og:image:secure_url" content="'. esc_attr( $thumbnail_src[0] ) .'" /> ';
}
// <meta property="og:image:width" content="950">
// <meta property="og:image:height" content="634">
$product = wc_get_product( $post->ID );
$product_description = $product->get_short_description();
$product_price = $product->get_price();
echo '<meta property="og:description" content="' . $product_description . '">';
echo '<meta property="product:price.amount" content="'.$product_price.'">';
echo '<meta property="product:price.currency" content="USD">';
echo '<meta property="og:site_name" content="site name" />';
}
elseif (is_front_page()) {
echo '<meta property="og:type" content="website">';
echo '<meta property="og:title" content="' . get_the_title() . '">';
echo '<meta property="og:url" content="' . get_permalink() . '">';
if(!has_post_thumbnail( $post->ID )) {
$default_image="https://YourDefaultImageURL.jpg";
echo '<meta property="og:image:secure_url" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image:secure_url" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
$published_time = get_post_time( 'U', false, $post->ID);
// <meta property="article:published_time" content="2021-11-14T10:57:33">
echo '<meta property="og:site_name" content="sitename.com" />';
}
else {
echo '<meta property="og:type" content="article">';
echo '<meta property="og:title" content="' . get_the_title() . '">';
echo '<meta property="og:url" content="' . get_permalink() . '">';
if(!has_post_thumbnail( $post->ID )) {
$default_image="https://YourDefaultImageURL.jpg";
echo '<meta property="og:image:secure_url" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image:secure_url" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
$published_time = get_post_time( 'U', false, $post->ID);
// <meta property="article:published_time" content="2021-11-14T10:57:33">
echo '<meta property="article:published_time" content="'.$published_time.'">';
echo '<meta property="article:author" content="Author name">';
echo '<meta property="og:site_name" content="site name" />';
}
}
add_action( 'wp_head', 'facebook_open_graph', 5 );Please note:
- you could enter both the non https and https image URL if possible (og:image / og:image:secure_url). In the code above, only the https URL is provided.
- Use og:image:width and og:image:height for faster processing on Facebook’s side
- Facebook recommends a 1.91:1 image ratio, such as 600x314px or 1000×524 for non-open Graph Stories images.
External links for more information
Test your pages on Facebook’s sharing debugger.
Full list of meta tags is available on the Open Graph Website.
More information can be found on Facebook’s “Guide to Sharing for Webmasters”.
Please feel free to share your implementation of OG tags or comment on potential improvements in the comment section!