How to Add OG Tags in WordPress Without Plugin

How to Add OG Tags in WordPress Without Plugin

Is your website displayed on social media very badly? Do you want to add some information with your link for social media? Then You have to use og meta tag. In this article, You will learn about “How to Add OG Tags in WordPress Without Plugin”.

OG means open graph. WordPress SEO Plugin automatically generates og meta tag. But You can add those meta tags to your website. First, you need to know about og meta tag.

What are open graph meta tags?

Open graph meta tags are tags that add on HTML under <head> tags. It will allow social media platforms to understand the webpage. This can display information on social media about that web page like title, description, and thumbnail image. Then it will help you to engage more people on your webpage.

There are many types of open graph meta tags, That need to use.

OG:Title: This meta tag can display the post title When you share your page on social media.

OG: Description: This tag can display a short description of the link. 

OG:Image:  It will display an image when you share your page on social. 

OG: URL: The URL of the webpage.

Usually, Open graph meta tags are placed on the <head> section on the HTML. But in WordPress, we can not directly place it like this.

<head>
  <title>My Page</title>
  <meta property="og:title" content="My Page" />
  <meta property="og:description" content="This is my page about interesting things." />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/my-page" />
</head>

How to Add Code to Header in WordPress Manually 

Besides plugins, We can add code in the header manually. To add code in the header in WordPress manually, You need to edit the header.php file. But there is a problem. If you are not a theme developer of your uses theme. You can not update the header.php file. Because Theme’s updated version comes regularly. Your edited file will be replaced. This problem if you have you. You need to create a child theme.  We have an article, How to create WordPress child themes.

The first step, You have to go to the theme file directory. Copy the header.php file and place it in your child theme directory. Or, If you want to edit directly, You can. 

Copy those codes.

<?php
        $title = get_the_title(get_the_ID());
    $site_name = get_bloginfo('name');
    $url = get_the_permalink(get_the_ID());
    $description = get_bloginfo('description');
    $type = (is_home())? 'website':'article';
    $image = get_the_post_thumbnail_url(get_the_ID());
       ?>
        <meta property="og:title" content="<?php echo esc_attr($title); ?>">
<meta property="og:site_name" content="<?php echo esc_attr($site_name); ?>">
<meta property="og:url" content="<?php echo esc_url($url); ?>">
<meta property="og:description" content="<?php echo esc_attr($description); ?>">
<meta property="og:type" content="<?php echo esc_attr($type); ?>">
<meta property="og:image" content="<?php echo esc_url($image) ?>">  

In the second step, You will see code on top of the file like the screenshot. Place the code above wp_head()  that you have copied recently. Don’t replace it, Just put it in that empty place. Save the file and update the child theme. 

How to Add OG Tags in WordPress Without Plugin

Let’s add this code automatically.

How to Add OG Tags in WordPress Without Plugin

However, adding code manually has various problems. To avoid those, We have a great way to add code on the header. WordPress has a wp_head hook for adding code on wp_head()

Put this function on function.php

if ( ! function_exists( 'wpk_add_og_meta_tags' ) ) {
    function wpk_add_og_meta_tags() {
    $title = get_the_title(get_the_ID());
    $site_name = get_bloginfo('name');
    $url = get_the_permalink(get_the_ID());
    $description = get_bloginfo('description');
    $type = (is_home())? 'website':'article';
    $image = get_the_post_thumbnail_url(get_the_ID());
       ?>
        <meta property="og:title" content="<?php echo esc_attr($title); ?>">
<meta property="og:site_name" content="<?php echo esc_attr($site_name); ?>">
<meta property="og:url" content="<?php echo esc_url($url); ?>">
<meta property="og:description" content="<?php echo esc_attr($description); ?>">
<meta property="og:type" content="<?php echo esc_attr($type); ?>">
<meta property="og:image" content="<?php echo esc_url($image) ?>">
       <?php
    }
}
add_action( 'wp_head', 'wpk_add_og_meta_tags', 20 );

To use the meta description, You need to create a meta box. If you have put this code. I hope, OG meta tags have been added already on WordPress. 

Conclusion

OG meta tags are the most important element of WordPress websites and blogs. You have to use OG Meta tags. Most users use a plugin for this.

I hope this helps! Let me know if you have any questions.

Leave a Reply

Your email address will not be published. Required fields are marked *