Add Open Graph tags to the published web page that an email links to—not to the email’s HTML. Social platforms fetch that page’s URL to build a preview; email clients are a separate environment.
Put the tags in the destination page’s head
Open Graph metadata belongs in the <head> of the public landing page. The protocol specifies four required properties: og:title, og:type, og:image and og:url. For a conventional landing page, use website as the type. og:description is optional but generally recommended. See the Open Graph protocol.
As an Amazon Associate I earn from qualifying purchases.
Example HTML
Replace the sample title and URLs with the page’s actual information. The image URL and page URL should be publicly reachable.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problems<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spring offer</title>
<meta property="og:title" content="Spring offer">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring-offer/">
<meta property="og:image" content="https://example.com/images/spring-offer-share.jpg">
<meta property="og:description" content="Explore the spring offer and see what's included.">
</head>
<body>
<!-- Landing-page content -->
</body>
</html>Optional metadata and image details
The protocol also documents og:site_name and og:locale. For an image, structured properties can specify og:image:width, og:image:height, og:image:type and og:image:alt; the protocol says an image should have alt text. Add them when you can supply accurate values.
#1 Best Overall
Keep the document head valid and avoid duplicate tags
Place the metadata inside a valid <head>. Google identifies the head as the primary location for page metadata and warns that an invalid element there can cause it to ignore subsequent elements. Its documented valid-element list includes title, meta, link, script, style, base, noscript and template. See Google Search Central’s metadata guidance.
The Open Graph protocol permits repeated meta elements for a property and says the first value in document order wins in conflicts. Check whether both a page template and a plugin are inserting the same properties; remove unintended duplicates so the preview uses the value you expect.
Set tags in a landing-page builder
In Unbounce’s Classic Builder, the documented route is Page Properties → Open Graph Meta Data. Choose the content type, enter the title and description, provide the image URL and page URL, then save and republish. Unbounce also describes adding metadata in the page head. These are Unbounce-specific instructions; builder interfaces can change. See Unbounce’s guide.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Unbounce recommends an image at least 600 × 315 pixels and suggests 1200 × 630 pixels for display across many social networks on high-resolution devices. These are vendor recommendations, not Open Graph protocol requirements. Check the target platform’s current image guidance when exact rendering matters.
Publish and check the social preview
- Publish or republish the landing page after changing its metadata.
- Open the public URL in the relevant platform’s preview or debugging tool. Confirm the title, description and image correspond to the tags you set.
- Refresh the platform’s scrape if the preview is stale. A URL shared earlier may still show cached metadata. Unbounce’s guide recommends requesting a new scrape through Facebook’s debugging tool and mentions LinkedIn and X/Twitter refresh tools; the available tools and cache behavior can change by platform.
Keep email markup separate from social metadata
If “HTML email landing page” means the destination page linked in a message, add Open Graph tags to that page. If it means the email body itself, Open Graph tags are not a substitute for email-specific markup or message headers. Open Email Standards describes social metadata such as Open Graph as irrelevant to email clients; treat that as the project’s guidance rather than a universal statement about every client. See Open Email Standards.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
You can check how the published landing page renders with one ScreenshotNeo API request. The returned screenshot can help you inspect the page itself; it does not replace checking a social platform’s own preview or refresh tool.
Quick Recap
ScreenshotNeo API documentation
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/spring-offer/ -o shot.webpScreenshotNeo removes cookie banners, newsletter popups and chat widgets before capture, and bot checks, blank pages and failed loads are not billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
