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 →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) properties are HTML metadata that describe a page when it is shared as a link. Add the core properties—og:title, og:type, og:image, and og:url—inside the document’s <head>. Sharing services that support those properties can use them to build a link preview, but no set of tags guarantees identical results on every platform.
Which Open Graph meta tags do I need?
The Open Graph Protocol documentation defines four basic properties for every page: og:title, og:type, og:image, and og:url. The metadata is represented by HTML meta elements with a property attribute and a content value, placed in the document head.
<!doctype html>
<html prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>A Guide to Example Topic</title>
<meta property="og:title" content="A Guide to Example Topic">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/example-topic">
<meta property="og:image" content="https://example.com/images/example-topic.jpg">
<meta property="og:description" content="A concise description of the guide.">
<meta property="og:site_name" content="Example Site">
</head>
<body>
<h1>A Guide to Example Topic</h1>
</body>
</html>Replace the example values with the page’s real title, canonical URL, and publicly accessible preview image. The article type is illustrative, not a universal requirement imposed by every sharing service. The protocol’s general examples include website, while its example of a movie page uses video.movie.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →What each core property means
og:title: The title of the page or object as it should appear in the graph. It can match the visible page title, but should be chosen with the intended preview in mind.og:type: The kind of object, such aswebsiteorvideo.movie. Some types may call for additional properties.og:image: The URL of an image representing the page. Use an absolute URL so a crawler can identify the resource without resolving a relative path.og:url: The canonical URL that serves as the object’s permanent ID in the graph. It should identify this page, not point arbitrarily to another page.
How do I add an Open Graph image?
Set og:image to the image URL you want a supported sharing service to consider for the preview. Put it in the page head alongside the core properties. The Open Graph specification also describes structured image properties that give consumers more information about the asset.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<meta property="og:image" content="https://example.com/images/article-preview.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/article-preview.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 notebook open beside a laptop on a desk">Use the correct MIME type, actual pixel dimensions, and an accurate description of what the image depicts. The protocol says an og:image should have an og:image:alt description. An HTTPS alternate can be supplied with og:image:secure_url when needed. The example dimensions above only illustrate the syntax; they are not a platform-specific size recommendation.
Multiple images and grouped properties
The protocol allows a property that can take multiple values to be repeated. For example, a page may offer more than one candidate image:
<meta property="og:image" content="https://example.com/images/preview-wide.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Wide illustration for the article">
<meta property="og:image" content="https://example.com/images/preview-square.jpg">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="800">
<meta property="og:image:alt" content="Square illustration for the article">Structured properties belong after the root property they describe. When values conflict, the protocol says the first value is preferred. A new root property starts a new group of structured properties, so keep each image’s metadata adjacent to its own og:image declaration. Consumers may differ in which values they use.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Which optional Open Graph properties are useful?
The protocol lists several additional properties as generally recommended. Select the ones that accurately describe the page rather than adding fields with empty or misleading values.
og:description: A short description of the object for a preview.og:site_name: The name of the broader site or publication.og:locale: The language and territory for the content, using a form such asen_US. The protocol documentsen_USas the default.og:locale:alternate: An alternate locale available for the page.og:audioandog:video: URLs for associated audio or video where appropriate.
For example, a page intended for US English readers could include <meta property="og:locale" content="en_US">. Locale values should match the actual language and territory of the page.
How is Open Graph different from Twitter Cards and Google metadata?
Open Graph, Twitter Cards, and Google-supported metadata are related but distinct systems. Open Graph uses properties such as og:title and og:image. Twitter Cards use their own twitter:-namespaced fields, including twitter:card. Google’s documentation covers the meta tags it supports for Search and indexing controls; OG tags alone do not control Google indexing or rankings.
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
Google Search Central explains that “Clients process the meta tags they support and ignore those they don’t.” In practice, use the metadata system appropriate to the destination and consult that service’s current official guidance for its rules. A tag being present in your HTML does not mean every crawler will use it.
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 errorsHow to validate Open Graph metadata
- Inspect the page HTML. View the response delivered for the page and confirm the intended
metaelements are present in the<head>. Google’s meta-tag guidance likewise describes metadata as belonging in the head. If you use a CMS, these values may be managed through its settings or SEO plugin rather than by editing a template directly. - Check the values. Make sure the title, type, image URL, and canonical object URL are correct for this page. Confirm
og:urlis the intended canonical URL and that the image metadata describes the asset you actually serve. - Use a destination-specific preview or debugger. The Open Graph project lists Facebook’s Object Debugger as its official parser and debugger; web.dev also points to that debugger. For another destination, use its current preview or debugging facility where available.
- Inspect the resulting preview. Compare what the destination shows with your source markup. If the preview does not match, verify the exact page URL and image resource that the crawler can retrieve, then re-check the destination’s current tool.
There is no verified support matrix here for every social network, messaging app, or crawler, and platform-specific image limits can change. Treat a debugger’s output as evidence about that destination and time, not as a promise about every service.
Best Value
Direct HTML or CMS-managed metadata?
Both approaches can work. Direct editing is useful when you own the page template or need precise control over generated markup. CMS-managed metadata is usually more maintainable for editors who publish pages without touching templates; a plugin can generate tags from fields in the publishing interface. Yoast documents Open Graph tag generation for its software, but the correct workflow depends on the CMS and configuration you use.
- Choose direct HTML when metadata is part of a hand-maintained template and you can check the rendered source.
- Choose CMS settings or a plugin when editors need a repeatable per-page workflow and the generated source can be verified.
- In either case, validate the output rather than assuming the editor’s saved values necessarily produce the intended tags.
Common Open Graph problems and fixes
- The tags do not appear in source: They may not be emitted by the CMS template, may be added only after client-side execution, or may be placed outside the head. Inspect the HTML response and correct the template or CMS configuration.
- The shared URL shows the wrong page identity: Check that
og:urlis the canonical URL for the object rather than a related page, tracking URL, or noncanonical variant. - The image is not the intended one: Confirm the
og:imageURL points to the desired image and that the metadata is grouped in the right order when there are multiple images. - A destination ignores a field: Consumers process only supported metadata. Check that platform’s current documentation and debugger; do not infer universal support from the tag’s presence.
- A preview differs between services: Different consumers can support different tags and rendering behavior. Validate each important destination separately rather than treating one preview as a universal result.
- A CMS-generated value is stale or duplicated: Review the generated source and the plugin or theme settings that produce it. Ensure one intended value is emitted for each property unless multiple values are deliberate.
Or skip the browser setup
If your task is to capture a page image while checking how a page renders, ScreenshotNeo is a website screenshot API and MCP server for developers. It does not replace Open Graph validation: use the destination platform’s own debugger to inspect the link preview. But it can return a clean page screenshot through one GET request, with cookie banners accepted and more than 60 known consent platforms, newsletter popups, and chat widgets removed before capture.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/example-topic -o shot.webpSee the ScreenshotNeo API documentation for request options. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf 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. Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Does adding Open Graph metadata guarantee an image preview?
No. A destination uses only the metadata it supports and may render a link differently; check that service’s current preview or debugger.
Does og:url point to the image?
No. It identifies the canonical page object. The image URL belongs in og:image.
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.
