Free tools Windows power users keep installed
One-click scans. No signup required.
Open Graph (OG) metadata turns an ordinary web page into a rich object when it is shared through services that read the protocol. Put the tags in your document’s <head>. At minimum, define og:title, og:type, og:image, and og:url; then add a description and image details that accurately describe the page.
A minimal Open Graph example
This complete example follows the protocol’s basic pattern. Replace every example value with information about the page you are publishing.
<!doctype html>
<html prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>Example Article</title>
<meta property="og:title" content="Example Article">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/example-article">
<meta property="og:image" content="https://example.com/images/example-article.jpg">
<meta property="og:description" content="A concise description of this article.">
</head>
<body>
<article>...page content...</article>
</body>
</html>The four base properties are required by the Open Graph protocol. The sample title, URL, and image are illustrative; they are not values to copy unless they describe your own page.
What each required property does
| Property | Purpose | What to enter |
|---|---|---|
og:title |
Names the object in the social graph. | The page’s share title, written for people rather than as a file name. |
og:type |
Identifies the kind of object. | Usually website for a general home page or article for editorial content; use a more specific protocol type when it applies. |
og:image |
Supplies the representative preview image. | An absolute, publicly reachable image URL that represents this page. |
og:url |
Provides the object’s permanent identifier. | The canonical URL of the page, including the correct protocol and path. |
Google’s web.dev guidance describes these fields, along with a title, description, canonical URL, image URL, and type, as metadata read by social-site crawlers. A crawler may cache what it finds, so changing the HTML does not always change an already-generated preview immediately.
#1 Best Overall
Recommended optional tags
Description and site identity
<meta property="og:description" content="A concise description of this article.">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">og:description summarizes the page, og:site_name identifies the wider site, and og:locale states the language-and-region context. They are optional, but useful when the target service displays them.
Image details
<meta property="og:image:secure_url" content="https://example.com/images/example-article.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 developer reviewing an article preview on a laptop">The protocol documents secure URL, MIME type, width, height, and alternative text as structured image properties. The dimensions above are only an illustration, not a universal requirement. If you publish an image, provide meaningful og:image:alt text describing it.
Audio and video
<meta property="og:audio" content="https://example.com/audio/episode.mp3">
<meta property="og:video" content="https://example.com/video/episode.mp4">Use these only when the page has corresponding media. Do not point them at unrelated files.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Complete article-page example
<!doctype html>
<html prefix="og: https://ogp.me/ns#" lang="en">
<head>
<meta charset="utf-8">
<title>How to Audit a Website</title>
<link rel="canonical" href="https://example.com/guides/audit">
<meta property="og:title" content="How to Audit a Website">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/audit">
<meta property="og:image" content="https://example.com/images/audit.jpg">
<meta property="og:description" content="A practical checklist for finding technical and content problems on a website.">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">
<meta property="og:image:alt" content="A checklist beside a laptop displaying a website audit">
</head>
<body>...</body>
</html>Keep og:url aligned with the canonical link. If the page is available at several tracking or parameterized URLs, choose one stable canonical address and use that same address in the OG metadata.
Multiple images and structured-property ordering
You may provide more than one og:image. When a property can repeat, the protocol gives the first value preference when conflicting values are encountered. Put each image’s structured properties immediately after its root property so the association is unambiguous:
<meta property="og:image" content="https://example.com/images/cover.jpg">
<meta property="og:image:alt" content="The article cover illustration">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/images/detail.jpg">
<meta property="og:image:alt" content="A close-up detail from the illustration">Do not place all root tags first and all structured tags later. Ordering them as sets prevents a crawler from attaching the wrong dimensions or alternative text to an image.
Rank #3
Open Graph versus Twitter Cards
Open Graph and platform-specific card metadata are related, but they are not the same layer. Google web.dev’s example uses a Twitter Card tag such as <meta name="twitter:card" content="summary_large_image">, which uses name and a twitter: value rather than the OG property="og:..." form.
Keep your OG tags for services that consume Open Graph and add a platform’s own card tags when that platform documents them. Do not assume that every network, messenger, or crawler uses identical fields, image rules, or cache behavior. Apple’s Messages documentation indicates that OG metadata can provide images and meaningful captions in previews, but detailed Apple-specific requirements should be checked in Apple’s current documentation.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteHow to add tags safely
- Choose the page identity. Decide the exact canonical URL, title, type, description, and representative image.
- Edit the server-rendered head. Add the tags before
</head>. If a framework generates metadata, use its documented head or SEO component so the tags appear in the returned HTML. - Use absolute URLs. A crawler outside your site cannot reliably resolve a relative image or page path. Confirm that HTTPS URLs respond without requiring a login.
- Check page-specific output. View the raw response or “view source,” not only a client-side inspector. Verify that one page’s values have not been accidentally reused for every route.
- Request a fresh preview. Use the destination platform’s current preview or validation tool. If it still shows old data, account for crawler caching and request a re-fetch where the platform supports it.
Common mistakes and fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| No rich image | og:image is missing, relative, blocked, or returns an error. |
Use a public absolute URL and test it without cookies or authentication. |
| Wrong page title | A template emits stale or site-wide metadata. | Inspect the raw HTML for the exact route and generate values from that page’s data. |
| Preview shows an old image | The crawler has cached the earlier response. | Correct the source first, then use the platform’s re-fetch or validation workflow. |
| Image details do not match | Structured properties are separated from their root image or ordered incorrectly. | Place each image’s og:image:alt, type, width, and height directly after its image tag. |
| Metadata appears in the page | Tags were placed in <body> or rendered as visible text. |
Move them into the document <head>. |
| Twitter-specific behavior is missing | Only OG tags were added. | Add the platform’s documented card metadata separately. |
Validate a generated page with a screenshot
A metadata checker tells you what a crawler reads; a screenshot lets you inspect the resulting page or a locally hosted preview visually. For a do-it-yourself check, open the published URL in a browser, view source, confirm the head values, and then use the relevant social platform’s validator. Test at least one page with a long title, one with no image, and one with multiple images so template mistakes are visible.
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
Or skip the browser setup
ScreenshotNeo can capture the published URL through one request, which is useful when you need a repeatable visual check after changing OG metadata. Its API can return PNG, JPEG, WebP, or PDF. The following cURL request captures a page as WebP; see the ScreenshotNeo documentation for parameters and response details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/audit -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/audit"}, timeout=90)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/audit' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));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 cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its 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 without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
Operational checks for production sites
- Generate OG values from the same record that supplies the page title and canonical URL, avoiding drift between visible content and metadata.
- Return a successful response for the HTML and image URLs to unauthenticated crawlers.
- Keep image URLs stable when possible; changing filenames forces crawlers to discover a new resource.
- After deployment, inspect raw HTML from the production domain rather than a development preview.
- Record which page URL, image URL, and metadata version you tested so a later cache issue can be diagnosed.
Frequently asked questions
Do Open Graph tags replace the HTML title?
No. Keep a normal <title> for browsers and search-oriented page metadata, and use og:title for the social-graph representation.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Is og:description required?
No. The protocol’s four base properties are og:title, og:type, og:image, and og:url. A description is optional and generally useful.
Can JavaScript add the tags after load?
Do not rely on that for broad compatibility. Put the metadata in the server-delivered HTML head so crawlers can read it without running your application code.
Should every page use og:type="article"?
No. Select a type that describes the object. An editorial story can use article; a general site home page commonly uses website.
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.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →
