Home › SEO › OG Tag Tester

OG Tag Tester

Free online tool to check OpenGraph, Twitter Card, and SEO meta tags completeness with social media share preview. Pure frontend processing.

🔒 Pure Frontend · No Server Uploads
🔍 Check Tags
🔒 URLs are only used to fetch page HTML. Analysis is done locally in your browser. No data is stored.

About OG Tag Tester

The OG Tag Tester is an online tool designed for webmasters and SEO professionals. It quickly analyzes OpenGraph tags, Twitter Card tags, and basic SEO meta tags on any web page, providing a complete report and score to help ensure your pages display optimally when shared on social media.

The OpenGraph protocol was created by Facebook and is now widely supported by LinkedIn, Discord, Slack, and other platforms. Correct OG tags ensure your shared links display the right title, description, and image. Twitter Card tags specifically control how your content appears on Twitter. Missing or misconfigured tags can cause abnormal display when sharing, reducing click-through rates.

Key Features

OpenGraph Detection: Checks og:title, og:description, og:image, og:url, og:type, og:site_name and other core OG tags for proper social media sharing.

Twitter Card Detection: Checks twitter:card, twitter:title, twitter:description, twitter:image tags for optimal Twitter sharing.

SEO Meta Detection: Checks title, description, canonical, robots and other basic SEO tags for proper search engine indexing.

Social Preview: Simulates Facebook/Twitter share card appearance for a visual preview of how your link will look.

Scoring System: Provides a 0-100 completeness score for quick assessment of optimization opportunities.

How to Use

1. Paste the URL you want to check in the input field, or paste HTML source code directly.

2. Click the "Check" button to automatically fetch and analyze page tags.

3. Review the score and detailed report. Red indicates missing tags, yellow suggests optimization, green means OK.

4. Switch to the "Preview" tab to see how the page would appear when shared on social media.

5. Follow the suggestions to add missing tags and optimize sharing appearance.

Use Cases

Pre-Launch Check: Ensure all pages have correct OG and Twitter Card tags before going live.

SEO Optimization: Check meta tag completeness for better search engine display.

Competitive Analysis: Examine competitor website tag configurations and learn best practices.

Content Review: Check tags before publishing blog posts or articles.

Technical Details

The OpenGraph protocol was originally created by Facebook in 2010 to make web pages "objects" in the social graph. Core tags include og:title, og:type, og:image, and og:url. Twitter Cards is Twitter's similar protocol supporting summary, summary_large_image, app, and player card types. Both need to be configured to be compatible with all platforms. Recommended og:image size is 1200×630 pixels, minimum 200×200 pixels, supporting JPG, PNG, GIF, and WebP formats.

FAQ

What is the OG Tag Tester?

The OG Tag Tester is an online tool that checks web pages for OpenGraph tags, Twitter Card tags, and SEO meta tags completeness. Enter a URL and get a complete analysis report with optimization suggestions.

What are OpenGraph tags?

OpenGraph tags are HTML meta tags that tell social media platforms (like Facebook, LinkedIn) how to display your web page link. Common OG tags include og:title, og:description, and og:image.

Do OG tags affect SEO?

While OG tags are not a direct Google ranking factor, they affect how your links appear when shared on social media, indirectly impacting click-through rates and traffic.

Is my data uploaded to a server?

No. This tool fetches page content through a browser CORS proxy and analyzes tags locally. Your URLs and analysis results are never stored on any server.

Which tags are checked?

OpenGraph tags (og:title, og:description, og:image, etc.), Twitter Card tags (twitter:card, twitter:title, etc.), and basic SEO tags (title, description, canonical, etc.).

Why can't some URLs be checked?

Some websites may have CORS restrictions or anti-scraping mechanisms that prevent direct browser access. In such cases, you can manually paste the HTML source code for analysis.

OG Tag Tester | No Signup, Client-Side · No Server Uploads

Feedback: dexshuang@google.com

\nHello World \n'; analyzeHtml(); } function clearAll(){ document.getElementById('urlInput').value=''; document.getElementById('htmlInput').value=''; document.getElementById('resultsPanel').style.display='none'; analysisData=null; } async function fetchAndAnalyze(){ const url=document.getElementById('urlInput').value.trim(); if(!url){showError('Please enter a URL');return} try{new URL(url)}catch(e){showError('Invalid URL format');return} const btn=document.getElementById('fetchBtn'); btn.disabled=true;btn.textContent='⏳ Fetching...'; try{ const proxyUrl='https://api.allorigins.win/get?url='+encodeURIComponent(url); const resp=await fetch(proxyUrl); const data=await resp.json(); if(data.contents){analyzeHtmlContent(data.contents)} else{showError('Cannot fetch page content. Try pasting HTML source.')} }catch(e){showError('Fetch failed: '+e.message+'. Try pasting HTML source.')} finally{btn.disabled=false;btn.textContent='🔍 Check'} } function analyzeHtml(){ const html=document.getElementById('htmlInput').value.trim(); if(!html){showError('Please paste HTML source code');return} analyzeHtmlContent(html); } function analyzeHtmlContent(html){ const parser=new DOMParser(); const doc=parser.parseFromString(html,'text/html'); const metaTags=doc.querySelectorAll('meta'); const result={og:{},twitter:{},seo:{},allMeta:[]}; metaTags.forEach(meta=>{ const name=meta.getAttribute('name'); const property=meta.getAttribute('property'); const content=meta.getAttribute('content'); const key=property||name; if(!key)return; result.allMeta.push({key:key,value:content||''}); if(key.startsWith('og:'))result.og[key]=content||''; if(key.startsWith('twitter:'))result.twitter[key]=content||''; if(SEO_TAGS_CHECK.includes(key))result.seo[key]=content||''; }); const titleEl=doc.querySelector('title'); const canonicalEl=doc.querySelector('link[rel="canonical"]'); if(titleEl)result.seo['title']=titleEl.textContent; if(canonicalEl)result.seo['canonical']=canonicalEl.getAttribute('href')||''; analysisData=result; renderResults(); } function renderResults(){ if(!analysisData)return; document.getElementById('resultsPanel').style.display='block'; const score=calculateScore(); const circle=document.getElementById('scoreCircle'); circle.textContent=score; circle.className='score-circle '+(score>=80?'score-good':score>=50?'score-warn':'score-bad'); switchTab('og'); } function calculateScore(){ if(!analysisData)return 0; let total=0,found=0; OG_TAGS.forEach(t=>{total++;if(analysisData.og[t])found++}); TWITTER_TAGS.forEach(t=>{total++;if(analysisData.twitter[t])found++}); ['title','description'].forEach(t=>{total++;if(analysisData.seo[t])found++}); return Math.round(found/total*100); } function switchTab(tab){ document.querySelectorAll('.tab-btn').forEach((b,i)=>{b.classList.toggle('active',['og','twitter','seo','preview'][i]===tab)}); const content=document.getElementById('tabContent'); if(tab==='og')content.innerHTML=renderTagGroup('OpenGraph Tags',OG_TAGS,analysisData.og); else if(tab==='twitter')content.innerHTML=renderTagGroup('Twitter Card Tags',TWITTER_TAGS,analysisData.twitter); else if(tab==='seo')content.innerHTML=renderTagGroup('SEO Meta Tags',SEO_TAGS_CHECK,analysisData.seo); else if(tab==='preview')content.innerHTML=renderPreview(); } function renderTagGroup(title,tags,data){ let html='
'+title+'
'; tags.forEach(tag=>{ const val=data[tag]; const status=val?'✅':'❌'; const cls=val?'tag-ok':'tag-missing'; html+='
'+status+''+tag+''+(val||'Missing')+'
'; }); html+='
'; const extra=Object.keys(data).filter(k=>!tags.includes(k)); if(extra.length>0){ html+='
Additional Tags Found
'; extra.forEach(tag=>{html+='
✅'+tag+''+data[tag]+'
'}); html+='
'; } return html; } function renderPreview(){ const og=analysisData.og,seo=analysisData.seo; const title=og['og:title']||seo['title']||'No title'; const desc=og['og:description']||seo['description']||'No description'; const img=og['og:image']||''; const url=og['og:url']||''; let domain=''; try{domain=new URL(url).hostname}catch(e){domain='example.com'} let html='

📱 Social Media Share Preview

'; html+='
'; html+='
'+(img?'':'No image')+'
'; html+='
'+domain.toUpperCase()+'
'; html+='
'+title+'
'; html+='
'+desc+'
'; const missing=[]; OG_TAGS.forEach(t=>{if(!analysisData.og[t])missing.push(t)}); TWITTER_TAGS.forEach(t=>{if(!analysisData.twitter[t])missing.push(t)}); if(missing.length>0){ html+='
'; html+='
⚠️ Missing Tags
'; missing.forEach(t=>{html+='
• '+t+'
'}); html+='
'; }else{ html+='
✅ All core tags are configured
'; } return html; } function showError(msg){ const content=document.getElementById('tabContent'); document.getElementById('resultsPanel').style.display='block'; content.innerHTML='
⚠️ '+msg+'
'; } document.addEventListener('keydown',function(e){ if(e.ctrlKey&&e.key==='Enter'){fetchAndAnalyze();e.preventDefault()} if(e.ctrlKey&&e.shiftKey&&e.key==='C'){if(analysisData){navigator.clipboard.writeText(JSON.stringify(analysisData,null,2))}e.preventDefault()} }); function sf(){ var t=document.getElementById('ft').value; var x=document.getElementById('fb').value.trim(); if(!x)return; var l={"bug":"🐛 Bug Report","feedback":"💡 Feature Request","other":"💬 Other"}[t]; var u=encodeURIComponent; window.open('https://github.com/webtools-cn/tools-site/issues/new?title='+u(l+' - '+window.location.pathname)+'&body='+u('**Page**: '+window.location.href+'\n**Type**: '+l+'\n\n'+x),'_blank'); document.getElementById('fs').style.display='block'; setTimeout(function(){document.getElementById('fs').style.display='none';document.getElementById('fp').style.display='none';document.getElementById('fb').value='';document.getElementById('fc').textContent='0/1000'},3000); } document.getElementById('fb').addEventListener('input',function(){document.getElementById('fc').textContent=this.value.length+'/1000'});