Have you ever shared a link on social media and noticed the image or description didn’t show up properly? That happens when your site lacks Open Graph tags. In this tutorial, you’ll learn how to add them to your HTML/CSS website and also to a WordPress site using a simple plugin.
What is Open Graph?
The Open Graph Protocol allows you to control how your website content appears when shared on social media platforms like Facebook, LinkedIn, and WhatsApp. With it, you can define:
- Title
- Description
- Image
- Link
- Content Type
Part 1 – How to Add Open Graph to an HTML/CSS Site
Step 1 – Open Your HTML File
Open the main HTML file of your page, usually index.html.
Step 2 – Add the Open Graph Tags Inside <head>
<head>
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description that will appear when shared." />
<meta property="og:image" content="https://www.yoursite.com/image.jpg" />
<meta property="og:url" content="https://www.yoursite.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
</head>
Step 3 – Test It Using Facebook Debugger
- Go to https://developers.facebook.com/tools/debug/
- Paste your website URL and click “Debug”
- Click “Scrape Again” to refresh the data and see the preview
Part 2 – How to Add Open Graph to WordPress Using a Plugin
Step 1 – Install the “Insert Headers and Footers” Plugin
- Go to your WordPress dashboard
- Navigate to Plugins > Add New
- Search for “Insert Headers and Footers”
- Install and activate the plugin
Step 2 – Add Open Graph Tags in the Header
- Go to Settings > Insert Headers and Footers
- In the Scripts in Header field, paste the following code:
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description." />
<meta property="og:image" content="https://www.yoursite.com/image.jpg" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
💡 If you want to make the content dynamic, use PHP in your theme or a custom plugin.
📌 Final Tips
- Image Size: Recommended size is 1200x630px.
- Cache Issues: Use “Scrape Again” in Facebook Debugger to force updates.
- Twitter Cards: Consider adding Twitter-specific meta tags like
twitter:cardfor Twitter previews.
