What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
OG tags are metadata elements in a page’s HTML <head> that describe the page when it is shared or discovered through social systems. A correct implementation starts with four protocol properties: og:title, og:type, og:image, and og:url. Add them as <meta property="..." content="..."> elements, then verify that the delivered HTML contains the intended values.
The smallest useful implementation is shown below. The Open Graph protocol describes a web page as a structured object; its reference example and property rules are documented at the Open Graph protocol reference.
What OG tags do
Open Graph (OG) tags live in the document head rather than in the visible body. They give a crawler a machine-readable title, object type, representative image, and canonical URL. A sharing system can then build a consistent preview instead of guessing from visible text, images, or the browser title.
Use the protocol’s property syntax: a property attribute names the OG field and a content attribute supplies its value. Keep one canonical set of values in the HTML that a crawler receives, whether that HTML is generated by a template, CMS, server-side application, or static build.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC 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 & 11#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 | What it identifies | Typical value |
|---|---|---|
og:title |
The title displayed for the shared object | Example page |
og:type |
The kind of object being described | website |
og:image |
The image representing the object | https://example.com/share-image.jpg |
og:url |
The canonical URL and permanent graph identifier | https://example.com/page |
The protocol marks these four base properties as required. They are not interchangeable: the title is human-facing text, the type classifies the object, the image supplies visual identity, and the URL identifies which page the object represents.
Minimal HTML implementation
Place the tags inside <head>. The protocol example also declares the OG namespace on the root element:
<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>Use the page’s actual canonical address in og:url, not a tracking URL, search result, preview route, or alternate language URL unless that is intentionally the object being shared. The value in og:title can differ from the document’s <title>, but keeping them aligned avoids confusing previews.
How to choose each value
og:title: a concise object title
Write the title you want a person to see in a shared card. Include the page’s subject or name, and remove navigation labels, template fragments, and duplicated site branding. Escape characters correctly for HTML attributes and ensure your template cannot emit an empty value.
og:type: classify the object
Use website for a general site or landing page, or a more specific protocol type when your object fits one. The type should describe the page itself, not the action you hope a visitor will take on it.
og:url: establish one identity
Set this to the stable, preferred URL for the page. If several routes render the same content, choose one canonical address and emit it consistently. Keep the scheme, host, path, and trailing-slash policy consistent with your canonical-link strategy.
og:image: select the representative image
Provide the URL of the image that should represent the object. Make sure your deployment serves the file to the crawlers that request it and that the response is an image rather than an HTML error page. The protocol does not establish a universal image-size rule; check the current requirements of each platform where the page will be shared.
Optional image properties
The protocol defines structured properties that add information about an image:
Recommended Free Tools
og:image:secure_urlsupplies an HTTPS alternative.og:image:typestates the image MIME type.og:image:widthandog:image:heightstate its dimensions.og:image:altdescribes the image’s contents. The protocol says to provide this property wheneverog:imageis specified; write a description, not a caption or a call to action.
Structured properties belong immediately after the root property they describe. For example:
<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 blue product dashboard on a laptop screen'>Multiple images and property order
Repeat a property when you want to provide multiple values. When values conflict, the first occurrence in document order takes precedence. That makes ordering part of your implementation, not cosmetic formatting.
For multiple images, keep each image’s structured fields grouped after its corresponding og:image root. Start the next image only after the previous image’s width, height, type, and alt fields are complete:
<meta property='og:image' content='https://example.com/primary.jpg'>
<meta property='og:image:alt' content='Primary product photograph'>
<meta property='og:image' content='https://example.com/alternate.jpg'>
<meta property='og:image:alt' content='Alternate product photograph'>Do not place an image’s structured fields after a different image root; a parser can then associate the metadata with the wrong image.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteA complete head example
This example combines the required properties with image metadata while leaving normal document metadata intact:
<!doctype html>
<html prefix='og: https://ogp.me/ns#'>
<head>
<meta charset='utf-8'>
<title>Acme Widgets | Pricing</title>
<meta name='description' content='Compare Acme Widgets plans and features.'>
<meta property='og:title' content='Acme Widgets pricing'>
<meta property='og:type' content='website'>
<meta property='og:url' content='https://example.com/pricing'>
<meta property='og:image' content='https://example.com/images/pricing-share.jpg'>
<meta property='og:image:secure_url' content='https://example.com/images/pricing-share.jpg'>
<meta property='og:image:type' content='image/jpeg'>
<meta property='og:image:alt' content='Acme Widgets pricing comparison on a desktop monitor'>
</head>
<body>
...
</body>
</html>Keep OG tags in the initial HTML response whenever possible. If a client-side application inserts them only after JavaScript runs, a crawler that does not execute that code can receive no tags or stale values. For a single-page application, configure the server, static renderer, or prerendering layer to emit page-specific head markup for every shareable route.
Validation and debugging workflow
- Inspect the delivered source. Request the public URL and use “view source” or an HTTP client. Search the raw response for
og:title,og:type,og:url, andog:image. Inspecting only a post-JavaScript DOM can hide what a crawler actually received. - Check duplicates and order. Remove old tags emitted by a layout, plugin, or nested component. If duplicates remain, the first value may win, so an obsolete tag can override the one you intended.
- Open the image URL directly. Confirm that it resolves publicly, returns the intended image, and is not replaced by a login page, redirect loop, hotlink block, or error document.
- Compare URL identity. Make sure
og:url, your canonical link, and the address you share refer to the same page variant. - Use a protocol debugger when available. The protocol documentation names Facebook’s Object Debugger as its official parser and debugger. Its current availability and workflow can change, so follow the tool’s present instructions rather than assuming an older interface.
The protocol documentation does not define universal image dimensions or a complete compatibility matrix for every social platform. Treat any platform-specific crop, size, cache, or refresh behavior as a requirement to verify in that platform’s current documentation.
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
Troubleshooting common failures
“My og:image is not showing”
- The tag is absent from the raw response: move generation into the server-rendered template or static build and confirm the production route, not just a local development page.
- The URL returns an error or HTML: request the image URL directly, fix permissions or routing, and ensure the response is the intended image.
- An older image appears: inspect the page for repeated
og:imagetags. Because the first value takes precedence, remove the stale one or place the desired root first. - The image is associated with the wrong metadata: regroup each image’s structured properties directly after its own
og:imageelement. - A platform crops the image unexpectedly: the OG protocol does not prescribe a universal crop or dimension. Check that platform’s current image guidance and choose an asset that survives its crop.
“The preview title is wrong”
- Search the source for duplicate
og:titleelements emitted by a theme, SEO plugin, or component. - Verify that your deployment is serving the new template and that the shared URL is the same route you edited.
- Keep the value free of unrendered template variables and HTML markup.
“The URL in the preview points somewhere else”
- Check that
og:urlcontains the preferred canonical address, including the correct scheme and host. - Remove query parameters used only for analytics from the OG value.
- Look for environment configuration that still points production pages at a staging host.
“The tags work locally but not after deployment”
- Inspect the production response for a cache serving an older head.
- Check that production middleware, consent handling, authentication, or bot protection is not replacing the head or blocking the image.
- Verify that the production image path and host are reachable without an internal network or login.
Performance, accessibility, and maintenance
- Keep the head small and deterministic. Emit one authoritative set of values per page instead of assembling tags from many components.
- Use a stable, appropriately compressed share image; OG metadata does not require loading that image into the visible page.
- Update
og:image:altwhen the artwork changes so the description still matches the image contents. - Generate values from trusted, escaped data. Never allow a page title or URL supplied by a user to break out of an HTML attribute.
- Test representative page types: home page, article, product, paginated route, localized route, and an error page. Confirm that each has an intentional type, title, URL, and image policy.
- Record the expected canonical URL and primary image in your content model or template documentation so redesigns do not silently remove them.
Or skip the browser setup
If you need a rendered capture of a page while checking a deployed change, ScreenshotNeo is a website screenshot API and MCP server. It can return a PNG, JPEG, WebP, or PDF from one request; it is a visual capture service, not an OG metadata parser, so still inspect the HTML source for the tags themselves.
Its capture pipeline accepts consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result 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.
See the ScreenshotNeo API documentation for authentication and options. The following requests use the documented endpoint and can be run as written after replacing the key and target URL.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Every feature is available on every plan. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it.
FAQ
Do OG tags replace the normal HTML title?
No. Keep a normal <title> for the document and provide og:title for the shared object. They may match, but they serve different metadata consumers.
Is the prefix attribute mandatory?
The protocol’s example declares prefix='og: https://ogp.me/ns#' on the root element. Including it makes the namespace explicit and keeps your markup aligned with that example.
Best Value
Can one page declare more than one image?
Yes. Repeat og:image, put each image’s structured properties immediately after its root, and place the preferred image first because the first occurrence wins conflicts.
Do OG tags guarantee a particular social preview?
No. They provide standardized object metadata. Individual platforms can apply their own parsing, caching, cropping, and compatibility rules, so verify the destination platform’s current behavior.
Frequently Asked Questions
Where should Open Graph tags be placed?
Place them in the page’s HTML <head>, preferably in the initial response delivered for the shareable URL.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →What happens if two og:title tags exist?
The Open Graph protocol gives precedence to the first occurrence in document order, so remove duplicates or put the intended value first.
Is og:image:alt the same as an image caption?
No. It should describe the image’s contents, as specified by the protocol, rather than act as promotional caption text.
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.
