OGP & Meta Tag Validator

Paste your HTML to validate Open Graph (OGP) and Twitter Card meta tags. Detects missing tags and bad og:image URLs, and previews the social share card.

Tips

  • The recommended og:image size is 1200×630px (a 1.91:1 aspect ratio). Images that are too small or the wrong aspect ratio may be cropped unexpectedly by social platforms.
  • Crawlers used by Facebook, LINE, and Slack read og:title/og:description, while X (Twitter) has its own twitter:title/twitter:description. Setting both ensures a correct preview on every platform.
  • If twitter:card is missing, X will try to fall back to og:title/og:description, but the image may not render correctly, so it is best to set it explicitly.
  • Set og:url to the canonical, absolute (https://) URL of the page. This also helps avoid duplicate-content confusion caused by URLs with tracking parameters.
  • Right after changing your meta tags, social platforms may still show a cached, outdated preview. Use each platform's re-scrape tool (e.g. Facebook's Sharing Debugger) to refresh the cache.

Frequently Asked Questions

The most common cause is a relative image URL (like /img/a.png). Most crawlers cannot resolve relative URLs, so always use an absolute URL starting with https://. It can also fail to show if your server blocks the crawler's User-Agent, or if the image is too small.

Yes, they serve different purposes, so setting both is recommended. <title> is used for the search results title and the browser tab, while og:title is used for the card title when the page is shared on social media. Many crawlers fall back to <title> if og:title is missing, but the result may not match what you intended.

For a typical article or blog page, summary_large_image is recommended, since it displays a large image. If a small thumbnail is enough, use summary instead. app and player are meant for app-install prompts and embedded video/audio respectively, and are not typical choices for a regular web page.

Social platforms cache the results of their crawl, so an outdated preview can persist even after you fix the tags. You need to explicitly request a re-crawl using each platform's tool — for example Facebook/LINE's Sharing Debugger, or X's Card Validator — to refresh the cache.

Most crawlers will fall back to <title> and meta description to build a preview, but no image will be shown, resulting in a plain link-and-text preview. Since this affects click-through rates, it's best to set at least og:title, og:description, and og:image.
ツールくん

Side Note — Why OGP exists — Facebook built it to make the "Like" button work

The Open Graph Protocol (OGP) was created by Facebook in 2010 to help popularize its "Like" button. At the time, sharing a web page on Facebook produced little more than a bare link and title, and click-through rates suffered. Facebook's solution was to let a page itself declare how it should look when shared, by adding a new <meta property="og:xxx"> namespace to plain HTML.

Interestingly, OGP is built on top of RDFa, a W3C specification for embedding structured data in HTML. By reusing an existing standard, Facebook was able to ship the new feature without needing cooperation from browser vendors or other companies — just a handful of extra meta tags on top of existing pages. That "extend without breaking backward compatibility" approach worked, and OGP became a de facto standard adopted well beyond Facebook, on platforms like Slack, LINE, and Discord.

Twitter never adopted OGP outright; instead it created its own separate namespace, Twitter Cards (twitter:xxx). This was arguably as much a competitive choice as a technical one — not wanting to simply adopt a spec that originated with rival Facebook. As a result, most sites still need to duplicate both og: and twitter: tags today, which is one reason tools like this validator remain useful.

More tools in this category