FAQ: Open Graph Preview Questions Answered
Open Graph tags seem simple at first — just a few lines of HTML — but in practice they generate a constant stream of questions from developers, marketers, and content creators. Why is my image not showing on Twitter? Why does the old card still appear after I updated the tags? What size image do I need? Can I test before the page goes live? This FAQ article compiles the most frequently asked questions about Open Graph previews and gives clear, direct answers backed by current platform behavior in 2026.
Questions About OG Tag Setup
Q: What is the minimum set of OG tags I need? A: For a functional social share card on all platforms, you need three tags: og:title, og:description, and og:image. To additionally enable Twitter's large image format, add twitter:card = summary_large_image. That is four tags total and covers every major platform. The additional tags — og:url, og:type, og:site_name — are recommended but not strictly required for a card to display. Q: Where exactly do OG tags go in my HTML? A: In the <head> section, after the <meta charset> and <meta name="viewport"> tags, and before the closing </head> tag. The order within the head does not generally matter, but placing OG tags early ensures they are read by crawlers even if the rest of the head is large. Q: Should I use property= or name= for OG tags? A: Use property= for Open Graph tags (e.g., <meta property="og:title" content="...">) and name= for Twitter Card tags (e.g., <meta name="twitter:card" content="...">). This is the official specification. Most crawlers are lenient and will read either attribute, but using the correct attribute is best practice and avoids any edge cases. Q: Can I test OG tags on a localhost development server? A: No — not with external tools like the Facebook Sharing Debugger or Twitter Card Validator, which require a publicly accessible URL. You can test locally by viewing the page source and manually checking that all og: tags are present and have correct values. For full visual previews before going live, use a publicly accessible staging environment. Q: Do OG tags affect my Google search results appearance? A: No. Google does not use og:title or og:description for search result snippets. It reads the standard HTML <title> tag for the page title and either the meta description or on-page content for the snippet text. OG tags are purely for social media link cards and have no impact on SEO.
Questions About OG Images
Q: What image format should I use for og:image? A: JPEG for photographs and PNG for graphics with text or flat colors. Both are widely supported. Avoid WebP — while some platforms support it, others do not, and using an unsupported format results in no image displaying. Avoid animated GIFs — they will appear as a static first frame. Avoid SVG — it is generally not supported for og:image. Q: My og:image URL is correct but the image is not showing. What is wrong? A: The most common causes: (1) The image URL uses HTTP instead of HTTPS — platforms require HTTPS. (2) The server blocks hotlinking — it serves the image to browsers but returns 403 to crawlers. (3) The image is behind authentication or a CDN signed URL. (4) The og:image value is a relative URL (like /img/og.jpg) instead of an absolute URL (like https://site.com/img/og.jpg). (5) The image file does not exist at that URL. Test the URL directly in a browser to rule out these causes. Q: Is there a maximum file size for og:image? A: Yes. Facebook's maximum is 8MB, Twitter's is 5MB, LinkedIn's is 5MB. In practice, your og:image should be under 1MB for fast loading by social crawlers and to stay well within all platform limits. Use JPEG at quality 80–85% or a compressed PNG to hit this target for a 1200×630 pixel image. Q: Can I use a data URI or base64-encoded image as og:image? A: No. Data URIs in og:image are not supported by any platform. The og:image value must be an absolute HTTPS URL pointing to a file hosted on a web server.
Questions About Caching and Updates
Q: I updated my OG tags but the old card is still showing on Facebook. How do I fix it? A: Use the Facebook Sharing Debugger at developers.facebook.com/tools/debug/. Paste your URL and click 'Fetch New Information'. Click it a second time if the first fetch still shows old data. This forces Facebook to re-crawl your URL and update its cache. The update takes effect for new shares immediately after the debugger runs. Existing posts that previously shared the URL will continue showing the old cached card — Facebook does not retroactively update published posts. Q: How long does Twitter cache OG data? A: Twitter caches card data indefinitely once a URL has been shared. It does not automatically re-check for updates. To force a cache clear, use the Twitter Card Validator at cards-dev.twitter.com/validator. After validating, new tweets containing the URL will use the updated card data. Q: Does every share create a new cache entry, or does each URL have one cache entry? A: Each platform maintains one cache entry per URL. All shares of the same URL on the same platform show the same cached card, regardless of who shared it or when. This means updating your OG tags and clearing the cache improves the appearance for everyone sharing that URL going forward. Q: My URL has query parameters (?utm_source=email). Does that get cached separately? A: Yes — most platforms treat URLs with different query strings as different cache entries. This means https://site.com/page?utm_source=email and https://site.com/page are cached separately and may show different card data depending on when each was first cached. Use og:url to specify the canonical URL, which some platforms use to consolidate cache entries.
Questions About Platform-Specific Behavior
Q: Why does the same URL look different on Facebook vs Twitter? A: Several reasons. Twitter may show a small summary card if twitter:card is not set to summary_large_image. The two platforms also have different image cropping — Facebook at 1.91:1 and Twitter at 2:1, so a 1200×630 image will be slightly cropped on Twitter. Additionally, they cache independently, so one platform may be showing old data while the other has the latest tags. Q: Does WhatsApp use Open Graph tags? A: Yes. WhatsApp reads og:title, og:description, and og:image when a URL is pasted into a chat. It shows a compact card with a small square thumbnail (cropped from the center of og:image), the title in bold, and the description. The card appears after a brief delay while WhatsApp fetches the URL. WhatsApp does not have an official cache-clearing tool — if you need the card to update, the recipient may need to delete and re-paste the URL. Q: Does iMessage on iPhone show OG cards? A: Yes. When you paste a URL in iMessage, iOS fetches og:title, og:description, and og:image and renders a card below the message bubble. The image must be accessible via HTTPS. iMessage does not have a public cache-clearing mechanism. Q: My page is a single-page app (React/Vue/Angular). Do I need to do anything special for OG tags? A: Yes — you need server-side rendering (SSR), pre-rendering, or a dedicated meta tag solution. Social crawlers do not execute JavaScript, so client-rendered OG tags are invisible to them. For Next.js, use the Metadata API to export OG values server-side. For Vue, use Nuxt.js with SSR enabled. For pure client-side apps, use a pre-rendering service like Prerender.io that generates static HTML snapshots for crawler user agents.
Frequently Asked Questions
- Is there a limit to how many OG tags I can add?
- There is no hard limit on the number of OG meta tags you can include in a page's head. The core set covers five standard tags, and you can add additional tags for articles, products, videos, and other content types as defined in the Open Graph specification at ogp.me. However, each OG property should appear only once per page — adding duplicate tags (two og:image entries, for example) leads to unpredictable behavior as crawlers may use the first or last value depending on their implementation.
- Can I set different OG images for desktop and mobile sharing?
- No — og:image is a single value in the HTML source and all platforms read the same value regardless of the device used for sharing. You cannot serve different OG tags to mobile vs desktop users unless you use server-side user agent detection to serve different HTML, which is complex and can create issues with caching and SEO. The practical solution is to design your og:image to look good at both large (desktop card) and small (mobile thumbnail) display sizes by keeping the key content centered.
- Do OG preview tools work for URLs that are behind HTTPS with a self-signed certificate?
- No. Self-signed SSL certificates cause security errors for external tools and crawlers. Preview tools and social platform crawlers verify the SSL certificate as part of the HTTPS connection. A self-signed certificate will result in a connection failure, meaning the tool cannot read your OG tags at all. For testing purposes, use a properly signed certificate even on staging environments — free certificates from Let's Encrypt are available for any domain and are trusted by all major platforms.