OGP Checker & Simulator
- Safe
- The diagnostic results are not stored or published anywhere.
Notes
A tool to validate OGP tag settings and simulate how a page appears when shared on social networks.
Useful for creating OGP images and testing HTML meta tags.
Input source
Choose one of three methods.
| Website URL | Suitable for publicly accessible websites. |
|---|---|
| HTML source | Suitable for development-stage sites or sites behind access restrictions. |
| Image file | Suitable for checking the look of an OGP image during creation. |
Diagnostic result
Evaluated in three grades.
| Grade A | Meets all recommended requirements. |
|---|---|
| Grade B | Meets required items, but there are recommended items. |
| Grade C | Some items need fixing. |
Recommended example
The settings below cover major SNS platforms.
<meta property="og:title" content="Page title">
<meta property="og:description" content="Page description">
<meta property="og:url" content="Page URL">
<meta property="og:image" content="OGP image URL">
<meta property="og:type" content="Page type">
<meta property="og:site_name" content="Site name">
<meta name="twitter:card" content="Twitter card type">Tag details
Base OGP tags
Tags that can be used across SNS platforms. It is recommended to set all of the following.
Use the `property` attribute.
<meta property="og:title" content="Page title">
<meta property="og:description" content="Page description">
<meta property="og:url" content="Page URL">
<meta property="og:image" content="OGP image URL">
<meta property="og:type" content="Page type">
<meta property="og:site_name" content="Site name">og:title
Sets the page title. Usually the same value as the `title` tag.
On X (Twitter), if this is missing the Twitter Card may be disabled, so it is effectively required.
<meta property="og:title" content="Page title">Example
<meta property="og:title" content="OGP Checker & Simulator">og:description
Sets the page description. Usually the same value as the `description` tag.
On most SNS platforms, if omitted, `description` may be used as a fallback.
<meta property="og:description" content="Page description">Example
<meta property="og:description" content="Diagnose OGP settings and preview how your page will look when shared on social networks from a URL or HTML source. Supports X, Facebook, and LINE, and can simulate from an image file as well.">og:url
Set the target page URL as an absolute URL.
<meta property="og:url" content="Page URL">Example
<meta property="og:url" content="https://develop.tools/ogp-simulator/">og:image
Set the OGP image URL as an absolute URL. Recommended size is `1200px`×`630px`.
Because it may be displayed as 1:1, keep important information within the central `630px`×`630px` area.
<meta property="og:image" content="OGP image URL">Example
<meta property="og:image" content="https://develop.tools/_assets/img/meta/ogp/tools/ogp-simulator.png">og:type
Specifies the type of the page.
| website | Website top page |
|---|---|
| article | Non-top pages such as article pages |
| blog | Blog top page |
| product | Product/service details pages |
<meta property="og:type" content="Page type">Example
<meta property="og:type" content="article">og:site_name
Specifies the website name. Usually common across all pages.
<meta property="og:site_name" content="Site name">Example
<meta property="og:site_name" content="develop.tools">X (Twitter) tags
Tags that are prioritized by X (formerly Twitter).
If base OGP tags are set, you can omit all of these without issues.
Set `twitter:card` only when you want to control the thumbnail size.
Use the `name` attribute.
<meta name="twitter:card" content="Twitter card type">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="Thumbnail image URL">
<meta name="twitter:site" content="Site's X/Twitter username">
<meta name="twitter:creator" content="Author's X/Twitter username">twitter:card
Sets the Twitter Card type. Specify it if you want a large thumbnail.
If omitted, it becomes `summary`.
| summary | Small thumbnail (square) + site info side-by-side |
|---|---|
| summary_large_image | Large thumbnail + site info stacked |
<meta name="twitter:card" content="Twitter card type">Example
<meta name="twitter:card" content="summary_large_image">Facebook tags
Tags used by Facebook.
Specify them if you want to use Facebook-specific analytics features.
<meta property="fb:app_id" content="Facebook App ID">