Skip to contentSkip to main navigation Skip to footer

Add Custom Open Graph MetaData

What is a Open Graph?

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich snippets with the same functionality as other Facebook snippets.

To attract more leads to your website, every Social Media share counts. Having a good looking Facebook snippet is mandatory these days. A bad-looking snippet will make readers just pass over your post in their feed.

Basic Open Graph Metadata

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 <meta> tags in the <head> 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/”.

Here is how the Open Graph looks like in the source code:

<meta property="og:url" content="https://plugin.squirrly.co/cat-food" />
<meta property="og:title" content="Cat Chow Complete Dry Cat Food 2019 - Squirrly SEO" />
<meta property="og:description" content="Give your cat complete nutrition to support her long, healthy life when you serve Cat Chow Complete Dry Cat" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://petco.scene7.com/is/image/PETCO/1277910-center-1" />
<meta property="og:image:width" content="500" />
<meta property="og:site_name" content="Squirrly SEO" />
<meta property="og:locale" content="en_US" />

Custom Open Graph with Squirrly SEO

With the Squirrly SEO plugin, you can customize the Open Graph using the Squirrly SEO Snippet or by calling the sq_open_graph hook in your code.

To edit the Open Graph  using the BULK SEO feature, follow the instructions from this URL >>

Custom Open Graph using Filter Hook

To edit the Open Graph using the sq_open_graph hook, activate Squirrly SEO plugin and add this code in function.php file:

//Hook the Squirrly sq_open_graph
add_filter('sq_open_graph', 'custom_squirrly_open_graph', 11);
function custom_squirrly_open_graph($og) {
    global $post;

    $attachment = false;
    $image = false;
    if (wp_attachment_is_image($post->ID)) {
        $attachment = get_post($post->ID);
    } elseif (has_post_thumbnail($post->ID)) {
        $attachment = get_post(get_post_thumbnail_id($post->ID));
    }

    if (isset($attachment->ID)) {
        $url = wp_get_attachment_image_src($attachment->ID, 'full');
        $image = esc_url($url[0]);
    }

    $og['og:url'] = get_permalink($post->ID);
    $og['og:title'] = get_the_title();
    $og['og:type'] = 'article';
    if($image) {
        $og['og:image'] = $image;
        $og['og:image:width'] = '500';
    }
    $og['og:site_name'] = get_bloginfo('title');
    $og['og:locale'] = get_locale();

    return $og;
}

This is a basic example of how you can build your own Open Graph using the Squirrly hooks. You can also create different types of Open Graphs for videos, books, products, etc.

Was This Article Helpful?