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 errorsSet the social preview image in the rendered page’s HTML <head>, usually with Open Graph’s og:image metadata. Use your documentation generator’s page front matter, site configuration, head component, or social-card plugin. A Markdown image in the page body does not configure the share preview.
How social preview images work
When someone shares a documentation page, the platform’s crawler reads metadata in the page’s HTML head. Open Graph metadata can identify the page title, description, URL, and image; the target platform then decides how to display them. The Open Graph protocol defines these metadata fields: Open Graph protocol.
The implementation has two parts: create or choose an image, then make sure the rendered page points to its publicly fetchable URL. The exact configuration point depends on the generator and theme. For individual documentation pages, set page-specific metadata when the image should vary by page; use global metadata when a common image is appropriate throughout the site.
Set a preview image in Docusaurus
For a Markdown page, add an image field to its front matter:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
---
title: API guide
description: Reference for the public API
image: /img/api-guide-social.png
---Docusaurus documents this field as a thumbnail for social media cards. The path above is illustrative: verify that your deployed build emits the intended, absolute image URL. A relative path may not resolve as intended in every deployment. For global metadata, use the site configuration; for React pages or custom page types, add metadata in the page head using the framework’s head facilities. See the Docusaurus SEO documentation.
Set a preview image in Material for MkDocs
Material for MkDocs provides a social plugin that can automatically generate a custom preview card for each page. This suits documentation sites where page-specific cards should be generated rather than authored individually. Its setup is version-sensitive, so follow the plugin documentation for the version installed in your project. Some sharing services require an absolute image URL; configure site_url so the plugin can calculate absolute URLs when needed. See Material for MkDocs social plugin documentation.
MkDocs copies image files and other assets from the documentation source into the built site. Copying an image into the output makes it available as an asset, but does not by itself set the page’s social metadata. The active theme or plugin still needs to emit the correct preview-image metadata. See MkDocs configuration documentation.
Choose the right scope: page metadata or repository preview
| Setting | What it controls | Best fit |
|---|---|---|
Page-level website metadata, such as og:image |
The preview metadata emitted by a documentation web page; it can vary by page. | Sharing individual documentation pages, especially when each should have a distinct card. |
| Site-wide metadata or a generated social-card plugin | A common image or automatically created per-page cards, depending on the generator and plugin configuration. | A consistent default or a site whose theme can generate page-specific cards. |
| GitHub repository “Social preview” setting | The preview for a GitHub repository link, not the metadata for each page on a documentation website. | Sharing the repository itself. |
GitHub’s repository setting is separate from website page metadata. For repository previews, GitHub accepts PNG, JPG, or GIF files under 1 MB, recommends at least 640 by 320 pixels, and says 1280 by 640 pixels gives the best display. PNG transparency is supported, but GitHub notes that transparent designs can look different on light and dark backgrounds; use a solid background if the result is uncertain. These specifications apply to GitHub repository previews, not every social platform. See GitHub’s repository social preview guidance.
Free tools Windows power users keep installed
One-click scans. No signup required.
Prepare the image for the platform where it will appear
There is no single image-size rule established here for all sharing services. Follow the target platform’s own current guidance and keep its file-format and file-size constraints in view.
- LinkedIn website sharing: LinkedIn’s help guidance calls for
og:title,og:image,og:description, andog:url, and specifies a minimum image size of 1200 by 627 pixels. This is LinkedIn guidance, not a universal requirement; check the page for current requirements before relying on it. See LinkedIn’s website-sharing guidance. - GitHub repository links: use the repository-specific limits and dimensions described above; do not assume they apply to a documentation page shared on another service.
- Transparent designs: consider how the image looks against both light and dark backgrounds, particularly where the platform may change its display background.
Verify the deployed page, not just the source file
- Build and deploy the documentation site, then open the exact page URL you intend to share.
- Inspect that page’s generated HTML head and confirm it contains the expected
og:imagevalue. Also check the title, description, and canonical URL metadata where relevant. A Markdown image in the body is not a substitute. - Open the image URL directly without signing in. Confirm it resolves publicly and returns the intended image rather than an error, redirect to a login page, or unrelated asset.
- Check that the resolved image URL is absolute if the target service requires one. With Material for MkDocs, verify the
site_urlconfiguration when the plugin needs it to construct that URL. - Compare the output against the target platform’s current dimensions and file limits, then use that platform’s available preview or inspection method to check the result.
Platforms may cache crawled page data, and refresh timing or rendering can vary. The cited guidance does not establish a universal cache-refresh procedure or guarantee that every service will display the same card immediately.
Rank #4
Common problems and fixes
- The page shows no preview image: inspect the deployed HTML head for
og:image. If it is missing, configure metadata through the generator’s supported front matter, site configuration, head component, or plugin. - The metadata exists but the crawler cannot load the image: open the image URL in a private browser session or another unauthenticated context. Publish it at a publicly accessible URL and correct broken paths or access restrictions.
- The image URL is relative where an absolute URL is needed: inspect the rendered metadata. Configure the site’s public base URL as required by the generator or plugin, then rebuild and verify the deployed HTML.
- The wrong page image appears: check whether the page-level setting is present and whether a global default or theme plugin is supplying metadata instead. Inspect the final rendered head to identify which value is actually emitted.
- A file in the documentation source is not appearing as the card: asset copying only makes the image available in the built site. Set the metadata to point to it as well.
- The preview looks cropped or different across platforms: check the target platform’s own image guidance and inspect the image against the backgrounds and display shape it may use. Do not treat one platform’s recommendations as universal.
Or skip the browser setup
For capturing the page as an image during a documentation workflow, ScreenshotNeo offers a one-request screenshot API. It is separate from configuring og:image: it returns a screenshot of a URL and does not set your website’s social metadata.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie and 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 per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo free to get 1,000 screenshots a month with no card.
For an image that appears when a page is shared, keep the page metadata in place and verify the rendered og:image and public image URL. Learn more about ScreenshotNeo if you also need screenshots in your workflow.
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.
