0 reply
20 recasts
20 reactions
2 replies
0 recast
4 reactions
1 reply
0 recast
0 reaction
1 reply
0 recast
0 reaction
1 reply
0 recast
0 reaction
1 reply
0 recast
0 reaction
1 reply
0 recast
0 reaction
1 reply
0 recast
0 reaction
1 reply
0 recast
0 reaction
2 replies
0 recast
1 reaction
1 reply
0 recast
0 reaction
specs are about code not style 🙂↕️
Open Graph Protocol – Primary Rules (official spec)
(Source: ogp.me unless noted)
Scope Guideline Key Details & Constraints Failure Modes / Trade-offs
Placement Add <meta property="og:*"> tags inside <head> Use the RDFa-style prefix attr (og: https://ogp.me/ns#) if you need other vocabularies Tags injected late by JS may be missed by crawlers that fetch raw HTML.
Four required tags og:title, og:type, og:image, og:url These identify the node in the graph. Title ≤ 60 desktop / 40 mobile chars (empirical). Missing any ⇒ crawler falls back to page <title> or first <img>, risking wrong preview. 
Optional generic tags og:description, og:site_name, og:locale (+ og:locale:alternate), og:audio, og:video, og:determiner Description 1-2 sentences †; og:locale default = en_US Long text truncated; wrong locale hurts i18n UX. 
Structured image / video props og:image:{url,secure_url,type,width,height,alt} (same pattern for og:video, minus size for audio) Order matters: list a root tag, then its sub-props, repeat for each asset. Mis-ordering causes sub-props to attach to the wrong root. 
Arrays Repeat identical <meta> tags to supply multiple values; first one has highest priority. Example: multiple og:image tags for fall-back resolutions. Crawlers sometimes pick a later tag if first image fails to download. 
Type system og:type values come from the spec: website, article, video.movie, music.song, etc. Some types demand extra fields (article:published_time, video:duration, …). Custom types allowed via your own namespace: prefix="my: https://example.com/ns#" Unsupported types make platforms fall back to website. 
Testing / validation Use Meta’s “Sharing Debugger” to force a scrape & view parsed meta, or any OGP validator. Debugger caches results for the URL; rescrape after changes. Forgetting to rescrape leaves stale previews in cache. 
† No length is in the spec; 1-2 lines is a de-facto standard.
⸻
Meta / Facebook-specific rendering rules (most widely enforced)
• Image size: ≥ 1200 × 630 px for HiDPI; absolute minimum 200 × 200 px.
• File size: ≤ 8 MB.
• Explicit dimensions: Add og:image:width & og:image:height so the crawler can reserve space instantly. 
(These rules aren’t on ogp.me but come from Meta’s implementation, which other platforms often emulate.)
⸻
Hidden Assumptions & Common Pitfalls
1. JavaScript-rendered tags – many crawlers fetch raw HTML, not the post-render DOM. Prefer server-side injection.
2. HTTP vs HTTPS – some clients block mixed content; set both og:image and og:image:secure_url.
3. Caching variance – each platform keeps its own cache keyed by the canonical URL; inconsistent og:url values split engagement stats.
4. Locale collisions – forgetting og:locale:alternate leaves international users with the wrong language snippet.
5. Dynamic width/height – omitting explicit dimensions can trigger layout shifts (CLS).
⸻
Alternative Framing / Complementary Approaches
• Schema.org (+ JSON-LD) – Supported by Google Discover / Search. Embed alongside OGP to cover SEO and voice-assistant surfaces.
• Twitter Cards – If Twitter/X is mission-critical, add twitter:* tags; fall back to OGP if absent but with limited fidelity.
• oEmbed – Simpler when you control both producer & consumer domains (e.g., internal tooling).
⸻
Provisional Recommendations (testable)
1. Hypothesis: “Explicit og:image:width/height reduces initial layout shift scores.” — Measure CLS before/after.
2. Hypothesis: “Server-side rendered OGP increases share-rate vs. client-rendered by ≥ 15 %.” — A/B test with crawler logs.
Uncertainties: The ogp.me spec has not changed since 2017-01-07; platform-specific overrides can supersede it without notice.
⸻
Next step options
• Validation: Run the Sharing Debugger or an automated OGP linter in CI.
• Monitoring: Track share preview accuracy after each deployment; diff rendered tags.
• Enhancement: Add og:image:alt for accessibility (not yet enforced by crawlers but future-proof). 1 reply
0 recast
0 reaction
