OGP tags (Open Graph Protocol) are HTML meta tags that control how your page appears when shared on social media — including the title, image, and description. Proper setup maximizes traffic from social platforms.
What Are OGP Tags?
OGP (Open Graph Protocol) is a set of HTML meta tags written in the <head> section that control how your page appears when shared on social platforms like Facebook, LINE, or Slack — including the title, description, and thumbnail image.
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
Why OGP Tags Matter
Without proper OGP tags, social shares may show no thumbnail or an irrelevant image. Proper configuration unifies your brand impression and significantly increases click-through from social media.
×2.5
Estimated CTR increase with proper OGP setup
1200×630px
Recommended og:image size
40%
Percentage of sites with no OGP tags
Essential OGP Tags
| Tag | Description | Required |
|---|---|---|
| og:title | Title shown on social media (max 95 chars) | Required |
| og:description | Description shown on social media (max 200 chars) | Required |
| og:image | Thumbnail image URL for shares | Required |
| og:url | Canonical URL of the page | Required |
| og:type | Content type (website / article, etc.) | Required |
| og:site_name | Site name | Recommended |
| og:locale | Language and region (e.g., en_US) | Recommended |
Twitter Card Tags (for X)
| Tag | Description |
|---|---|
| twitter:card | Card type (summary_large_image recommended) |
| twitter:title | Title shown on X (falls back to og:title) |
| twitter:description | Description shown on X (falls back to og:description) |
| twitter:image | Thumbnail image URL for X (falls back to og:image) |
og:image Setup Guide
og:image is the most critical tag for first impressions on social media. Incorrect size or format can prevent the image from showing or cause unwanted cropping.
| Item | Recommended | Notes |
|---|---|---|
| Size | 1200×630px | Minimum 600×315px |
| Aspect ratio | 1.91:1 | Standard landscape ratio |
| File format | JPEG / PNG | GIF/WebP may not work on all platforms |
| File size | Under 8MB | Under 1MB recommended |
| URL type | Absolute URL required | Relative paths won't work |
Common Mistakes to Avoid
No og:image set
The most common mistake. Without og:image, shares will show no thumbnail, drastically reducing click-through rates. Set it on every page.
Using relative paths for og:image
Always use an absolute URL (starting with https://) for og:image. Relative paths cannot be resolved by most social platforms.
og:description is too long
Facebook truncates descriptions at around 200 characters. Put key information first and keep descriptions concise.
Using the same OGP image and description on every page
Setting unique og:image and og:description for key pages like blog posts and product pages improves brand experience and click-through rates.
