In web development, OG means Open Graph. It is a metadata protocol that describes a web page when its URL is shared. You add Open Graph tags as <meta> elements in the document’s <head>; social networks and messaging services can then use those values to build a rich link preview with a title, image and description.
What Open Graph does
The Open Graph protocol lets a web page become a rich object in a social graph. Instead of treating a shared URL as an unlabelled link, a platform can read metadata supplied by the page and show a preview card.
A typical card contains the page title, a representative image and supporting text. The exact appearance depends on the service fetching the URL, but the source of those values is usually the HTML metadata in the page head. Open Graph is therefore a description layer for link sharing, not a replacement for the visible content on the page.
The four required Open Graph properties
The protocol defines four properties that every page should provide. Use the property attribute, not a visible element, and put the value in content.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
| Property | What it identifies | Example |
|---|---|---|
og:title |
The title shown for the shared object. | Example page title |
og:type |
The kind of object, such as a website. | website |
og:url |
The canonical, permanent URL used as the object’s graph ID. | https://example.com/page |
og:image |
The URL of the representative image used in the preview. | https://example.com/share-image.jpg |
og:url deserves special care. It should be an absolute canonical URL for the page, not a relative path, a tracking URL or a temporary address. If several addresses display the same content, use the one you want treated as the object’s permanent identity.
A minimal, valid head
<head>
<meta charset="utf-8">
<title>Example page title</title>
<meta property="og:title" content="Example 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/share-image.jpg">
</head>The tags must be present in the HTML delivered for the URL. Adding them only after a client-side application runs can prevent a crawler that reads the initial document from seeing them.
Useful optional properties
Optional fields give a sharing service more context. Add only values that accurately describe the page.
| Property | Purpose |
|---|---|
og:description |
A short description for the preview. |
og:site_name |
The broader name of the site or publication. |
og:locale |
The page’s locale. |
og:locale:alternate |
Other locales available for the object. |
og:audio |
An associated audio resource. |
og:video |
An associated video resource. |
Open Graph also defines structured image properties. Place them after the corresponding og:image declaration:
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated 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 matchRank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<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 diagram showing the product workflow">og:image:alt is an accessibility-oriented description of what is in the image; it is not a caption. Keep it meaningful and consistent with the actual artwork.
How to add OG tags to a real page
- Choose the canonical URL. Decide which absolute URL represents the page and use that exact value for
og:url. - Write the share title. Set
og:titleto a clear title for the object. It can match the visible page title, but it should not misrepresent the destination. - Classify the page. Set
og:type, commonlywebsitefor a general page. - Create a representative image. Host the image at a public absolute URL and reference it with
og:image. Add the structured image fields when the type, dimensions or secure URL are useful. - Add context. Use
og:descriptionand, where relevant,og:site_nameand locale fields. - Place everything in the document head. A server-rendered template, static HTML file or framework head component should emit the tags in the initial response.
- Fetch the public URL and inspect its HTML. Confirm that the four required properties are present, values are not empty, and every URL is absolute and reachable.
Complete example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Open Graph guide | Example site</title>
<meta name="description" content="A practical guide to Open Graph metadata.">
<meta property="og:title" content="Open Graph guide | Example site">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/guides/open-graph">
<meta property="og:image" content="https://example.com/images/open-graph-guide.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/open-graph-guide.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="An illustrated Open Graph metadata guide">
<meta property="og:description" content="A practical guide to Open Graph metadata.">
<meta property="og:site_name" content="Example site">
<meta property="og:locale" content="en_US">
</head>
<body>
...
</body>
</html>The image dimensions in this example are illustrative metadata values; use the actual dimensions of your file rather than copying them blindly.
What an “Open Graph image” is
An Open Graph image is simply the resource named by og:image. It is the visual representative a sharing service may place in its link card. It is not automatically generated by HTML, and it is not necessarily the first image visible in the article.
- Use an absolute URL that the fetching service can reach.
- Make the image relevant to the page represented by
og:titleandog:url. - Provide
og:image:altas a concise description of the visual content. - Keep the declared MIME type and dimensions consistent with the actual file.
- Use HTTPS URLs when available;
og:image:secure_urlcan explicitly provide the secure version.
Why a link preview can show the wrong title or image
A wrong preview usually means the consumer did not receive the value you expected, or it selected a different value while rendering the card. Work through these checks in order.
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 →Rank #3
1. Inspect the initial HTML
View the server response, not only the DOM after JavaScript runs. Search for og:title, og:type, og:url and og:image. Check for duplicate tags with conflicting values and for templates that leave placeholders or empty attributes.
2. Verify the canonical identity
Make sure og:url is the intended canonical URL and matches the page being shared. A mismatch can make the platform treat the link as a different object.
3. Test the image URL independently
Confirm that the image address is absolute, publicly reachable and returns an image. Check that redirects, access controls or a wrong content type are not preventing retrieval. Compare the declared width, height and MIME type with the file.
4. Check every text field
Ensure the title and description are the values you intend to publish, and that locale or site-name fields are not inherited from another page template.
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
5. Account for platform-specific rendering
Open Graph consumers support the property attribute, but each social or messaging service decides how to render the fetched metadata. A service may shorten text, change the card layout or omit optional fields. Validate the actual destination platform rather than assuming every card will look identical.
Common implementation mistakes
| Symptom | Likely cause | Fix |
|---|---|---|
| No rich preview | One or more required properties are missing, malformed or absent from the initial HTML. | Emit all four required tags in the document head and inspect the raw response. |
| Wrong page identity | og:url points to a non-canonical, relative or tracking URL. |
Replace it with the page’s absolute canonical URL. |
| Wrong image | og:image is incorrect, inaccessible or conflicts with another declaration. |
Use one accurate absolute image URL, remove conflicting values and verify the response. |
| Image details are ignored | Structured fields do not describe the actual file. | Correct the secure URL, MIME type, dimensions and alternative description. |
| Description or site name is unexpected | Optional tags contain stale template values or are missing on some routes. | Generate them from the current page’s data in the server-rendered head. |
| Card differs between services | Consumers apply their own rendering rules. | Keep the metadata correct, then check the specific service’s presentation. |
How to verify a page without guessing
- Request the exact public URL that readers will share.
- Save or inspect the returned HTML source.
- Confirm the four required properties and their content values.
- Open the
og:imageURL directly and verify that it returns the intended image. - Compare optional description, site name, locale and structured image values with the page.
- Share the URL on the target service and compare its card with the metadata you inspected.
This separates an authoring error (the wrong tags were sent) from a rendering difference (the consumer chose a different card layout).
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you only need a visual capture of the deployed page after adding its OG tags, ScreenshotNeo returns a PNG, JPEG, WebP or PDF from one GET request. It captures the page itself; it does not replace checking the raw metadata or guarantee that a social platform will render an identical card.
For API parameters and response details, see the ScreenshotNeo documentation. This cURL example captures the page used in the HTML example:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorscurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/open-graph -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/guides/open-graph"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/open-graph' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo can wait for a selector, a delay or network idle; load lazy images for full-page captures; set a device preset, viewport or retina scale; apply custom CSS or JavaScript; hide selectors; and supply headers, cookies, a user agent, authorization, timezone or geolocation. It also supports element captures, dark mode, blocking selected requests or resource types, transparent backgrounds, resizing, chosen cache TTLs, signed links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, usage reporting and an OpenAPI specification. The parameter names used by other screenshot APIs also work, which can simplify migration.
Before capture, it can accept a cookie or consent banner and remove more than 60 known consent platforms, newsletter popups and chat widgets, with each step switchable. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed; the response identifies the page verdict and billing status with X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; Growth is $15 for 15,000, Pro is $39 for 60,000, Scale is $99 for 250,000 and Business is $249 for 1,000,000. Yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to start without a card.
Bottom line
OG means Open Graph: a set of HTML metadata properties that tells link-sharing systems what a page is, which title and image represent it, and which URL is canonical. Start with og:title, og:type, og:image and og:url in the document head, then add optional description, locale, site-name and image details where they improve the preview.
Recommended Free Tools
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.
