WordPress, add open graph meta without a third party plugin

One day my boss came to me and ask me to solve some weird problem happen with our company website. I work with WordPress website more than 4+ year but this kind of a weird problem I never faced and the problem is nothing but or og tag is not working and because of that facebook, twitter or any other social media platform is not crawling our website tag and our website link not look problem it only shows title name nothing else when we share the URL to any social media platform.

people who don’t know what is og tags for you can find short description bellow.

The open graph protocol allows developers to leverage Facebook in new and exciting ways. One of the easiest ways to venture into the world of Open Graph is to add the open graph meta tags to your site.

Open graph meta tags allow you to control what content shows up when a page is shared on Facebook. We’ve all seen posts like these on Facebook. Ever wonder how you can control the content that displays. Well the answer is Open Graph

To turn your web pages into graph objects, you need to add basic metadata to your page. We’ve based the initial version of the protocol on RDFa which means that you’ll place additional tags in the of your web page. The four required properties for every page are:

og: title — The title of your object as it should appear within the graph, e.g., “The Rock”. og: type — The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required. og: image — An image URL which should represent your object within the graph. og: URL — The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/".

I think you guys can understand now what is og tags for more details you can check out their official website http://ogp.me/#intro

In WordPress, we mostly use plugins to add functionality to our website. and there are lots of plugins available for “og tag” and also for “SEO” but nothing is working for us.

so, we spend almost 2 full days to just check our google cloud serve and our apache engine is there if anything wrong from their side but we didn’t figure out any think after long research online and offline

we finally found one solution the simple function script you can add to your founction.php file and this script add “og tags” for you. You don’t need to use any third party plugins for that.

script code:

//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');

//Lets add Open Graph Meta Info

add_action('wp_head', 'fc_opengraph');
function fc_opengraph() {
if( is_single() || is_page() ) {
$post_id = get_queried_object_id();
$url = get_permalink($post_id);
    $title = get_the_title($post_id);
    $site_name = get_bloginfo('name');
$description = wp_trim_words( get_post_field('post_content', $post_id), 25 );
$image = get_the_post_thumbnail_url($post_id);
    if( !empty( get_post_meta($post_id, 'og_image', true) ) ) 
    {    
        $image = get_post_meta($post_id, 'og_image', true);
    } else {
        $image = 'set your image URl here';
    }
$locale = get_locale();
    echo '<meta name="description" content="Put your website description here">';
    echo '<meta property="og:locale" content="' . esc_attr($locale) . '" />';
    echo '<meta property="og:type" content="article" />';
    echo '<meta property="og:title" content="' . esc_attr($title) . ' | ' . esc_attr($site_name) . '" />';
    echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
    echo '<meta property="og:url" content="' . esc_url($url) . '" />';
    echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />';
if($image) echo '<meta property="og:image" content="' . esc_url($image) . '" />';
// Twitter Card
    echo '<meta name="twitter:card" content="summary" />';
    echo '<meta name="twitter:site" content="@yourtwitterhandle" />';
    echo '<meta name="twitter:creator" content="@yourtwitterhandle" />';
    echo '<meta name="twitter:title" content="' . esc_attr($title) . ' | ' . esc_attr($site_name) . '" />';
    echo '<meta name="twitter:description" content="' . esc_attr($description) . '" />';
      echo '<meta name="twitter:image" content="' . esc_attr($image) . '" />';
  }
}

The original script you can find here https://francescocarlucci.com/wordpress-add-open-graph-meta-without-a-plugin/. we just modify few lines of our use.

If you find this use full please share and like this post. Thank you