The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Open Graph (OGP) is a set of HTML metadata properties that tells sharing services what a web page represents. By placing tags such as og:title, og:description, og:image and og:url in the document’s <head>, you can provide the title, summary, image and canonical identity used to build a link preview. The Open Graph Protocol documentation describes its purpose this way: “The Open Graph protocol enables any web page to become a rich object in a social graph.”
OGP supplies metadata; it does not force every network to render an identical card. Each platform fetches the page with its own crawler, applies its own requirements and decides how the preview looks.
What Open Graph describes
A normal hyperlink contains a URL. A preview service needs more context: the page’s human-readable title, a short explanation, a representative image and a stable identity. Open Graph expresses that context as <meta> elements. A crawler reads the HTML, maps the properties to its own preview format and may cache the result.
The metadata describes the page-level object, not a social-media post. Your article, product page or video landing page can therefore present a consistent identity wherever a service supports OGP. The specification is maintained at ogp.me; its examples and implementation section identify Facebook’s Object Debugger as Facebook’s official parser and debugger.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
The four required Open Graph properties
The protocol specifies four required properties. Put each one in the HTML document’s <head>.
| Property | What it describes | Practical guidance |
|---|---|---|
og:title |
The object’s title | Use the page’s clear, shareable title. It need not be identical to the browser’s <title>, but keeping them aligned avoids confusing users. |
og:type |
The object category | Choose the type that fits the page. Some types have additional properties. |
og:image |
A representative image URL | Use an absolute, publicly retrievable URL to the intended image. |
og:url |
The canonical URL and permanent object ID | Use one preferred URL, including the correct protocol, host and path. Keep it consistent with your canonical-link strategy. |
The og:url value is more than the address a user happens to share: the specification treats it as the object’s canonical identity in the graph. If tracking parameters create many equivalent URLs, publish the clean canonical address here.
Optional properties that improve a preview
Common optional properties include:
og:description— a one- or two-sentence summary, as recommended by the specification.og:site_name— the broader site or publication name.og:locale— the language and regional locale of the object.og:audioandog:video— media URLs when the object includes those assets.
An object type can define further properties. Check the protocol’s type documentation when marking up media, profiles or other specialized objects.
Structured image properties
When og:image is present, you can add:
og:image:secure_url— an HTTPS version of the image URL.og:image:type— the image media type, such asimage/jpeg.og:image:widthandog:image:height— the intrinsic pixel dimensions.og:image:alt— alternative text describing what is in the image, rather than serving as a caption.
The specification says the alternative text should be supplied when an og:image is present. Write it as a useful description for someone who cannot see the image.
PC 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 & 11Crashes, 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 minuteRank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
Where the tags go: a complete example
Place the properties inside <head>, not in the visible page body. This minimal example includes the required set, a description and image details:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Choosing a Database for a Small API</title>
<meta property="og:title" content="Choosing a Database for a Small API">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/database-choice">
<meta property="og:image" content="https://example.com/images/database-choice.jpg">
<meta property="og:description" content="A practical comparison of database options for a small production API.">
<meta property="og:site_name" content="Example Docs">
<meta property="og:locale" content="en_US">
<meta property="og:image:secure_url" content="https://example.com/images/database-choice.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="Diagram comparing database choices for an API">
</head>
<body>...</body>
</html>If your site is server-rendered, emit these tags in the initial HTML response. A crawler that does not execute your application’s JavaScript may never see tags inserted only after client-side rendering.
How repeated properties and multiple images work
Open Graph properties can form arrays. For example, you may declare more than one og:image. The protocol gives preference to the first value from top to bottom when values conflict, so order is meaningful.
Structured image properties belong immediately after the root image property they describe. A later og:image starts another image entry; its width, height, type and alt tags must follow that root before the next root appears.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
<meta property="og:image" content="https://example.com/images/hero.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="The product dashboard on a laptop">
<meta property="og:image" content="https://example.com/images/ square.jpg">
<meta property="og:image:width" content="1080">
<meta property="og:image:height" content="1080">
<meta property="og:image:alt" content="The product icon on a colored background">Do not accidentally insert an unrelated structured tag between a root image and its fields. Also remove duplicate tags generated by competing templates; a crawler may select the first value and make the duplicate difficult to diagnose.
OGP versus platform-specific preview rules
OGP defines names and meanings. Platforms decide which properties they read, how they crop an image, whether they display a description and what access rules their crawler requires. There is no universal image size or guaranteed card design.
LinkedIn’s documented requirements
LinkedIn’s website-sharing guidance asks sites to comply with OGP and lists og:title, og:image, og:description and og:url. For its sharing-module image, LinkedIn documents these limits:
| LinkedIn guidance | Value |
|---|---|
| Maximum file size | 5 MB |
| Minimum dimensions | 1,200 × 627 pixels |
| Recommended ratio | 1.91:1 |
| Images under 401 pixels wide | Displayed as thumbnails |
These are LinkedIn’s documented requirements, not universal Open Graph rules. LinkedIn also says an image can be absent when the site blocks LinkedIn from retrieving it or when the file is in a protected directory or website.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
A dependable workflow for building and checking previews
- Choose the canonical object URL. Decide which protocol, host, path and trailing-slash form represent the page. Put that exact address in
og:url. - Create a stable share image. Store it at an absolute URL that does not require a login, expiring token or private-network connection. For LinkedIn, meet the dimensions and file-size guidance above.
- Emit tags in the initial head. View the raw HTML response, not only the post-JavaScript DOM, and confirm the four required properties are present once.
- Check every URL directly. Request the page and image from an external network. Confirm successful responses, correct content types and no access-control or authentication wall that would stop a crawler.
- Inspect a platform’s representation. Use the platform’s own preview or debugger where available. Facebook’s official parser is identified in the OGP implementation documentation; LinkedIn applies its own crawler and image rules.
- Change one variable at a time. If you replace the image, title and URL simultaneously, you cannot tell which change fixed or caused the result.
Troubleshooting “og:image not loading” and other failures
The image tag exists, but no image appears
- Open the exact absolute image URL in a private browser window. A login page, authorization header, IP restriction or hotlink protection can prevent retrieval.
- Check that the image is not in a protected directory. LinkedIn specifically lists blocked retrieval and protected hosting as causes.
- Verify the response is an image with the expected MIME type, rather than an HTML error document.
- Check the file size and dimensions against the target platform’s rules. LinkedIn’s documented limits are 5 MB maximum and 1,200 × 627 pixels minimum for its sharing module.
- Look for malformed URLs, mixed-content references or a certificate problem. Prefer the HTTPS URL in both
og:imageandog:image:secure_url.
The wrong image or title is selected
- Search the raw head for duplicate
og:imageorog:titleelements. The first conflicting value wins according to the protocol. - Confirm that image structured fields immediately follow the image root they describe.
- Inspect the canonical URL. You may be debugging one URL while sharing a different redirect or parameterized address.
- Use the platform’s parser/debugger after making a change. A service may retain a previously fetched representation, so the displayed result can lag behind the current HTML; the exact refresh behavior is platform-specific.
The title or description is missing
- Ensure the property is in
<head>and usesproperty="og:title", not a misspelled attribute. - Escape quotation marks and special characters correctly in the
contentvalue. - Keep the description to the specification’s recommended one or two sentences and understand that a platform may truncate or omit it.
The page works in a browser but not for a crawler
A normal browser may have cookies, JavaScript state or credentials that a crawler does not. Test the unauthenticated, server-delivered HTML and make sure robots, firewall, rate-limit or bot-detection rules do not block legitimate preview fetches. A successful screenshot in your own browser is not proof that a social crawler can retrieve the same resources.
Inspecting the rendered result yourself
For a do-it-yourself check, first fetch the page source with a command-line HTTP client, then search for the Open Graph properties and open the referenced image URL. In a browser, use View Page Source rather than only the Elements panel; the latter can show tags added after the original response. Finally, run the URL through the platform debugger available to you and compare its fetched values with your source.
When testing several pages, record the page URL, the exact og:url, image URL, HTTP status and the four required property values. This makes a redirect, duplicate tag or access-control mistake visible instead of relying on a visual guess.
Or skip the browser setup
ScreenshotNeo can render a URL through a screenshot API, which is useful for checking what a page visibly produces after you deploy its metadata. It is not a replacement for a social platform’s parser: use the platform’s own debugger to verify the values it reads. ScreenshotNeo’s clean capture removes cookie-consent banners, newsletter popups and chat widgets before the shot; bot checks, blank pages, failed loads and cache hits are not billed, and each response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server gives Claude, Cursor and other MCP clients take_screenshot, get_page_info and capture_pdf tools.
One GET request is enough:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/guides/database-choice -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/database-choice"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/guides/database-choice' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);See the ScreenshotNeo documentation for request options. You can select PNG, JPEG or WebP, capture a full page or one CSS-selected element, set a viewport or device preset, use retina scale, wait for a selector, delay or network idle, and add custom CSS or JavaScript. Those controls help you inspect the page state that a visitor sees while you separately validate the raw OGP tags.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
The Free plan includes 1,000 screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to start.
Reliability, security and maintenance considerations
- Keep URLs permanent. Changing
og:urlor moving the image creates a new retrieval problem and can split a page’s identity across services. - Serve predictable files. Return the correct status and media type, avoid authentication and ensure your CDN does not deny crawler requests.
- Keep metadata close to the source. Generate tags from the same title, canonical URL and image record used by the page so templates cannot drift.
- Review after template changes. A redesign can introduce duplicate tags, place them outside
<head>or replace server-rendered values with client-only markup. - Respect privacy. Do not expose private page titles, user data or unreleased images through publicly retrievable metadata.
What Open Graph can—and cannot—control
Open Graph can declare the preferred title, description, image, type and canonical identity, plus optional media and locale information. It cannot guarantee a platform’s crop, truncation, cache timing, card layout or decision to show every field. Those behaviors belong to the consuming service. Treat OGP as a precise description of your page and validate the final preview on each service that matters to your audience.
Frequently Asked Questions
Is Open Graph the same thing as schema.org structured data?
No. Open Graph is a set of meta properties aimed at rich link objects on sharing services. Schema.org uses a separate vocabulary and markup formats for describing entities to supported consumers; one does not replace the other.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Do Open Graph tags replace the normal HTML title and meta description?
No. Keep a normal <title> and standard description for browsers and search-related consumers, then add OGP properties for link previews. They can use the same editorial wording but serve different metadata systems.
Can I put Open Graph tags in the page body?
The specification calls for the additional <meta> elements in the HTML <head>. Put them there so parsers can find them in the document metadata.
Why should og:image:alt not be written like a caption?
The protocol defines the field as alternative text describing what is in the image. A caption explains context or adds commentary; alt text should identify the visual content for people who cannot see it.
Should every page declare more than one og:image?
No. Declare one clear representative image unless you have a reason to offer alternatives. If you provide several, remember that the first image is preferred when values conflict and keep each image’s structured fields directly after its root property.
Recommended Free Tools
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.
