Home What are Open Graph meta tags and how can you set them up Marketing What are Open Graph meta tags and how can you set them up What are Open Graph meta tags and how can you set them up

What are Open Graph meta tags and how can you set them up

June 07, 2023
What are Open Graph meta tags and how can you set them up

In today’s digital age, social media platforms have become the go-to medium for content sharing and engagement. To optimize how your website appears on social media, it’s essential to harness the power of Open Graph meta tags. In this article, we will explore what Open Graph meta tags are, why they are important, which tags to use, and how to set them up manually or with the help of the Yoast SEO plugin.

What are Open Graph Meta Tags?

Open Graph meta tags are snippets of HTML code that provide structured information about your website’s content to social media platforms. When your webpage is shared on platforms like Facebook, Twitter, or LinkedIn, these tags control how your content appears in the shared post. Open Graph meta tags allow you to define the title, description, image, URL, and other essential elements, ensuring accurate representation and enticing previews.

Why are Open Graph Tags Important?

Open Graph tags are crucial for several reasons. Firstly, they improve the visibility and presentation of your website’s content when shared on social media platforms. By defining the title, description, and image, you can create engaging and informative previews that attract users’ attention. Secondly, Open Graph tags enhance click-through rates and user engagement by making your shared links more appealing and enticing. Lastly, they allow you to maintain consistent branding and messaging across social media platforms, reinforcing your online presence.

Which Open Graph Tags Should You Use?

Open Graph offers a variety of tags, but some are particularly important. The essential tags include “og:title” (the title of your content), “og:description” (a concise summary), “og:image” (an eye-catching image representing your content), and “og:url” (the URL of the webpage being shared). These tags provide the fundamental elements required to create engaging and accurate previews.

og:title

The “og:title” tag specifies the title of your content when it is shared on social media platforms. It helps to create an eye-catching and descriptive title that accurately represents your content and attracts users’ attention.

og:URL

The “og:url” tag indicates the URL of the webpage being shared. It ensures that the shared post directs users to the correct webpage and helps maintain consistency across platforms.

og:description

The “og:description” tag provides a concise summary or description of your content. It allows you to provide a brief overview that entices users to click and engage with your shared post.

og:image

The “og:image” tag specifies the image that represents your content when shared on social media. It is recommended to use an attention-grabbing, visually appealing image that accurately reflects your content and helps increase engagement.

og:type

The “og:type” tag defines the type of content being shared, such as ‘article”, ‘website”, ‘video”, or ‘product”. It helps social media platforms understand the nature of your content and present it appropriately in users’ feeds.

og:locale

The “og:locale” tag indicates the language and regional locale of your content. It helps social media platforms present your content to the appropriate audience based on their language preferences.

How to Set Up Open Graph Tags Manually?

To set up Open Graph tags manually, you need to add specific HTML code to the head section of your website’s pages. You can include the necessary meta tags by adding the following lines of code between the <head> and </head> tags:

<meta property="og:title" content="Your content title">
<meta property="og:description" content="A concise description of your content">
<meta property="og:image" content="URL to the image representing your content">
<meta property="og:url" content="URL of the webpage being shared">

Replace the placeholder values with the appropriate information for each tag. Repeat this process for every webpage you want to optimize.

How to Set Up Open Graph Tags in WordPress?

To add custom code to your WordPress theme, you need to access the functions.php file. In the functions.php file add the following code:

function open_graph_meta_tags() {
    global $post;
 
    if( is_singular() ) {
        $img_src = get_the_post_thumbnail_url( $post->ID );

        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags( $post->post_excerpt );
            $excerpt = str_replace( "", "'", $excerpt );
        } else {
            $excerpt = get_bloginfo( 'description' );
        }

        ?>
 
        <meta property="og:title" content="<?php echo the_title(); ?>"/>
        <meta property="og:description" content="<?php echo $excerpt; ?>"/>
        <meta property="og:type" content="article"/>
        <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
        <meta property="og:site_name" content="<?php echo get_bloginfo('title'); ?>"/>
        <meta property="og:image" content="<?php echo $img_src; ?>"/>
    
        <?php
        
    }
    
    if ( is_front_page() ) { ?>
        
        <meta property="og:type" content="website"/>
        <meta property="og:title" content="Projects Engine: Home"/>
    
        <?php
    } 
}
add_action( 'wp_head', 'open_graph_meta_tags', 5 );

This code checks if the current page is a single post or page and outputs the Open Graph tags accordingly. It includes the page title, type (article), URL, description, and featured image.

If you have the Yoast SEO plugin installed use a bigger priority to override the plugin’s settings.

How to Set Up Open Graph Tags with the Yoast SEO Plugin?

If you’re using the popular Yoast SEO plugin for WordPress, setting up Open Graph tags becomes more convenient. After installing and activating the plugin, navigate to the Yoast SEO settings for each page or post. Within the “Social” tab, you’ll find dedicated fields to enter your Open Graph title, description, and image. Yoast SEO automatically generates the required Open Graph meta tags based on your inputs, saving you the hassle of manually adding code.

To enable Open Graph tags with the Yoast SEO plugin, access the “Yoast SEO” menu in your WordPress admin panel. Select the “Settings” options page and navigate to the “Social sharing” section. Save your changes, and Yoast SEO will generate the necessary Open Graph tags for your content, enhancing its appearance when shared on Facebook and other social media platforms.

What are Open Graph meta tags and how can you set them up

Conclusion

Open Graph meta tags are powerful tools for controlling how your website’s content appears on social media platforms. By implementing these tags correctly, you can enhance visibility, improve click-through rates, and engage users effectively. Whether you choose to set up Open Graph tags manually or with the help of plugins like Yoast SEO, taking advantage of this feature will undoubtedly amplify your content’s reach and impact on social media. So, make sure to utilize Open Graph meta tags to unlock the full potential of your website’s presence in the social media realm.

Was this article helpful?