Add Open Graph metadata as <meta> elements inside the page’s <head>. The baseline is four properties: og:title, og:type, og:image and og:url. Add a useful description and image alt text, then check the published page with a parser or debugger. Tags describe the page for sharing; they do not guarantee that every platform will display the same preview.
1. Add the tags to the document head
Open the static HTML file and put the Open Graph properties inside its existing <head> element. Replace the example title, URLs and descriptions with details for the page being shared.
As an Amazon Associate I earn from qualifying purchases.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page title</title>
<meta property="og:title" content="Page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:image" content="https://example.com/images/page-preview.jpg">
<meta property="og:description" content="A concise description of this page.">
<meta property="og:image:alt" content="Description of what the preview image shows">
</head>
<body>
...
</body>
</html>The Open Graph protocol specifies the four baseline properties for every page.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →2. Set the four required properties accurately
| Property | What to put in it |
|---|---|
og:title |
The title you want associated with the shared page. |
og:type |
The object type. website is a global type and is a suitable general choice for a static page. |
og:image |
The URL of an image representative of the page. |
og:url |
The intended canonical URL of the page, which serves as its permanent identity in the graph. Avoid a temporary preview or tracking URL. |
Use the canonical URL you intend readers and services to associate with the page, including the preferred hostname and path format. Do not substitute a staging URL simply because it was convenient during development.
3. Add useful optional metadata
Description
og:description gives a concise summary of the page. Write it to describe the page itself rather than repeat the title.
Image alt text
og:image:alt describes what the image shows; it is not a caption. Add it when you can accurately describe the image.
Other optional image and page properties
The protocol also documents optional og:locale and og:site_name properties. For images, optional structured properties include MIME type, width, height and a secure URL. Include these only when the values are correct and useful; do not guess dimensions or file type.
Recommended Free Tools
4. Choose and order images
A page may provide more than one og:image. When values conflict, the first image takes preference, so put the image you prefer first. Put structured image properties after the root og:image tag to which they apply.
Use a publicly intended image URL that represents the page. The protocol defines the metadata format, but it does not establish current image-size limits, fetch requirements or access rules for individual platforms. Check the requirements of the particular service where the preview matters.
5. Validate the published page
- Save the HTML and publish it to the intended URL.
- Open the live page and confirm that its metadata is in the document head and that each URL and content value is correct.
- Run the published URL through an appropriate parser or debugger. The Open Graph protocol identifies Facebook Object Debugger as Facebook’s official parser and debugger.
- Review what the parser reads, correct errors in the deployed page, and validate again.
A successful parse confirms what that parser can read; it does not prove that every social service uses the same crawler behavior or displays the same preview. Platform-specific fetching, cache refresh behavior and access rules can change. The protocol does not specify a universal refresh mechanism, so do not assume that refreshing one debugger refreshes every consumer.
Rank #4
6. Troubleshoot common problems
- Tags are not detected: Confirm they are in the page’s
<head>, not just in a template or a local file that was never deployed. Validate the public URL rather than a local preview. - The wrong page identity appears: Check
og:urlfor the intended canonical URL, not a staging, temporary or tracking address. - The wrong image is selected: Check the sequence of repeated
og:imagetags. The first value takes precedence in a conflict; move the preferred image first and put its structured properties directly after it. - A preview differs between services: The protocol specifies metadata, not identical crawler behavior. Check the relevant platform’s current requirements and inspect the page with that platform’s appropriate parser where available.
- A debugger shows old information: The protocol source does not establish cache-refresh procedures. Use the relevant platform’s current documentation or debugging workflow rather than assuming another service’s refresh action applies.
Or skip the browser setup
To capture the rendered page yourself, a ScreenshotNeo one-call request returns a screenshot or PDF:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page/ -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each of those steps can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use screenshot tools. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Visit ScreenshotNeo for the service details, or sign up free for 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.FAQ
Does Open Graph replace the HTML title?
No. The example includes both the document’s <title> and the separate og:title property.
Best Value
Can every page use og:type value website?
website is a global type and a general option for a page without more specific markup; choose a more specific type when it accurately describes the object.
Quick Recap
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.
