Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Open Graph is a set of HTML metadata properties that describes a web page as a rich object. When a social or sharing service retrieves the page, it can use that metadata to build a link preview with a title, description, image, and URL. The protocol defines the metadata; each platform decides what it reads and how it displays it.
What Open Graph does
The Open Graph Protocol documentation says, “The Open Graph protocol enables any web page to become a rich object in a social graph.” In practical terms, a page owner can add metadata to the page’s HTML so a sharing service has explicit information to use when representing a link.
Without those values, a platform may have to infer preview content from the page. With Open Graph tags, you provide intended values directly. They describe the page or object being shared; they do not dictate the exact appearance of the resulting preview. Platform-specific parsing, display rules, and image constraints still apply.
Open Graph is not a standalone preview image or a setting in a social account. It is a protocol for describing web content through metadata in the page source.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The four core Open Graph properties
The specification identifies four required properties. Put them in the HTML <head> of the page being shared.
| Property | What it describes | Example |
|---|---|---|
og:title |
The object’s title. | <meta property="og:title" content="A Practical Guide to Indoor Herbs"> |
og:type |
The object’s category or type. | <meta property="og:type" content="article"> |
og:image |
A representative image URL for the object. | <meta property="og:image" content="https://example.com/images/herbs.jpg"> |
og:url |
The object’s canonical URL, used as its permanent ID in the graph. | <meta property="og:url" content="https://example.com/guides/indoor-herbs"> |
For a page about an article, og:type can describe it as an article; select a type appropriate to the object rather than treating the property as another title or URL. The protocol’s definition of og:url matters when multiple URLs can reach the same content: it identifies the canonical object, rather than merely whichever address happened to be copied.
Where to put the tags: a complete example
Here is a minimal page head with the required properties and a description. Replace the sample values with details for the specific page, and make sure the image and canonical URL point to the intended resources.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A Practical Guide to Indoor Herbs</title>
<meta property="og:title" content="A Practical Guide to Indoor Herbs">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/images/indoor-herbs.jpg">
<meta property="og:url" content="https://example.com/guides/indoor-herbs">
<meta property="og:description" content="Choose herbs, light, and containers for a productive indoor garden.">
</head>
<body>
<h1>A Practical Guide to Indoor Herbs</h1>
</body>
</html>The Open Graph properties use the property attribute on <meta> tags and supply their values in content. They belong in the document head, not in visible page copy. If your site uses a content-management system or rendering framework, check the HTML it sends to a crawler—not just the values shown in an editor or browser interface.
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 minuteWindows 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 reinstallOptional metadata and image details
Description and site context
og:description supplies a description of the object; the specification recommends one or two sentences. Other commonly used optional properties include og:site_name and og:locale. The protocol also defines media-related properties such as og:audio and og:video. A particular object type may have additional properties of its own.
Structured image properties
When you need to describe an image more fully, the protocol lists these optional properties:
og:image:secure_url: a secure URL for the image.og:image:type: the image’s media type.og:image:widthandog:image:height: its dimensions.og:image:alt: alternative text describing what is in the image.
The specification says image alt text should describe what the image shows, not act as a caption, and should be specified when an og:image is present. These are protocol properties; whether a platform displays or uses every one is platform-dependent.
Multiple images and property order
Open Graph allows a property to have repeated values, forming an array. For example, a page can declare more than one og:image. When values conflict, the specification gives preference to the first tag from top to bottom. Consequently, put the image you most want treated as primary first.
Rank #3
Structured image properties belong after the root image property they describe. If you start another image entry, begin it with another og:image root tag, followed by that image’s structured properties. For example:
<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="627">
<meta property="og:image:alt" content="Pots of herbs on a bright windowsill">
<meta property="og:image" content="https://example.com/images/alternate.jpg">
<meta property="og:image:alt" content="Close-up of fresh basil leaves">Order can be especially consequential when a page template, plugin, or server-rendered component emits duplicate tags. Inspect the final head in document order to find which value comes first.
Why link previews differ by platform
The protocol specifies metadata, not a universal card layout, image size, or guaranteed rendering result. LinkedIn, for example, asks website developers to comply with the Open Graph Protocol and lists its own image requirements. Those figures are LinkedIn guidance, not general Open Graph rules.
| LinkedIn sharing-module image guidance | Value stated by LinkedIn |
|---|---|
| Maximum image file size | 5 MB |
| Minimum image dimensions | 1200 × 627 pixels |
| Recommended image ratio | 1.91:1 |
| Images narrower than | 401 pixels wide appear as thumbnails |
These requirements are from LinkedIn’s help page, which was marked “Last updated: 2 years ago” when accessed on September 29, 2026. Check LinkedIn’s current guidance if you need to meet its publishing requirements: Make your website shareable on LinkedIn. Do not assume the same dimensions or file limits apply to another service.
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 a missing or incorrect preview
If an image is not showing or the title is unexpected, inspect both the page metadata and the platform’s ability to retrieve the page and its assets. The Open Graph properties help define intended values; they cannot help if the relevant crawler cannot access the HTML or image.
The image is missing
- Confirm that the final HTML head contains an
og:imagetag with the intended image URL. - Check that the URL points to the image itself and that the image is accessible to the platform’s crawler.
- Look for access restrictions. LinkedIn says an image may fail to appear if a website blocks LinkedIn from retrieving it or if the image is hosted in a protected directory or website.
- For LinkedIn, check the image against the service’s stated file size and dimensions above. Those constraints are specific to LinkedIn’s sharing module.
- Check for multiple
og:imagetags and confirm the preferred image is first. The protocol gives the first value preference in a conflict.
The wrong title, description, or URL appears
- Inspect the page source served to crawlers and verify the values of
og:title,og:description, andog:url. - Check for duplicate properties inserted by a theme, plugin, or template. Where repeated values conflict, the first one takes preference under the protocol.
- Make sure
og:urlidentifies the intended canonical page, particularly if the same content is reachable under several addresses. - Remember that a platform controls its rendering behavior; the metadata describes the object but does not force a particular display.
Use a platform debugger when available
The Open Graph specification identifies Facebook’s Object Debugger as Facebook’s official parser and debugger. Use a platform’s own preview or debugging facilities where available to inspect how it reads a page. The documentation cited here does not establish a universal cache duration or a particular refresh procedure, so do not assume that changing a tag produces an immediate update everywhere.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Inspect rendered metadata with ScreenshotNeo
A screenshot can help you inspect what a page looks like in a browser, but it is not a replacement for checking the HTML head that a sharing crawler receives. For a rendered-page check, ScreenshotNeo is a website screenshot API and MCP server for developers. Its browser captures can help you see whether page content, overlays, or rendering problems are visible; use source inspection and the platform’s debugger to validate metadata and crawler access.
Or skip the browser setup
One GET request returns a screenshot or PDF. For example, this cURL request saves a WebP screenshot of the target page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/indoor-herbs -o shot.webpSee the ScreenshotNeo API documentation for request options and formats. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before a shot; each of those cleanup steps can be turned off. Bot checks, blank pages, failed loads, timeouts, 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 for AI agents using Claude, Cursor, or another MCP client. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card required.
What Open Graph cannot guarantee
Open Graph gives page owners a defined way to provide title, type, image, URL, and other metadata. It does not ensure that every platform will retrieve every page, accept every image, display every field, or render identical previews. Treat the tags as the page’s structured description, then verify important sharing cases against the relevant platform’s current guidance and tools.
Frequently Asked Questions
Does Open Graph replace a page’s title or visible content?
No. It provides metadata for services consuming a link; the page still has its own visible content and HTML title.
Is LinkedIn’s 1200 × 627-pixel recommendation a universal Open Graph requirement?
No. It is LinkedIn-specific image guidance, not a protocol-wide requirement.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
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.
