Recommended Free Tools
Open Graph (OG) in HTML is a metadata protocol for describing a web page as a rich object in a social graph. You add its properties as <meta> elements inside the document’s <head>. The four required properties are og:title, og:type, og:image, and og:url. Together, they identify the page, its kind, and the image and text a sharing service can use when representing it.
What Open Graph means in HTML
The Open Graph protocol enables any web page to become a rich object in a social graph. Instead of relying only on a page title or whatever text a crawler happens to find, a page can explicitly declare its title, type, representative image, and permanent address.
Open Graph was designed around a single implementation approach: put metadata in the HTML head using standard meta elements. The protocol documentation describes developer simplicity as a key goal that informed its technical decisions.
These tags describe a page for systems that build link cards or other rich representations. They do not change the visible content rendered for a person who visits the URL, and they are not a substitute for the page’s normal <title>, heading structure, or canonical-link element.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The four required Open Graph properties
| Property | Purpose | What to enter |
|---|---|---|
og:title |
The object’s title | The human-readable title you want associated with the page |
og:type |
The object’s type | A type such as website or video.movie |
og:image |
The object’s representative image | An absolute URL to the image that represents the page |
og:url |
The object’s permanent graph identifier | The page’s canonical URL |
All four belong in the document head. The values should describe the specific page being shared, not generic defaults copied from another template.
og:title
Use the title as it should appear in the graph representation. Keep it specific to the page and consistent with the visible page title so readers are not surprised when they open the link.
og:type
This identifies what kind of object the URL represents. The protocol documentation uses values including website and the more specific video.movie. Choose the type that matches the page rather than copying the movie example for every URL.
og:image
Supply the URL of the image that represents the object. Use a complete, publicly reachable URL, and make sure it points to the intended asset rather than a page that displays the asset.
og:url
This is the canonical address and permanent identifier of the object in the graph. It is not merely an arbitrary destination link. If query strings, tracking variants, or alternate paths represent the same page, select the one canonical address your site uses and place that value in og:url.
Minimal Open Graph markup
Place the following pattern in the page’s <head>, replacing every sample value with values for your own page:
<html prefix="og: https://ogp.me/ns#">
<head>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
</head>
</html>The values above are the protocol’s illustrative movie example. For a production page, use your own title, type, image URL, and canonical URL. The prefix declaration identifies the og vocabulary; retain it when following this form of the official example.
Optional properties that improve the description
The documentation identifies og:description, og:locale, og:audio, and other properties as optional and generally recommended. A description should be one or two sentences that accurately summarize the page. The documented default locale is en_US; declare another locale when your page’s primary language and regional convention differ.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches<meta property="og:description" content="A concise description of this page." />
<meta property="og:locale" content="en_US" />Optional fields are not replacements for the four required properties. Add them after the required declarations so the page remains understandable even when only the minimum is processed.
Multiple values and structured image data
A property that supports multiple values can be declared more than once. The first value in document order takes precedence if values conflict. Put your preferred value first.
<meta property="og:image" content="https://example.com/primary.jpg" />
<meta property="og:image" content="https://example.com/fallback.jpg" />Structured properties associated with an image follow that image’s root declaration. Place image width, height, or other image-specific metadata after the relevant og:image and before the next root property begins. This ordering lets a parser associate the structured values with the correct image.
A practical implementation workflow
- Choose the canonical URL. Decide which single address permanently identifies the page. Use that exact address for
og:url. - Write the graph title. Use a clear page-specific title for
og:title. - Select the object type. Set
og:typeto the documented type that best describes the page, such aswebsiteor a more specific supported type. - Choose a representative image. Put its absolute URL in
og:image. Verify that the URL serves the intended image rather than an HTML error page. - Add optional context. Include a short
og:descriptionand the appropriateog:localewhen useful. - Render and inspect the final HTML. Confirm the tags are in the server-rendered document head, not only injected after a client-side script runs.
- Check each page independently. Templates can accidentally reuse one title, image, or URL across every route. View the source for several representative pages.
Common mistakes and fixes
Putting tags in the body
Open Graph meta elements belong in the document head. Move them into <head> rather than placing them among visible page content.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Using a relative image URL
An image value should identify the asset unambiguously. Use an absolute URL, including the scheme and host, so a crawler does not have to infer a base path.
Pointing og:url at a tracking variant
The property is the object’s canonical graph identifier. Replace campaign or session variants with the canonical page address.
Leaving the movie sample unchanged
The sample values are illustrative. A copied video.movie type or unrelated image can describe your page incorrectly. Replace every value with page-specific data.
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
Duplicating conflicting values
Repeated declarations are valid for properties that support multiple values, but the first value wins when there is a conflict. Put the intended primary value first and remove accidental duplicates.
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 reinstallExpecting identical previews everywhere
The available protocol documentation explains the fields but does not establish current parsing, cache-refresh, or image-selection behavior for every social service. Treat a preview as the consumer’s interpretation of your metadata, not a guarantee that every service will display the same card.
Validation and troubleshooting
The preview has the wrong title
- Inspect the delivered HTML source and verify the exact
og:titlevalue. - Check for duplicate declarations; the first supported value may take precedence.
- Make sure a page template is not emitting a site-wide title before the page-specific one.
The image is missing
- Confirm
og:imageis in<head>and contains an absolute URL. - Open the image URL directly and verify it returns the intended image.
- Check that the page does not emit an earlier, unintended
og:image.
The wrong page is associated with the card
- Compare
og:urlwith the canonical address you intend to publish. - Remove temporary query parameters and session identifiers from the graph identifier.
Changes do not appear immediately
The protocol documentation available here does not define current cache lifetimes or refresh controls for individual platforms. Recheck the final HTML first; then use the destination service’s own official debugging or refresh facility when one is provided.
Testing pages without a local browser setup
If you need repeatable screenshots of a page while checking its rendered result, ScreenshotNeo provides a website screenshot API and MCP server. It accepts a URL and returns a PNG, JPEG, WebP, or PDF. Before capture it can accept consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; those cleanup steps can be disabled individually. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and each response identifies the page verdict and billing state in X-Page-Verdict and X-Billed headers.
Or skip the browser setup
Use one GET request to capture a rendered page while you iterate on its Open Graph markup:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the complete parameter reference in the ScreenshotNeo documentation. The API also supports full-page captures with lazy images loaded, CSS-selector element captures, device presets and custom viewports, dark mode, retina scale, PDF options, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work, which can simplify migration.
ScreenshotNeo includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Open Graph checklist
- Four required properties are present:
og:title,og:type,og:image, andog:url. - Every declaration is inside the document head.
og:urlis the canonical page address.- The image URL is absolute and points to the intended asset.
- Optional description and locale values match the page.
- Repeated properties are intentional, with the preferred value first.
- You have inspected the final server-delivered HTML for more than one route.
Frequently Asked Questions
Are Open Graph tags the same as SEO meta tags?
They are a separate metadata vocabulary for describing a page as a rich object in a social graph. They complement, rather than replace, ordinary title, description, canonical, and search-focused markup.
Can I put Open Graph tags in JavaScript?
The protocol requires meta elements in the HTML head. If a crawler receives an incomplete server-rendered head and depends on client-side execution, the tags may not be available when it reads the page.
Which Open Graph type should a normal homepage use?
The documentation includes website as an example type. Select the type that accurately represents your particular page instead of applying a more specific type without justification.
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.
