Recommended Free Tools
Add an og:image meta tag to the page’s HTML <head>, with the image’s publicly reachable HTTP or HTTPS URL in its content attribute. Include the other basic Open Graph properties as well, and provide descriptive alt text for the image.
Add the Open Graph tags to the page head
The Open Graph Protocol identifies og:title, og:type, og:image, and og:url as the four required basic properties. Its guidance also says a page specifying og:image should specify og:image:alt; that field describes the image rather than providing a caption. Open Graph Protocol reference
As an Amazon Associate I earn from qualifying purchases.
<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/images/share-image.jpg" />
<meta property="og:image:alt" content="Description of the image" />
</head>Replace the example values with the title, type, canonical page URL, image URL, and image description that apply to your page. The image URL should be a valid HTTP or HTTPS URL and reachable at the address you publish. The snippet is illustrative; example.com is not an image host you should rely on.
Windows 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 reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchDescribe the image with optional metadata
The protocol defines additional image properties for cases where they are useful. Put each property after the root og:image tag it describes.
#1 Best Overall
og:image:alt: a description of what the image shows, not a caption.og:image:type: the image MIME type.og:image:widthandog:image:height: dimensions in pixels.og:image:secure_url: an alternate URL for a page requiring HTTPS.og:image:url: identical toog:image.
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />The 400-by-300 values in this protocol example are illustrative metadata, not a universal recommended image size. The Open Graph reference does not establish the current dimensions, aspect ratios, file limits, or crawler rules for individual social platforms; check the platform where you plan to share before treating any platform-specific guidance as universal.
Choose one image or provide alternatives
You can repeat the og:image property to provide multiple image URLs. If values conflict, the protocol gives preference to the first image tag from top to bottom. Put an image’s structured properties after its root tag. When another root og:image appears, the preceding image’s structured-property sequence is complete.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<meta property="og:image" content="https://example.com/images/first.jpg" />
<meta property="og:image:alt" content="Description of the first image" />
<meta property="og:image" content="https://example.com/images/second.jpg" />
<meta property="og:image:alt" content="Description of the second image" />Verify the implementation
- Confirm the tags are in the intended page’s
<head>, not only in visible page content. - Check that
og:imagepoints to the image you intend to represent that page and that its URL is valid HTTP or HTTPS. - Make sure each image has its own descriptive
og:image:altvalue, placed after its root image tag. - If you publish several image tags, put the preferred one first; ordering matters when values conflict.
- Do not assume these tags guarantee a particular appearance on every social service. Platform-specific display and crawler requirements are outside what the Open Graph reference establishes.
Or skip the browser setup
If you also need a screenshot of a page to inspect its rendered appearance, ScreenshotNeo can return a screenshot or PDF from one GET request. It is a capture tool, not a replacement for adding Open Graph metadata to your page.
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 →ScreenshotNeo API documentation includes this cURL example:
Quick Recap
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
Rank #3
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes known consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.
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.
