Back to articles
"Debugging Open Graph Tags: Why Your Link Previews Look Wrong"

"Debugging Open Graph Tags: Why Your Link Previews Look Wrong"

via Dev.to Webdeveatyou eatyou

You added all the Open Graph tags. You deployed. You paste the URL into Slack or Twitter — and the preview is wrong, blank, or showing an old image from three months ago. Here is a systematic guide to diagnosing and fixing broken link previews. Step 1: Check if Your Tags Are Actually in the HTML First, confirm the tags exist and are correct in the raw HTML. Do not trust your browser's "view source" — that shows the initial HTML, not what JavaScript may inject later. Use curl to see exactly what a crawler receives: curl -A "facebookexternalhit/1.1" -L "https://yoursite.com/page" | grep -i "og:" The -A flag sets the User-Agent to Facebook's crawler. Some sites serve different HTML to bots, so this matters. You should see output like: <meta property= "og:title" content= "Your Title" /> <meta property= "og:image" content= "https://yoursite.com/image.png" /> If you see nothing, the tags are either missing or rendered by JavaScript (see below). Step 2: The JavaScript Rendering Problem Open G

Continue reading on Dev.to Webdev

Opens in a new tab

Read Full Article
2 views

Related Articles