Open Graph Tags for Service Page Shares

A consultant pastes your Services URL into Slack. A client shares your About page in a Facebook group. Before anyone clicks, the platform shows a card: title, short description, and an image. If that card pulls a generic homepage crop, a truncated title with your brand name twice, or a blank square, the share has already argued against you.

The Open Graph protocol (documented at ogp.me) turns a page into a structured object for social graphs by adding RDFa-style meta tags in the document head. Meta’s sharing documentation for webmasters adds the delivery rules that decide whether that image appears large, cropped, or not at all on Facebook and related surfaces.

---

Why share previews belong in website planning

Service businesses win work through forwarded links as often as through organic search. The preview is not decoration; it is a compressed statement of what the page is for. Without explicit tags, Meta’s crawler falls back on heuristics to guess title, description, and image. Guessing is how a share of your HVAC landing page ends up with a stock photo from the footer or a title that starts mid-sentence.

Planning the tags per page type—Home, primary services, location pages, case studies—keeps messaging consistent with the on-page offer. Development then implements a small, repeatable head pattern instead of one-off fixes after a bad share goes viral for the wrong reasons.

---

The four required properties (and the useful optionals)

ogp.me states that every page needs four properties:

1. og:title — the title as it should appear in the graph (for example, the service name, not a slogan alone).
2. og:type — the object type (for a typical business site, often website; articles can use article).
3. og:image — a URL that represents the object in the graph.
4. og:url — the canonical URL used as the permanent ID in the graph.

Optional properties that usually matter for service pages include og:description (one to two sentences), og:site_name (the overall site name, such as your studio or firm name), and og:locale. For images, ogp.me defines structured companions: og:image:width, og:image:height, og:image:type, og:image:alt, and secure URL variants. The protocol notes that if a page specifies og:image, it should also specify og:image:alt.

Meta’s Guide to Sharing for Webmasters aligns with that core set and adds practical wording: og:url should be the undecorated canonical (no session parameters); og:title should omit branding such as the site name; og:description is typically two to four sentences under the title in the post. Absolute URLs are required so crawlers can attribute shares and cache images correctly.

A short analogy: Open Graph tags are the shipping label on a package—title, type, picture, and permanent address—so the carrier does not invent a label from whatever scrap of paper is visible through the tape.

Property	Planning question	Example direction
og:title	What should the card say you offer?	“Commercial roofing inspection in Mazatlán”
og:type	Is this a site root, article, or profile?	website for service pages
og:url	Which URL should collect likes and shares?	Canonical HTTPS service URL
og:image	What visual stands for this offer?	Dedicated 1200×630 brand-safe crop
og:description	What two sentences complete the pitch?	Outcome + who it is for

---

Image rules that decide whether the card looks finished

Meta’s documentation on images in link shares sets hard boundaries and soft targets:

• Minimum accepted dimension: 200×200 pixels.
• Maximum file size: 8 MB.
• Recommended for high-resolution displays: at least 1200×630 pixels.
• Minimum for larger link previews: 600×315 pixels.
• Images below 600×315 but above 200×200 still appear, but as a much smaller square treatment.
• Aim near a 1.91:1 aspect ratio so Feed can show the full image without heavy cropping on desktop and mobile.

Meta also advises declaring og:image:width and og:image:height so the crawler can reserve layout without waiting on an asynchronous download—similar in spirit to reserving image space on the page itself. Images are cached by URL; to update a preview, use a new image URL (or force a re-scrape). Leave old image files online for a while so existing shares do not render a blank area. The Sharing Debugger both inspects what the crawler sees and triggers a scrape, which is the operational way to pre-cache or refresh a service page after a copy or image change.

---

What goes wrong when tags are missing or stale

Common failure modes on service sites:

• One global image for every URL — the homepage hero appears when someone shares a niche service, so the card contradicts the destination.
• Relative image paths — crawlers need absolute https:// URLs; relative paths fail silently.
• Titles that duplicate the brand — Meta recommends titles without site-name branding; your og:site_name can carry the firm identity.
• Stale cache after a redesign — the live page looks new; the share still shows last year’s campaign until you change the image URL or scrape again.
• No description — heuristics may pull the first paragraph, navigation text, or nothing useful.

Open Graph is not a substitute for on-page clarity, structured data for search, or platform-specific cards (for example, Twitter/X markup when you care about that surface). Different consumers may prefer different images; ogp.me allows multiple og:image tags, with the first given preference when conflicts arise.

“A share card is a one-glance brief for your service page—if the title and image disagree with the offer, the click starts with doubt.”
— Windware Studio Practice Note

---

Practical takeaways for your next website

1. Decide preview copy per template: Home, each primary service, About, and Contact each get a planned og:title and og:description that match the page’s job—not a single site-wide string.
2. Produce a share-image set: create 1200×630 (or similar 1.91:1) assets with safe margins so faces and headlines survive mild cropping; keep files well under 8 MB.
3. Implement the four required tags plus description, site name, image dimensions, and og:image:alt in the shared layout, with per-page overrides.
4. Use absolute canonical URLs for og:url and og:image so likes and caches aggregate on the right resource.
5. Validate with the Sharing Debugger after launch and after any messaging change; if the image must update, change the image URL and scrape again rather than overwriting the same path in place and hoping.

The next step is editorial as much as technical: treat share previews as part of the content inventory alongside hero copy and form CTAs, so marketing and development ship the same story.

---

Ready to Discuss Your Website?

If you are planning a new website, a service redesign, or custom development for your business, we’re here to help shape the work.

• Explore Our Services: Web Design · Web Development · Website Redesign
• Start a Conversation: Tell us about your project via our Contact Form or email us directly at [email protected].