Recommended Free Tools
Open Graph (OG) metadata is a set of HTML <meta> elements that describes a page when it is shared. Add the tags to the document’s <head>, provide a title, type, representative image and canonical URL, then test the result on each destination. The protocol gives social crawlers structured information; it does not force Facebook, LinkedIn, messaging apps or other services to display an identical preview.
What Open Graph metadata does
The Open Graph Protocol describes itself as enabling “any web page to become a rich object in a social graph.” In practice, a crawler requests your page, reads metadata in the head, and uses the values as inputs for a share card or link preview. Without OG values, a platform may guess a headline, image and description from visible page content, or it may show an incomplete card.
OG tags are metadata, not visible page copy and not a ranking signal that guarantees distribution. The destination controls whether it supports a field, how it crops an image, when it refreshes cached data and whether it substitutes another value. Keep the page’s visible title and content consistent with the metadata so the preview accurately represents the destination.
The four required Open Graph properties
The protocol specifies four basic properties for every page:
| Property | What it represents | Implementation guidance |
|---|---|---|
og:title |
The title of the object being shared | Use a concise, accurate page title rather than a site-wide slogan. |
og:type |
The object’s type | website is a sensible value for most ordinary pages; specialized types can require additional properties. |
og:image |
A representative image URL | Use an absolute, publicly fetchable URL, not a relative path or an image hidden behind authentication. |
og:url |
The canonical URL and permanent identifier for the object | Use the preferred URL for that page, including the correct scheme and path. |
The protocol’s example uses the property attribute for each OG name and content for its value. Put every tag inside <head>, before </head>.
A complete HTML implementation
Insert this in the page template that renders your article or landing page. Replace every example value with data for the current URL.
<head>
<meta property="og:title" content="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">
<meta property="og:description" content="A concise description of this page.">
<meta property="og:site_name" content="Example Site">
</head>Generate these values server-side or through your CMS for every canonical page. A common error is placing one static set of tags in a global layout, which makes every article appear to have the same title and image. View the delivered HTML, rather than only source files or a client-side editor, to confirm that the crawler can see the tags.
Optional description, site and locale fields
og:description
The protocol recommends a one- or two-sentence description. Write a useful summary of the linked page; do not simply repeat the title or stuff it with keywords. A platform can truncate or ignore it, but supplying it gives the consumer better input.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →og:site_name
This identifies the broader site or publication. It is different from the individual page title and is useful when a preview shows both.
Locale metadata
Locale fields can identify the language and regional variant of the object. Add them when your site publishes multiple locales, and use the locale format expected by the protocol and your implementation. Do not claim that a locale tag will translate content or override a platform’s language detection.
Images: structured properties and multiple candidates
OG supports structured image metadata associated with each og:image:
og:image:secure_urlfor an HTTPS equivalent.og:image:typefor the MIME type, such asimage/jpeg.og:image:widthandog:image:heightfor dimensions.og:image:altfor a description of what the image contains. The protocol distinguishes this from a caption.
Keep structured properties immediately after their corresponding root og:image tag. If you provide more than one image, repeat the root and its structured properties as a group. The first image in document order is preferred when a consumer has to choose between values.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Make the image URL stable, use a format the destination accepts, and permit unauthenticated crawler access. A page can have correct tags yet produce no image if the image host blocks the crawler, requires a cookie, redirects unexpectedly or returns an HTML error page.
LinkedIn’s published image guidance (and its limits)
LinkedIn’s sharing documentation lists og:title, og:image, og:description and og:url for website sharing. The same help page, marked as last updated two years before the September 29, 2026 access date, states a 5 MB maximum image file size, minimum dimensions of 1200 × 627 pixels and a recommended 1.91:1 ratio. Those figures apply to LinkedIn’s sharing module, not to Open Graph as a universal rule, and LinkedIn may revise them.
LinkedIn also notes that images under 401 pixels wide can display as thumbnails and that a blocked or protected image may fail to appear. If your image meets the stated dimensions but is missing, inspect server access controls, robots or firewall rules and the image response itself. Verify the current LinkedIn guidance before treating these numbers as a production contract.
Open Graph versus other social metadata
Open Graph uses property="og:…". Some destinations also define their own namespaces and fields. For example, web.dev distinguishes Twitter Card fields such as twitter:card from OG properties. You may add platform-specific tags alongside OG, but do not assume that one set controls every destination.
Free tools Windows power users keep installed
One-click scans. No signup required.
| Question | What you can establish | What remains destination-specific |
|---|---|---|
| Which fields are read? | OG’s four basic properties and optional structured fields are defined by the protocol. | Whether a service supports a field or prefers its own metadata. |
| Which image is shown? | You can provide one or more ordered candidates and dimensions. | Cropping, selection, thumbnail treatment and fallback behavior. |
| Can the crawler fetch it? | The page and image must be reachable without credentials or blocking responses. | Each service’s crawler identity, cache and refresh schedule. |
| How do you inspect it? | Use the destination’s debugger or preview tool. | Tool names and current availability change; confirm them in current platform documentation. |
Historical guidance about Twitter-era validation tools should not be treated as current X requirements. Check the destination’s present documentation when you add platform-specific cards.
How to add OG tags in common site setups
Static HTML
- Open the HTML file for the page.
- Place the tags inside
<head>. - Publish the file at the canonical URL.
- Request the URL from an unauthenticated session and inspect the returned head.
Server-rendered applications
Build title, description, canonical URL and image values from the route’s page data before sending the response. Ensure the first HTML response contains the tags; adding them only after client-side JavaScript runs can prevent a crawler from seeing them.
CMS templates
Use the SEO or social-sharing settings supplied by your CMS, then inspect one real article and one page with a different image. Confirm that changing an editor’s social title changes the rendered og:title, while the canonical URL remains the intended page URL.
Validation checklist
- Fetch the production URL and verify exactly one intended value for each core property.
- Confirm
og:urlmatches the canonical URL after redirects, trailing-slash rules and URL parameters are resolved. - Open the image URL without logging in; check its status, content type, dimensions and file size.
- Check that the title and description describe the page a visitor will actually see.
- Run the URL through each destination’s current sharing inspector or debugger.
- Share a newly changed URL only after considering that services may cache earlier metadata; use the platform’s documented refresh mechanism where available.
Troubleshooting common preview failures
The preview shows an old title or image
The service may have cached an earlier response. Confirm the live HTML first, then use that service’s current URL inspection or refresh workflow. Changing a query string can create a different URL, but it does not repair an incorrect canonical value.
No image appears
Check that og:image is absolute, returns an image response, stays below the destination’s limits and is not protected by authentication, hotlink prevention or a firewall. For LinkedIn, compare the file with its published 5 MB and 1200 × 627 guidance, while remembering that those values are LinkedIn-specific and dated.
The wrong image is selected
Remove stale duplicate tags, put the preferred og:image first and keep its structured properties directly below it. Inspect the final response for tags injected by a theme, plugin or reverse proxy.
The page title is correct in a browser but missing to the crawler
Look at the raw server response, not only the DOM after JavaScript executes. Check redirects, robots or firewall rules and whether the crawler receives a consent wall, bot challenge or error page instead of the article.
Different services show different cards
That is expected. Services have independent parsers, supported fields, image rules, caches and fallback logic. Supply valid OG data, add a destination-specific namespace when required, and validate each important channel separately.
Performance, reliability and maintenance
OG tags add negligible response size, but the resources they point to affect preview reliability. Serve a reasonably sized image from a fast HTTPS host, avoid expiring signed URLs and keep redirects short. Generate metadata from the same content model that produces the page so title, description, image and canonical URL cannot drift.
When redesigning templates, include automated checks that fail a build if production routes omit the four core properties or emit a relative image URL. Recheck platform limits periodically: the LinkedIn page used for the figures above is already two years out of date as of September 29, 2026, and platform behavior can change independently of the protocol.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If your goal is to inspect how a page actually renders before you share it, ScreenshotNeo can capture the URL through one request. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. 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. Its 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 all options. A cURL request:
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}`);The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account to try it.
Best Value
FAQ
Are Open Graph tags required for a web page to work?
No. A page remains valid HTML without them, but a sharing service then has less explicit information and may construct an unpredictable preview.
Should every page use og:type="website"?
It is appropriate for many general pages. If you publish a content type with protocol-specific requirements, use the documented type and supply any additional properties it requires.
Can og:image:alt replace image alt text in the page?
No. It describes the shared preview image for consumers of the OG object; it does not replace the HTML alt attribute needed for the image element shown to visitors.
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 errorsFrequently Asked Questions
Can Open Graph metadata guarantee a specific preview on every social network?
No. Each destination decides which fields to parse, how to crop images, when to refresh cached data and what fallback content to use.
Where can I put Open Graph tags if a page has several language versions?
Place the tags in each localized page’s head and make the title, description, image and canonical URL correspond to that locale. Add locale metadata when your implementation supports it.
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.
