Open Graph and Twitter Card Meta Tags Guide
Configure OG and Twitter Card meta tags for rich social media previews when your pages are shared.
Key Takeaways
- When someone shares your URL on social media, the platform scrapes your page for Open Graph and Twitter Card meta tags to generate a preview card.
- ### Essential Open Graph Tags `og:title` — the title shown in the preview (may differ from the page title).
- The image must be at least 200×200 for Facebook, but larger images get better previews.
- ### Common Mistakes Using relative image URLs (must be absolute with protocol).
SERP Preview
Preview how your page appears in Google search results
Social Media Meta Tags
When someone shares your URL on social media, the platform scrapes your page for Open Graph and Twitter Card meta tags to generate a preview card. Without these tags, previews show a generic link or use AI-guessed content — neither of which is ideal.
Essential Open Graph Tags
og:title — the title shown in the preview (may differ from the page title). og:description — 1-2 sentence summary. og:image — the preview image URL (absolute, not relative). og:url — the canonical URL. og:type — usually "website" or "article". These five tags are the minimum for a proper preview on Facebook, LinkedIn, Discord, Slack, and most platforms.
Open Graph Image Requirements
Facebook recommends 1200×630 pixels. LinkedIn prefers 1200×627. The image must be at least 200×200 for Facebook, but larger images get better previews. Always use HTTPS URLs. File size should be under 5MB. JPEG and PNG are universally supported; WebP support varies by platform. If the image is too small, Facebook may not show it at all.
Twitter Card Types
twitter:card = "summary" shows a small square image beside the title. "summary_large_image" shows a large image above the title. "player" embeds video/audio. Large image cards get significantly more engagement. Include twitter:site (your @handle) and twitter:creator (the author's @handle).
Debugging Previews
Facebook: facebook.com/debug/ (Sharing Debugger). Twitter: cards-dev.twitter.com/validator. LinkedIn: linkedin.com/post-inspector/. These tools show exactly what the platform sees. They also force cache refresh — useful when you've updated tags but the old preview persists.
Common Mistakes
Using relative image URLs (must be absolute with protocol). Missing og:image dimensions (og:image:width, og:image:height help platforms render faster). Not updating meta tags for different pages (every page using the same og:image). Forgetting that platforms aggressively cache previews — use the debug tools to refresh cache after changes.
أدوات ذات صلة
صيغ ذات صلة
أدلة ذات صلة
Meta Tags for SEO: Title, Description, and Open Graph
Meta tags control how your pages appear in search results and social media shares. This guide covers the essential meta tags for SEO, Open Graph for social sharing, and Twitter Card markup.
Structured Data and Schema.org: A Practical Guide
Structured data helps search engines understand your content and can generate rich results like star ratings, FAQs, and product cards. Learn how to implement Schema.org markup effectively with JSON-LD.
Robots.txt and Sitemap.xml: Crawl Control Best Practices
Robots.txt and sitemap.xml are the primary tools for controlling how search engines discover and crawl your site. Misconfiguration can accidentally block important pages or waste crawl budget on irrelevant ones.
Core Web Vitals: LCP, INP, and CLS Explained
Core Web Vitals are Google's metrics for measuring real-world user experience. This guide explains LCP, INP, and CLS, their impact on search rankings, and practical strategies for improving each metric.
Troubleshooting Google Search Console Errors
Google Search Console reports crawling, indexing, and structured data errors that directly affect your search visibility. This guide helps you interpret and fix the most common GSC error types.