Complete Guide to OGP Tags: Optimize Your Website for Social Media Sharing
Learn how to implement OGP tags to make your website look great when shared on social media. Covers X, Facebook, LINE, and more.
When someone shares your webpage on social media, does it display a beautiful card with an image and description — or just a plain URL? The difference comes down to OGP (Open Graph Protocol) tags.
What is OGP?
Open Graph Protocol was created by Facebook in 2010 to standardize how web pages present their metadata to social platforms. Today, X (formerly Twitter), LINE, Slack, Discord, and many other platforms read OGP data to display rich link previews.
Without OGP tags, shared links appear as plain URLs or pull random content from your page, dramatically reducing click-through rates.
OGP SimulatorPreview exactly how your URL will look on X, Facebook, and LINE.Essential OGP Tags
Add these meta tags inside your HTML <head>:
The 4 Required Tags:
og:title— Title shown in the card (keep under 70 characters)og:type— Usewebsitefor most pages,articlefor blog postsog:url— The canonical URL of the pageog:image— Absolute URL of the thumbnail image
Recommended Additional Tags:
og:description— Summary text (120-200 characters)og:site_name— Your website's nameog:locale— Language (e.g.,en_USorja_JP)
X (Twitter) Card Tags
X reads both OGP and its own Twitter Card tags:
twitter:card— Usesummary_large_imagefor better visibilitytwitter:title,twitter:description,twitter:image
If Twitter Card tags are absent, X falls back to OGP tags, so having OGP is sufficient as a baseline.
OGP SimulatorPreview exactly how your URL will look on X, Facebook, and LINE.Optimal OGP Image Sizes
The universal standard: 1200 × 630px (1.91:1 aspect ratio)
- Works for Facebook, X, LINE, Slack, Discord
- Keep file size under 1MB (WebP or JPEG recommended)
- Keep text within 20% of the image area
- Center important content (edges may be cropped)
Clearing Cache
After updating OGP tags, old cached versions may still appear on social platforms:
- Facebook: Use the Sharing Debugger tool to re-scrape your URL
- X: Use the Card Validator tool
- LINE: Use the LINE OGP cache reset tool
FAQ
Q: Do OGP tags affect SEO directly? A: Not directly, but improved click-through rates from social shares can indirectly boost your traffic and search visibility.
Q: Can I use relative paths for og:image?
A: No. Always use absolute URLs like https://example.com/images/og.png.
Q: How do I set OGP in Next.js?
A: Use the Metadata API in App Router. Set the openGraph field in your generateMetadata function, and Next.js will automatically output the correct meta tags.
Summary
Proper OGP implementation is one of the highest-ROI improvements you can make to a website. With the 4 essential tags and a 1200 × 630px image, every share of your content becomes an opportunity to make a strong impression. Use the OGP preview tool to verify your implementation.
