Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →og:image is an Open Graph metadata property whose value is a URL for the image that represents a web page when it is shared. It is not an image file format. Add the image URL in the document head, optionally provide its HTTPS alternate URL, MIME type, pixel dimensions, and descriptive alt text, and put the preferred image first when you publish more than one.
A 1200 × 630 pixel canvas is a widely used practical recommendation for social previews, but the Open Graph protocol does not mandate one universal size. Treat that dimension as design guidance and verify the current limits of each platform where your links will appear.
What “Open Graph image format” actually means
Open Graph describes page metadata for a social graph. The og:image property points to an image resource with a normal URL:
<meta property="og:image" content="https://example.com/images/article-share.jpg">The property does not encode pixels, select JPEG versus PNG, or define a standalone “OG image” file type. Your server still returns an ordinary image resource; Open Graph supplies the address and optional facts that a consumer can use to build a preview.
#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.
Use an absolute URL that a sharing service can request without a login. HTTPS is the sensible default. The protocol also defines og:image:secure_url as an alternate URL for an image when HTTPS is required.
Open Graph image properties and what each one does
| Property | Value | Purpose |
|---|---|---|
og:image |
Image URL | Names the image representing the page. This is the root property. |
og:image:secure_url |
HTTPS image URL | Provides a secure alternate URL when the consumer requires HTTPS. |
og:image:type |
MIME type, such as the type your server declares | Identifies the resource’s media type when known. |
og:image:width |
Integer in pixels | States the image width. |
og:image:height |
Integer in pixels | States the image height. |
og:image:alt |
Text description | Describes what is in the image; it is not a visible caption. |
The Open Graph protocol recommends supplying og:image:alt whenever a page specifies og:image. Write it as useful image description, not as a keyword list or a repetition of the page title.
What size should an Open Graph image be?
There is no protocol-level universal dimension. A current third-party sizing guide recommends 1200 × 630 pixels as a broadly compatible sharing canvas. That is practical, platform-oriented guidance rather than a formal Open Graph requirement, and individual services can impose their own dimensions, file limits, crops, or aspect-ratio rules.
Use 1200 × 630 as a starting canvas
The ratio is about 1.90:1. Keep important text, logos, and faces away from the edges so a service’s crop does not remove them. Check the image at the small size used in a link card: thin type, low contrast, and details near an edge may disappear even when the source image is large.
Rank #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.
Confirm the destination platform
When an exact rendering result matters, consult the current documentation for the platform where the link will be posted. Do not describe 1200 × 630 as an acceptance rule for every network. A platform may scale or crop the same source differently in feeds, messages, and mobile layouts.
Choose an appropriate resource and declare its type
The protocol does not prescribe one image encoding. Serve a real, publicly retrievable image URL and declare og:image:type when you know the MIME type. Ensure that the response and the metadata agree; a URL ending in one extension while the server returns another type can make diagnosis harder.
Minimal HTML implementation
Place the tags in the document’s <head>. The smallest useful version includes the image URL and its description:
<head>
<meta property="og:image" content="https://example.com/images/guide-1200x630.jpg">
<meta property="og:image:alt" content="A browser window showing the Open Graph image settings">
</head>Use a description that says what a person can see. “Open Graph image settings in a browser” is more informative than “social image” or a filename. The metadata is machine-readable and normally does not appear as a caption on the page.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
Richer metadata with dimensions, MIME type, and HTTPS
When the dimensions and media type are known, add them directly after the root image declaration:
<meta property="og:image" content="https://example.com/images/guide-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-1200x630.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 browser window showing the Open Graph image settings">Width and height are pixel values. The secure URL is an alternate URL, not a second visual choice. If your canonical image is already HTTPS, using that same HTTPS URL for both fields is straightforward.
Publishing more than one image
Open Graph permits multiple og:image values. Consumers prefer the first image when values conflict, so place your intended default first:
<meta property="og:image" content="https://example.com/images/primary.jpg">
<meta property="og:image:alt" content="The primary illustration for the article">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/images/alternate.jpg">
<meta property="og:image:alt" content="An alternate detail illustration from the article">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">Keep every image’s structured fields immediately after its own og:image tag. A new root declaration starts a new image entry; placing width or alt after the next root image can associate the fields with the wrong candidate.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →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
Design and content checks before you publish
- Represent the page accurately: the preview image should match the article, product, or event behind the URL.
- Protect the crop: keep essential elements inside a generous central safe area.
- Check small-scale legibility: preview the image at the approximate card size, not only at full resolution.
- Write useful alt text: describe visible content and its purpose; do not write a caption or a list of search terms.
- Use a stable URL: avoid an image address that requires a session, authorization, or a temporary token.
- Supply truthful dimensions and MIME type: they should describe the resource actually served.
Verify the tags yourself
Before asking a platform to generate a preview, fetch the published HTML and inspect the head. This catches templates that omit tags, output relative URLs, or select the wrong image.
1. Inspect the raw HTML with cURL
curl -L https://example.com/article | grep -i 'og:image'-L follows redirects. Confirm that the preferred og:image appears before any alternatives and that its URL is complete.
2. Check the image response
curl -I -L https://example.com/images/guide-1200x630.jpgReview the final response URL and the server’s content type. Also confirm that the dimensions in your tags match the actual file.
3. Parse values in Python
import requests
from bs4 import BeautifulSoup
page = requests.get("https://example.com/article", timeout=20)
page.raise_for_status()
soup = BeautifulSoup(page.text, "html.parser")
for tag in soup.find_all("meta", attrs={"property": True}):
if tag["property"].startswith("og:image"):
print(tag["property"], "=", tag.get("content", ""))Install the two dependencies with python -m pip install requests beautifulsoup4. This prints each image property in document order, making grouping mistakes easy to spot.
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.
4. Parse values in Node.js
const res = await fetch('https://example.com/article');
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
const html = await res.text();
for (const match of html.matchAll(/<metas+[^>]*property=["'](og:image[^"']*)["'][^>]*content=["']([^"']*)["'][^>]*>/gi)) {
console.log(`${match[1]} = ${match[2]}`);
}This simple check expects the property attribute before content. For production tooling, use an HTML parser rather than a regular expression so attribute order and quoting do not matter.
Why is my Open Graph image not showing?
| Symptom | Likely cause | Fix |
|---|---|---|
| No image is selected | The page has no og:image, the tag is outside the head, or the URL is relative. |
Put an absolute image URL in a head meta element and verify the raw response with cURL. |
| The wrong image appears | A different root image tag occurs first, or structured fields are attached to the wrong image. | Move the preferred image first and keep its width, height, type, and alt fields immediately below it. |
| The preview is blank or rejected | The image cannot be fetched publicly, requires authentication, redirects unexpectedly, or the server returns an unexpected resource. | Request the final URL without a logged-in session, follow redirects, and check the response and content type. |
| Dimensions look wrong | The declared pixel values do not match the file, or the destination platform applies its own crop. | Measure the actual resource, correct the metadata, then check the platform’s current dimension guidance. |
| Alt text has no visible effect | og:image:alt is metadata, not an on-page caption. |
Keep it for a textual description and add a visible caption separately if the page needs one. |
| Changes are not visible immediately | The sharing service may still be using an earlier preview. | Use that service’s current preview-refresh or cache-debug procedure; do not change the image URL blindly without understanding its policy. |
Performance, reliability, and security considerations
- Generate the image ahead of time rather than creating it during every metadata request.
- Keep image URLs stable and serve them from infrastructure that can handle crawler requests.
- Do not put secrets, signed credentials, or private user data in the image URL or the rendered image.
- Use descriptive alt text without exposing information that should not be public.
- When you change an image, verify the HTML and the image response independently; a correct tag cannot compensate for an inaccessible resource.
- For platform-specific limits, crops, and cache behavior, rely on the destination platform’s current documentation because those rules are outside the Open Graph protocol.
Or skip the browser setup
ScreenshotNeo can capture the published page so you can inspect the actual visual result of your Open Graph implementation. Its clean-shot process accepts cookie or 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 disabled.
Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and each response identifies the result with X-Page-Verdict and X-Billed headers. ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
Use the API documented at https://screenshotneo.com/docs/ with one GET request:
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 errorscURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article -o shot.webpPython
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/article"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/article' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Every plan includes the full feature set: full-page captures with lazy images loaded, CSS-selector element captures, dark mode, device presets or custom viewports, retina scale, PDF output, custom CSS and JavaScript, waits, request blocking, headers and cookies, timezone and geolocation, transparent backgrounds, resizing, chosen-TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification. Parameter names used by other screenshot APIs also work.
| Plan | Included shots | Price |
|---|---|---|
| Free | 1,000 per month | $0, no card |
| Starter | 3,000 | $5 |
| Growth | 15,000 | $15 |
| Pro | 60,000 | $39 |
| Scale | 250,000 | $99 |
| Business | 1,000,000 | $249 |
Yearly billing gives two months free. Start with 1,000 free screenshots a month with no card, then move to the $5 Starter plan when you need 3,000.
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.
