Learn how to add Open Graph (OG) tags in WordPress without using a plugin. Enhance social media sharing and control post appearance with custom OG tags.
Open Graph (OG) tags are essential for ensuring that when you share content on social media platforms like Facebook, Twitter, or LinkedIn, it appears exactly the way you want it to. They control the title, description, and image associated with your posts, making them crucial for effective content sharing. If you’re looking to add OG tags to your WordPress site without the use of plugins, this guide will take you through a step-by-step process.
Why Use OG Tags?
Before diving into the technical steps, it’s important to understand the benefits of using OG tags:
- Improved Appearance on Social Media: OG tags help control how your content looks when shared on platforms, making it more visually appealing.
- Increased Click-Through Rates (CTR): A well-optimized post with proper titles and images can significantly boost CTRs from social media.
- Better Brand Control: Ensuring that your brand logo, colors, and descriptions are consistent across all shared links.
- Enhanced SEO Benefits: Although OG tags are primarily for social sharing, they can indirectly improve your SEO by increasing your content’s engagement.
Steps to Add OG Tags Without a Plugin
The following process involves manually adding OG tags to your WordPress theme files, ensuring you have complete control over your metadata without relying on additional plugins.
1. Backup Your Site
Before making any changes, always ensure you have a backup of your WordPress site. Modifying theme files directly can lead to errors, so it’s better to be safe than sorry.
2. Access Your Theme’s `header.php` File
The OG tags should be placed inside the `<head>` section of your theme’s files. To access this file:
- Navigate to your WordPress dashboard.
- Go to Appearance > Theme Editor.
- Select the `header.php` file from the right sidebar.
This file controls the head section for every page on your website.
3. Add OG Tags in `header.php`
Now that you have access to the `header.php` file, you can start adding your custom OG tags.
Here’s the code snippet you’ll need:
“`php
function add_open_graph_tags() {
if (is_single() || is_page()) {
global $post;
setup_postdata($post);
echo ‘<meta property=”og:title” content=”‘ . get_the_title() . ‘”/>’ . “n”;
echo ‘<meta property=”og:type” content=”article”/>’ . “n”;
echo ‘<meta property=”og:url” content=”‘ . get_the_permalink() . ‘”/>’ . “n”;
echo ‘<meta property=”og:description” content=”‘ . get_the_excerpt() . ‘”/>’ . “n”;
if (has_post_thumbnail()) {
$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]) . ‘”/>’ . “n”;
}
}
}
add_action(‘wp_head’, ‘add_open_graph_tags’);
“`
Explanation of the Code:
– Title (`og:title`) : Dynamically generates the title of the post or page.
– Type (`og:type`) : Defines the type of the content, usually set as “article” for blog posts.
– URL (`og:url`) : Pulls the permalink (direct URL) of the current post or page.
– Description (`og:description`) : Uses the excerpt or a custom description for the post.
– Image (`og:image`) : Fetches the featured image of the post. This is particularly important for social media sharing, as an image increases the visual appeal of your content.
4. Adding Twitter Cards
If you want to ensure your content is well-represented on Twitter, you can also add Twitter card tags in the same `header.php` file. Twitter uses a similar format as OG tags, but with slight differences.
Here’s a code snippet for adding Twitter cards:
“`php
// Twitter Card tags
echo ‘<meta name=”twitter:card” content=”summary_large_image”>’ . “n”;
echo ‘<meta name=”twitter:title” content=”‘ . get_the_title() . ‘”>’ . “n”;
echo ‘<meta name=”twitter:description” content=”‘ . get_the_excerpt() . ‘”>’ . “n”;
if (has_post_thumbnail()) {
$thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘medium’);
echo ‘<meta name=”twitter:image” content=”‘ . esc_attr($thumbnail_src[0]) . ‘”>’ . “n”;
}
“`
The `summary_large_image` card type is used for posts that feature large images, which perform better than text-only cards on Twitter.
- Save the Changes
Once you’ve added the Open Graph and Twitter card tags to your `header.php` file, save the changes. Always test your site afterward to ensure that everything is working correctly and no errors have been introduced.
Testing Your OG Tags
After adding OG tags, it’s important to verify whether they are functioning correctly. You can use the following tools for testing:
- Facebook Sharing Debugger: This tool allows you to enter a URL and see how it will look when shared on Facebook. It also identifies any missing or misconfigured OG tags.
- Twitter Card Validator: Similar to Facebook’s debugger, Twitter offers a card validator tool to preview how your post will appear when tweeted.
Benefits of Adding OG Tags Without Plugins
- Reduced Load Time: Plugins add extra weight to your website. By coding OG tags manually, you avoid slowing down your site.
- Greater Control: Custom code gives you precise control over your metadata without having to rely on plugin updates.
- Avoid Plugin Conflicts: Fewer plugins mean fewer chances of conflicts between different pieces of software on your website.
Conclusion
Adding OG tags in WordPress without a plugin is a powerful way to control how your content is displayed on social media, leading to better engagement, branding, and performance. By manually adding these tags to your theme’s `header.php` file, you also avoid potential plugin-related issues, giving you greater control over your site.
FAQs
Can I add OG tags using a child theme instead of editing `header.php`? Yes, using a child theme is a safer option. This way, you can preserve your changes even after updating your theme.
What happens if I don’t use OG tags? Without OG tags, social media platforms will automatically pull content from your page, which may not display your post in the most appealing way.
Is it possible to add custom OG tags for specific pages? Yes, you can customize OG tags for individual posts or pages by modifying the code to check for specific conditions or use custom fields to enter unique tag data.
