Add Facebook Open Graph Meta Tags to Your WordPress Theme
This PHP snippet automatically adds Facebook Open Graph meta tags to your WordPress theme, enabling rich social media previews when your posts and pages are shared on Facebook, Twitter, LinkedIn, and other social platforms.
How to Use This Code
Method 1: Add to Theme's functions.php File
- Access your WordPress files via FTP, cPanel File Manager, or WordPress admin (Appearance > Theme Editor)
- Open your active theme's functions.php file (usually located in
/wp-content/themes/your-theme-name/functions.php) - Add the code at the end of the file, before the closing
?>tag (if it exists) - Save the file
Method 2: Using Fluent Snippets Plugin
Step 1: Install Fluent Snippets
- Go to Plugins > Add New in your WordPress admin
- Search for "Fluent Snippets"
- Install and activate the plugin
Step 2: Create the Snippet
- Navigate to Fluent Snippets > All Snippets
- Click Add New Snippet
- Fill in the details:
- Title: "Facebook Open Graph Meta Tags"
- Description: "Adds Open Graph meta tags for better social media sharing"
- Code Type: Select "PHP Snippet"
- Run Type: Select "Everywhere" or "Frontend Only"
Step 3: Add the Code
- Remove the opening and closing PHP tags (
<!--?phpand?-->) from the original code - Paste the cleaned code into the code editor
- Important: Update the default image URL on line 15:
$default_image="https://yourwebsite.com/path/to/your-default-image.png";
Step 4: Activate
- Click Save and Activate
- The snippet will now run automatically on your site
Important Customisation Required
You MUST update the default image URL in the code:
$default_image="http://www.example.com/wp-content/uploads/Main-page-top-791x400-1.png";Change this to your actual website URL and upload a default image (recommended size: 1200x630 pixels) to use when posts don't have featured images.
Example:
$default_image="https://yourwebsite.com/wp-content/uploads/default-social-image.jpg";How It Works
- Automatic Generation: The code runs on every post and page
- Smart Image Selection: Uses featured images when available, falls back to your default image
- Essential Meta Tags: Generates og:title, og:type, og:description, og:url, og:site_name, and og:image
- Description Logic: Uses post excerpt if available, otherwise uses your site's tagline
Testing Your Setup
- Share a post on Facebook or use Facebook's Sharing Debugger
- Check the preview - you should see your post title, description, and image
- Validate that all Open Graph tags are present in your page source (View > Page Source)
Troubleshooting
- Images not showing: Make sure your default image URL is correct and accessible
- Tags not appearing: Check that the code is properly added and there are no PHP errors
- Fluent Snippets not working: Ensure you removed the
<!--?phpand?-->tags when adding to the plugin - Cache issues: Clear any caching plugins after adding the code
Benefits
- Improved social media engagement with rich previews
- Professional appearance when content is shared
- Better click-through rates from social platforms
- No need for heavy SEO plugins for basic Open Graph functionality
Snippet
// Code by Microbite Websites
// Inspired by https://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/
// and https://www.elegantthemes.com/blog/tips-tricks/how-to-add-open-graph-tags-to-wordpress
//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
$default_image="http://www.example.com/wp-content/uploads/Main-page-top-791x400-1.png";
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
if($excerpt = $post->post_excerpt) {
$excerpt = strip_tags($post->post_excerpt);
$excerpt = str_replace("", "'", $excerpt);
} else {
$excerpt = get_bloginfo('description');
}
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
//replace this with a default image on your server or an image in your media library
echo '';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );
?>
