A worked example, rendered from real sample data. Sign in to run the tool on your own input.
<title>DevToolsSurf</title>
<meta name="description" content="200+ developer tools">
<meta property="og:title" content="DevToolsSurf">
<meta property="og:image" content="https://devtoolssurf.com/og.png">SEO & SOCIAL PREVIEW REPORT
1 error · 13 warnings
Google Search
title DevToolsSurf
description 200+ developer tools
url (missing)
OpenGraph (Facebook / LinkedIn / Slack / Discord)
og:title DevToolsSurf
og:description 200+ developer tools
og:image https://devtoolssurf.com/og.png
og:image:size (missing)
og:type (missing)
og:url (missing)
og:site_name (missing)
Twitter / X
twitter:card (missing)
twitter:site (missing)
twitter:title DevToolsSurf
twitter:image https://devtoolssurf.com/og.png
Document
canonical (missing)
lang (missing)
charset (missing)
viewport (missing)
robots (missing)
theme-color (missing)
Findings
[WARN] Title is only 12 characters — add context so it reads as a full headline.
[WARN] Description is only 20 characters — there is room for ~160.
[WARN] No og:description — social cards fall back to the meta description.
[WARN] No og:image:width / og:image:height — add 1200×630 so the first share renders instantly.
[WARN] No og:image:alt — screen readers announce the card image with no description.
[WARN] No og:type — defaults to "website"; use "article" for posts.
[WARN] No og:url — shares of tracking-parameter URLs will not be deduplicated.
[WARN] No og:site_name — LinkedIn and Slack show the bare domain instead of your brand.
[WARN] No twitter:card — X falls back to a small "summary"
…
Preview how meta tags and OpenGraph data appear on social platforms. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.