Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Open Graph (OG) tags are HTML metadata that describe a page when it is shared or discovered through social systems. Add the four basic properties—og:title, og:type, og:image, and og:url—inside the document’s <head>. Use absolute URLs, choose an image that represents the page, and keep each image’s optional metadata grouped after its og:image tag.
What OG tags do
Open Graph (OG) tags give a page a structured description that social sharing and discovery systems can use to represent it. The Open Graph Protocol describes its purpose this way: “The Open Graph protocol enables any web page to become a rich object in a social graph.” The protocol’s reference uses HTML <meta> elements, with a property naming each OG field and a content attribute holding its value. Read the Open Graph Protocol reference. Web.dev also discusses metadata in the context of social discovery: Social discovery.
OG metadata does not replace the page’s visible title, content, or canonicalization choices. It supplies a machine-readable description of the page as a shareable object. Correct markup helps a system identify the title, kind of object, image, and URL you intend it to use; it does not guarantee that every platform will display an identical preview.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →The four basic Open Graph properties
The protocol identifies four basic properties as required. Include all four in the page head:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Property | What it describes | Example value |
|---|---|---|
og:title |
The title to display for the object. | Example page |
og:type |
The kind of object, such as a website. |
website |
og:image |
The image representing the object. | https://example.com/share-image.jpg |
og:url |
The object’s canonical URL and permanent graph identifier. | https://example.com/page |
These fields answer different questions. The title is the human-readable label; the type identifies the object category; the image provides its visual representation; and the URL identifies the object. Use values that describe the specific page, not just the site in general. For example, an article should normally have its own page URL and a title and image relevant to that article.
Minimal valid HTML example
Place the metadata inside <head>, before </head>. The following follows the protocol’s basic pattern:
<!doctype html>
<html prefix="og: https://ogp.me/ns#">
<head>
<title>Example page</title>
<meta property="og:title" content="Example page">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/share-image.jpg">
</head>
<body>
<h1>Example page</h1>
</body>
</html>The prefix in the example declares the OG namespace used by the protocol example. Keep the page’s ordinary <title> as well: it is a separate HTML element, whereas og:title is metadata for the Open Graph object. The values shown are illustrative; replace the example domain and text with the real page’s public URL and content.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Add image details and alt text
The protocol documents optional image properties for a more detailed image description: og:image:secure_url for an HTTPS alternative, og:image:type for the MIME type, og:image:width, og:image:height, and og:image:alt. When you use these, put them after the corresponding og:image root property:
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:image:secure_url" content="https://example.com/share-image.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A description of the image contents">Write og:image:alt to describe what the image contains, rather than to repeat a promotional caption. The protocol says to specify image alt text when you specify og:image. The sample dimensions above illustrate how the width and height fields are written; they are not a universal recommended size. The protocol material cited here does not establish one image size for every social platform, so check the current official requirements of the platform where the preview will appear.
Multiple images and property order
A property may appear more than once when it has multiple values. For example, a page can provide more than one og:image. When values conflict, the first occurrence in document order takes preference. This makes order meaningful: put the image you most want selected first.
Structured properties describe the immediately preceding root property. Keep each image’s structured fields together after its og:image element, and begin the next image group with another root property:
<meta property="og:image" content="https://example.com/primary.jpg">
<meta property="og:image:alt" content="The primary image contents">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/alternate.jpg">
<meta property="og:image:alt" content="The alternate image contents">Do not put the alternate image’s structured fields before its root property or interleave them with the primary image’s group. The protocol’s ordering rule lets a parser associate each set of details with the intended root.
How to add OG tags to a page
- Choose the page identity. Decide what title, object type, and canonical page URL describe this particular page. Use a stable, absolute URL for
og:url. - Select the representative image. Choose an image URL that the intended audience can access. If you have multiple candidate images, list the preferred one first.
- Add the tags to the HTML head. Put the four basic properties in the page’s rendered HTML head. Add image structured properties directly after their
og:imageroot. - Check the delivered page. Inspect the HTML returned for the public URL, not just a template or source file. Verify that the values are present in the head and that URLs and spelling are correct.
- Check the resulting preview with the destination platform. Preview behavior and image requirements are platform-specific; use that platform’s current documentation and debugging tools where available.
For a server-rendered site, edit the template that generates the head for the relevant page type. For a client-rendered site, make sure the final HTML that the sharing system can retrieve contains the metadata; a tag inserted only after client-side code runs may not be visible to every crawler. This is a practical implementation consideration, not a guarantee about any particular platform’s crawler.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Why an og:image may not appear
If a preview omits the intended image, check the markup and delivery in a predictable order:
- The tag is absent from delivered HTML. Inspect the public page’s HTML response and confirm that
og:imageis in the head. A source template can look correct while the generated page differs. - The image URL is wrong or inaccessible. Check for typos, an incorrect path, or access restrictions. The URL should identify the actual image resource rather than a page that displays it.
- The wrong repeated value is first. When a property is repeated, the first occurrence takes preference in conflicts. Move the desired image earlier and keep its structured fields immediately after it.
- The image metadata is mismatched. Check that any supplied type, dimensions, and alt text correspond to that image. Alt text should describe image contents.
- The platform has its own image rules. The protocol reference does not establish universal dimensions or a complete current compatibility matrix. Check the destination platform’s current official guidance instead of assuming one size works everywhere.
- You need to refresh the platform’s interpretation. The protocol reference names Facebook’s Object Debugger as its official parser and debugger, but the material available here does not establish its current availability or workflow. Verify the current tool and instructions before relying on it.
A browser screenshot can help you inspect what a page visibly renders, but it does not prove that a social crawler received or parsed the OG tags. For metadata verification, inspect the delivered HTML and use the destination platform’s current debugging facilities when available.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallInspect the rendered page with ScreenshotNeo
If you also need a visual record of the page, ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a page as an image or PDF; use it to inspect the rendered page, not as a substitute for checking metadata in the HTML. Learn about ScreenshotNeo.
Best Value
Or skip the browser setup
One GET request can capture a page. This cURL example saves a WebP screenshot of the example page. Replace the URL and supply your API key:
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 like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses include X-Page-Verdict and X-Billed headers. Its MCP server gives AI agents tools named take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month—no card required.
FAQ
Are OG tags the same as a page’s HTML title?
No. The page title is an HTML <title> element; og:title is a separate metadata property intended to describe the Open Graph object. They may use the same words, but one does not replace the other.
Does a screenshot confirm that OG metadata is correct?
No. A screenshot shows rendered pixels, not whether a sharing system received or interpreted the head metadata. Check the delivered HTML and, where possible, the destination platform’s current parser or debugger.
Does the protocol specify a single required image size?
The cited protocol reference documents image URL and optional type, width, height, and alt properties, but it does not establish a universal recommended dimension. Check the current official guidance for the specific platform.
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.
