Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you’ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.
Step 1: Understanding Open Graph Tags
Before diving into the code, let’s review what Open Graph tags are and why they are important.
og:title: Defines the title of the post.og:description: Provides a brief description of the post.og:image: Specifies the image to be used when sharing the post.og:url: Specifies the canonical URL of the post.og:type: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.
These tags are placed within the <head> section of your site’s HTML and are read by social media platforms like Facebook, Twitter, and LinkedIn, among others.
Step 2: Adding the Code to Your Theme
Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s functions.php file. If you’re using a child theme, add the code to the child theme’s functions.php file to ensure your changes are not overwritten during future updates to the parent theme.
- Access the WordPress Dashboard and go to Appearance > Theme Editor.
- Select the
functions.phpfile of your theme or child theme. - Add the following PHP code at the end of the file:
- function add_opengraph_tags() {
if (is_single() || is_page()) {
global $post;
if (has_post_thumbnail($post->ID)) {
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘full’);
} else {
// Default image URL if the post has no featured image
$img_src = array(‘https://www.example.com/default-image.jpg’);
}// Post title
$title = get_the_title();
// Post description
$description = get_the_excerpt();echo ‘<meta property=”og:title” content=”‘ . esc_attr($title) . ‘”/>’;
echo ‘<meta property=”og:description” content=”‘ . esc_attr($description) . ‘”/>’;
echo ‘<meta property=”og:image” content=”‘ . esc_url($img_src[0]) . ‘”/>’;
echo ‘<meta property=”og:url” content=”‘ . get_permalink() . ‘”/>’;
echo ‘<meta property=”og:type” content=”article”/>’;
}
}
add_action(‘wp_head’, ‘add_opengraph_tags’);
Code Explanation:
add_opengraph_tags(): This function checks if the current page is a post or page and, if so, generates the appropriate Open Graph tags.- Featured Image:
has_post_thumbnail($post->ID): Checks if the post has a featured image set.wp_get_attachment_image_src(): Retrieves the full-size URL of the featured image. If the post does not have a featured image, a default image is used.
- Title and Description:
get_the_title()andget_the_excerpt(): Retrieve the post title and description, which are used for theog:titleandog:descriptiontags, respectively.
- Canonical URL and Content Type:
get_permalink(): Retrieves the URL of the current post for theog:urltag.og:type: Set to “article” to indicate that the content is an article.
Step 3: Verifying the Implementation
After adding the code to functions.php, it’s important to verify that the Open Graph tags are being generated correctly.
- View the page source: On any post or page, right-click and select “View Page Source” or a similar option. Look for the Open Graph tags within the
<head>section. - Use the Facebook Sharing Debugger:
- Visit the Facebook Sharing Debugger.
- Enter the URL of your post and click “Debug”.
- Facebook will show the information it detects, including the image, title, and description. This helps identify if the tags are being generated correctly.
Step 4: Troubleshooting Common Issues
- Image Not Displaying: Ensure that the featured image is set on the post. If a default image is used, verify that the image URL is correct and publicly accessible.
- Conflicts with Other Plugins: Some SEO or social media plugins may interfere with the generation of Open Graph tags. Try temporarily disabling these plugins to see if the issue persists.
- Caching: If you’re using a caching plugin, clear the site’s cache to ensure the new settings are applied.
Summary
Adding Open Graph tags manually to your WordPress theme using PHP is an excellent way to ensure your content is displayed correctly on social media platforms. With this code, you have full control over how your posts are shared, including which image, title, and description are used. Additionally, you avoid relying on extra plugins, keeping your site lighter and faster.
Now that you’ve configured the Open Graph tags, your posts should be shared correctly on social media, with the featured images appearing as expected. If you have any questions or need further assistance, feel free to leave a comment below!
Photo by Negative Space
