OG Tag Previewer
Preview social sharing cards and generate Open Graph meta tags for your page.
Open Graph Tags: Control How Your Content Looks When Shared
Every time someone shares your URL on Facebook, LinkedIn, WhatsApp or Twitter, those platforms read your Open Graph (OG) meta tags to create a preview card — title, image and description. Without correct OG tags, social shares show broken previews (wrong title, missing image, wrong description) — significantly reducing click-through rates. Studies show posts with proper OG images get 3× more clicks than those without. Our OG Previewer lets you extract, preview and generate all necessary OG tags before publishing.
Frequently Asked Questions
What are Open Graph meta tags and why are they important? ▼
Open Graph (og:) meta tags, developed by Facebook, control how content looks when shared on social media. Key tags: og:title (shared post title), og:description (preview text), og:image (preview image — critical for engagement), og:url (canonical URL), og:type (website/article/product). Without these, Facebook and LinkedIn auto-select random content from your page, often showing poor previews.
What is the ideal og:image size for Facebook and LinkedIn? ▼
Facebook/Open Graph: 1200×630 pixels minimum (1.91:1 ratio). LinkedIn: 1200×627 pixels. Twitter card: 1200×675 (16:9) for summary_large_image. Use JPG or PNG under 300KB for fast loading. Always test with Facebook's Sharing Debugger (developers.facebook.com/tools/debug) after publishing.
How to add Open Graph tags in WordPress? ▼
Install Yoast SEO or Rank Math plugins — both add OG tags automatically based on your post content. For custom themes: add OG tags in the section of header.php. For Next.js: use next/head or next/seo. For plain HTML: manually add the meta tags in your section using our generated code.
What is the difference between og:title and the page title tag? ▼
The HTML tag controls what appears in browser tabs and Google search results. The og:title tag controls what appears in social media share cards. They can be different — your <title> might be "Best EMI Calculator 2024 | SecuredTools" while og:title might be "Free EMI Calculator — Instant Loan Results" (more social-friendly).</div></div>
<div class="faq-item"><div class="faq-q">How to fix incorrect social share preview cache? <span class="faq-arr">▼</span></div><div class="faq-a">Platforms cache OG data aggressively. To force refresh: Facebook: use Sharing Debugger (developers.facebook.com/tools/debug) and click "Scrape Again". LinkedIn: use LinkedIn Post Inspector (linkedin.com/post-inspector/). Twitter: card preview refreshes within hours. WhatsApp: clearing app cache or restarting usually picks up new OG data within 24 hours.</div></div>
</div>
<div class="share-cta"><div><h4>Found this useful?</h4><p>Share — all 72 tools are free.</p></div><button class="btn-share" onclick="shareCurrentPage()">⬆ Share</button></div>
</div>
<div class="tool-sidebar"><div class="sidebar-ad">Ad Space<br><small>Google AdSense</small></div>
<div class="related-box"><h3>Related Tools</h3><div class="related-item"><span class="related-icon">🤖</span><a href="/tools/seo/robots-tester.html">Robots.txt Tester</a></div><div class="related-item"><span class="related-icon">🏗️</span><a href="/tools/seo/schema-generator.html">Schema Markup</a></div></div></div>
</div></div></div>
<div id="site-footer"></div><script src="/js/nav.js"></script><script>
function extractOG(){const html=document.getElementById("og-html").value;const ex=prop=>{const m=html.match(new RegExp(`<meta[^>]+(?:property|name)=["']${prop}["'][^>]+content=["']([^"']+)["']`,"i"))||html.match(new RegExp(`<meta[^>]+content=["']([^"']+)["'][^>]+(?:property|name)=["']${prop}["']`,"i"));return m?m[1]:"";};
document.getElementById("ogt").value=ex("og:title")||ex("twitter:title")||"";document.getElementById("ogd").value=ex("og:description")||ex("description")||"";document.getElementById("ogi").value=ex("og:image")||"";document.getElementById("ogu").value=ex("og:url")||"";document.getElementById("ogs").value=ex("og:site_name")||"";ogPreview();}
function ogPreview(){const title=document.getElementById("ogt").value||"Page Title",desc=document.getElementById("ogd").value||"Description",img=document.getElementById("ogi").value,site=document.getElementById("ogs").value||"example.com",url=document.getElementById("ogu").value||"";
const imgEl=img?`<img src="${img}" style="width:100%;height:200px;object-fit:cover" onerror="this.style.display='none'">`:`<div style="background:#f1f5f9;width:100%;height:200px;display:flex;align-items:center;justify-content:center;font-size:2rem">🖼️</div>`;
document.getElementById("og-preview").innerHTML=`<h4 style="font-size:0.875rem;font-weight:700;margin-bottom:0.5rem">Preview</h4><div style="max-width:500px;border:1px solid var(--border);border-radius:8px;overflow:hidden">${imgEl}<div style="padding:0.75rem;background:#f8f8f8"><div style="font-size:0.75rem;color:var(--gray);text-transform:uppercase">${site}</div><div style="font-weight:700;font-size:0.95rem;margin:0.2rem 0">${title}</div><div style="font-size:0.825rem;color:var(--gray)">${desc.slice(0,150)}</div></div></div>`;
document.getElementById("og-code").value=[`<meta property="og:title" content="${title}">`,`<meta property="og:description" content="${desc}">`,`<meta property="og:image" content="${img}">`,`<meta property="og:url" content="${url}">`,`<meta property="og:site_name" content="${site}">`,`<meta property="og:type" content="website">`,`<meta name="twitter:card" content="summary_large_image">`,`<meta name="twitter:title" content="${title}">`,`<meta name="twitter:description" content="${desc}">`].join("\n");}
document.addEventListener("DOMContentLoaded",ogPreview);
</script><script src="/js/rating.js"></script>
</body></html>