A continuation of Janady13/crawler-signal-reference / framework-html-open-graph.md. The complete source identity, every recorded occurrence, and linked equations are on its first page.
Source transcript · continued
Download complete source text ↓1,830 lines · 77.8 KB
<meta property="og:type" content="website" />
<meta property="og:image" content="https://heritagehardwoodfloorsnwa.com/og-image.jpg" />
<meta property="og:url" content="https://heritagehardwoodfloorsnwa.com/" />
<meta property="og:description" content="Bella Vista hardwood floor refinishing." />
<meta property="og:site_name" content="Heritage Hardwood Floors NWA" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Heritage Hardwood Floors NWA installation in Bella Vista" />
<meta name="twitter:card" content="summary_large_image" />
</svelte:head>
```
### 20.4 Astro
```astro
---
// src/pages/index.astro
const og = {
title: 'Heritage Hardwood Floors NWA | Bella Vista AR',
description: 'Bella Vista hardwood floor refinishing.',
url: 'https://heritagehardwoodfloorsnwa.com/',
image: 'https://heritagehardwoodfloorsnwa.com/og-image.jpg',
};
---
<head>
<title>{og.title}</title>
<meta name="description" content={og.description} />
<link rel="canonical" href={og.url} />
<meta property="og:title" content={og.title} />
<meta property="og:type" content="website" />
<meta property="og:image" content={og.image} />
<meta property="og:url" content={og.url} />
<meta property="og:description" content={og.description} />
<meta property="og:site_name" content="Heritage Hardwood Floors NWA" />
<meta property="og:locale" content="en_US" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Heritage Hardwood Floors NWA installation in Bella Vista" />
</head>
```
### 20.5 The Nginx Sub Filter Injection (Bulk Backfill)
For backfilling Open Graph across a large number of existing static HTML pages on Bubbles, the FastAPI sidecar on port 9090 with nginx SSI is the right approach (per UNIVERSAL-RANKING-FRAMEWORK.md). Inline injection via `sub_filter` is possible for a single tag, but for the full OG block, FastAPI SSI is cleaner.
For the AdSense pattern already in use on demo and wildcard subdomains, the same nginx sub_filter approach can inject a default og:image:
```nginx
sub_filter '</head>' '<meta property="og:image" content="https://example.com/og-image.jpg"></head>';
sub_filter_once on;
sub_filter_types text/html;
```
End every nginx change with:
```bash
nginx -t && systemctl reload nginx
```
---
## 21. THE PRE LAUNCH AUDIT CHECKLIST
Before a Bubbles client site goes live, verify Open Graph completeness.
### 21.1 The Checklist
* [ ] `og:title` present on every page.
* [ ] `og:type` present on every page (website or article).
* [ ] `og:image` present on every page (1200x630, JPG or PNG, ≤300 KB target).
* [ ] `og:url` present on every page (matching `<link rel="canonical">`).
* [ ] `og:description` present on every page (110 to 200 characters).
* [ ] `og:site_name` present on every page (consistent across the site).
* [ ] `og:locale` present on every page (`en_US` for English clients).
* [ ] `og:image:width` and `og:image:height` declared (`1200` and `630`).
* [ ] `og:image:type` declared (`image/jpeg` or `image/png`).
* [ ] `og:image:alt` declared with descriptive accessibility text.
* [ ] On blog posts: `article:published_time`, `article:author`, `article:section`, `article:tag` declared.
* [ ] `<meta name="twitter:card" content="summary_large_image">` declared.
* [ ] og:url matches `<link rel="canonical">` exactly.
* [ ] og:image is HTTPS, absolute URL, ≥1200x630, ≤8 MB (≤300 KB target).
* [ ] curl on the page returns og:* tags in HTML response (not JS injected).
* [ ] Facebook Sharing Debugger scrape returns clean preview with no warnings.
* [ ] LinkedIn Post Inspector returns clean preview.
* [ ] Slack DM unfurl confirmed visually.
* [ ] Discord DM unfurl confirmed visually (if relevant client channel).
* [ ] iMessage preview confirmed (paste link in self DM).
* [ ] No `name="og:..."` mistakes anywhere (always `property="og:..."`).
* [ ] No relative URLs in `og:image` or `og:url`.
* [ ] No `http://` URLs in `og:image` (always HTTPS).
* [ ] Locale uses underscore (`en_US`), not hyphen.
### 21.2 The Automated Audit
The thatdeveloperguy.com audit pipeline already checks for OG presence. The check should be extended to verify:
* OG presence (boolean).
* OG completeness (all 4 required + 3 recommended + image sub properties).
* og:url matches canonical (boolean).
* og:image dimensions ≥ 1200x630 (HEAD request to image URL + image size check).
* og:image file size ≤ 8 MB.
For sites with 100+ pages, automated auditing is the only viable approach.
---
## 22. THE COMMON FAILURES AND FIXES
### 22.1 "Facebook is showing the wrong image"
Cause 1: Facebook cached an old version of the page before og:image was added.
Fix: Run the Facebook Sharing Debugger and click "Scrape Again".
Cause 2: Another image on the page is larger than og:image and Facebook picked it instead.
Fix: Make og:image the largest image on the page, or hide the competing image from crawlers.
Cause 3: og:image URL is relative or HTTP.
Fix: Use absolute HTTPS URL.
### 22.2 "LinkedIn preview shows no description"
Cause 1: og:description is missing.
Fix: Add `<meta property="og:description" content="...">`.
Cause 2: LinkedIn cached the page before og:description was added.
Fix: Run the LinkedIn Post Inspector.
### 22.3 "iMessage shows just the URL with no preview"
Cause 1: og:image is missing, broken, or too small.
Fix: Verify og:image is present, HTTPS, 1200x630, accessible.
Cause 2: iMessage cached an old failed crawl.
Fix: Append `?v=2` to the URL when sharing to force a new crawl.
### 22.4 "The preview shows the wrong page on our site"
Cause: og:url is missing or points to a different page.
Fix: Ensure og:url on every page points to its own canonical URL.
### 22.5 "Open Graph works on Chrome devtools but not on Facebook"
Cause: og:* tags are injected by client side JavaScript.
Fix: Move OG tags to server side rendered HTML. Verify with `curl -s [url] | grep og:`.
### 22.6 "Some pages show preview, others don't"
Cause: Inconsistent OG implementation across page templates.
Fix: Audit every template type (home, service, location, blog, contact) and ensure OG is in each.
### 22.7 "Facebook share count is split across two values"
Cause: og:url and the actual shared URL differ (trailing slash, www vs non www, http vs https).
Fix: Align og:url with the canonical host and trailing slash policy.
### 22.8 "WhatsApp shows broken image"
Cause: og:image file is too large (over ~300 KB).
Fix: Compress the og:image. Target 100 to 250 KB.
### 22.9 "Article preview shows generic 'just now' instead of publish date"
Cause: `article:published_time` is missing or in wrong format.
Fix: Add ISO 8601 datetime with timezone offset (`2026-05-15T08:00:00-05:00`).
### 22.10 "Cloudflare proxy is breaking OG preview"
Not applicable to Bubbles (no Cloudflare or third party CDN in front). Per Joseph's standing rule, Bubbles is direct origin. This is mentioned only because the failure pattern is common in the broader industry.
---
## 23. THE FEDERAL AND SDVOSB APPEARANCE CONTEXT
For Joseph's SDVOSB federal subcontracting work, Open Graph carries professional appearance weight beyond the consumer marketing use case.
### 23.1 The Procurement Officer Use Case
Federal procurement officers and contracting officers regularly share vendor URLs on LinkedIn (internally and to peers) and in agency messaging systems. A vendor URL that produces a polished preview signals operational maturity. A vendor URL that produces a bare hyperlink or a broken preview signals an unfinished web presence.
### 23.2 The ThatDeveloperGuy SDVOSB OG Pattern
```html
<meta property="og:site_name" content="ThatDeveloperGuy | SDVOSB Certified">
<meta property="og:image" content="https://thatdeveloperguy.com/og-image-sdvosb.jpg">
<meta property="og:image:alt" content="ThatDeveloperGuy SDVOSB certified web development agency, Cassville Missouri">
```
The og:image for SDVOSB context should include:
* Agency name and logo.
* SDVOSB certification mark or text.
* Professional palette consistent with brand guidelines.
* No frivolous or playful imagery.
### 23.3 The SAM.gov Profile Consistency
The og:site_name and og:description should be consistent with the SAM.gov registered business name and description. Procurement officers cross reference.
### 23.4 The WeCoverUSA Federal Appearance Pattern
```html
<meta property="og:site_name" content="WeCoverUSA">
<meta property="og:image" content="https://wecoverusa.com/og-image.jpg">
<meta property="og:image:alt" content="WeCoverUSA F&I vertical solutions for franchised dealers nationwide">
```
The og:image should signal:
* National scope (not regional).
* Polished commercial brand.
* No personal photography.
* Logo and tagline visible.
### 23.5 The Documentation Note
For federal context client work, document the OG decision in the project notes alongside the SAM.gov and SDVOSB compliance notes. Procurement officers may screenshot LinkedIn previews as part of vendor diligence files.
---
## 24. QUICK REFERENCE TAG BLOCK
For copy paste into any Bubbles client page `<head>`:
### 24.1 Marketing Page (og:type=website)
```html
<!-- Open Graph -->
<meta property="og:title" content="PAGE TITLE">
<meta property="og:type" content="website">
<meta property="og:image" content="https://CLIENT.com/og-image.jpg">
<meta property="og:url" content="https://CLIENT.com/PAGE/">
<meta property="og:description" content="PAGE DESCRIPTION (110 to 200 chars).">
<meta property="og:site_name" content="CLIENT BUSINESS NAME">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="DESCRIPTIVE ALT TEXT FOR ACCESSIBILITY">
<!-- Twitter Cards (X uses og:* as fallback) -->
<meta name="twitter:card" content="summary_large_image">
```
### 24.2 Blog Post (og:type=article)
```html
<!-- Open Graph -->
<meta property="og:title" content="ARTICLE TITLE">
<meta property="og:type" content="article">
<meta property="og:image" content="https://CLIENT.com/blog/og-ARTICLE-SLUG.jpg">
<meta property="og:url" content="https://CLIENT.com/blog/ARTICLE-SLUG/">
<meta property="og:description" content="ARTICLE DESCRIPTION (110 to 200 chars).">
<meta property="og:site_name" content="CLIENT BUSINESS NAME">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:alt" content="DESCRIPTIVE ALT TEXT FOR ARTICLE OG IMAGE">
<!-- Article subtype -->
<meta property="article:published_time" content="2026-MM-DDTHH:MM:SS-05:00">
<meta property="article:modified_time" content="2026-MM-DDTHH:MM:SS-05:00">
<meta property="article:author" content="https://CLIENT.com/about/">
<meta property="article:section" content="EDITORIAL SECTION">
<meta property="article:tag" content="TAG ONE">
<meta property="article:tag" content="TAG TWO">
<meta property="article:tag" content="TAG THREE">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
```
### 24.3 Multi Language Page (Marshallese-Voices Pattern)
```html
<!-- On English page -->
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="mh_MH">
<!-- On Marshallese page -->
<meta property="og:locale" content="mh_MH">
<meta property="og:locale:alternate" content="en_US">
```
---
## 25. REFERENCES
* The Open Graph protocol specification: https://ogp.me
* The article subtype properties: https://ogp.me/#type_article
* The video subtype properties: https://ogp.me/#type_video
* The music subtype properties: https://ogp.me/#type_music
* The profile subtype properties: https://ogp.me/#type_profile
* The book subtype properties: https://ogp.me/#type_book
* Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
* Facebook Sharing Best Practices: https://developers.facebook.com/docs/sharing/best-practices/
* LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
* LinkedIn Making Content Shareable: https://www.linkedin.com/help/linkedin/answer/a521928
* Slack Unfurling Links in Messages: https://api.slack.com/reference/messaging/link-unfurling
* opengraph.xyz preview tool: https://www.opengraph.xyz/
* env.dev OG guide: https://env.dev/guides/opengraph
**Companion frameworks in the HTML signal track:**
* framework-html-meta-robots.md
* framework-html-meta-charset.md
* framework-html-meta-viewport.md
* framework-html-meta-description.md
* framework-html-meta-keywords.md
* framework-html-meta-author.md
* framework-html-meta-generator.md
* framework-html-meta-copyright.md
* framework-html-meta-theme-color.md
* framework-html-meta-color-scheme.md
* framework-html-meta-referrer.md
* framework-html-content-language.md
* framework-html-meta-refresh.md
* framework-html-twitter-cards.md (next)
**Parent reference:** UNIVERSAL-RANKING-FRAMEWORK.md (the 27 section master document).
---
*End of framework-html-open-graph.md.*