What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Set the social preview image in the generated 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. An image embedded in the Markdown body alone does not configure a share preview.
What controls the preview image?
Social platforms read page metadata from the rendered HTML. Open Graph metadata commonly includes og:image, og:title, og:description, and og:url. The right place to author those values depends on the documentation generator and whether the image should be shared across the site or differ by page. See the Open Graph protocol and your generator’s documentation.
As an Amazon Associate I earn from qualifying purchases.
Use an image URL the target service can fetch without authentication. Some services require an absolute URL; a relative path that works within your site is not necessarily sufficient for an external crawler.
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 minutePC 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 & 11Choose a site-wide or per-page image
- Site-wide image: use global metadata or a shared page-head component when the same preview represents the whole documentation site.
- Per-page image: set page metadata when guides, API references, or release notes need distinct previews.
- Generated cards: use a supported theme or plugin when you want cards produced automatically for individual pages, and check its configuration against your installed version.
Set the image in Docusaurus
For a Markdown page, Docusaurus supports an image front-matter field for the thumbnail shown in social media cards. For example:
---
title: API guide
description: Reference for the public API
image: /img/api-guide-social.png
---The example path is illustrative: check the built page to confirm that the emitted image reference is an absolute, publicly fetchable URL if the target platform requires one. Docusaurus also supports global metadata through site configuration. For React pages or custom page types, add the appropriate metadata in the page head or Head component using the current Docusaurus SEO documentation.
Set up social cards in Material for MkDocs
Material for MkDocs provides a social plugin that can generate a custom preview card for each page. Its documentation explains that some services require absolute image URLs; the plugin needs site_url configured to calculate them. Check the current social plugin documentation for the configuration supported by the version installed in your project. Do not copy a setup blindly across versions.
Make sure MkDocs includes the image asset
MkDocs copies image files and other file types from the documentation source into the generated site. That makes the asset available in the output, but does not by itself set the social metadata. Confirm that the active theme or plugin points the page’s metadata at the intended image. See the MkDocs configuration documentation and the Material social plugin documentation.
Use the right dimensions and format for the destination
There is no single image size or format rule that applies to every platform. Follow the guidance for the specific share destination and distinguish website-page metadata from platform-specific repository settings.
| Destination | Published guidance | Scope |
|---|---|---|
| LinkedIn website sharing | Minimum image dimensions of 1200 × 627 pixels; LinkedIn also says a shareable website should include og:title, og:image, og:description, and og:url. |
LinkedIn’s guidance, not a universal standard. Its cited help page was last updated two years before the research date; check it again before relying on time-sensitive requirements. |
| GitHub repository Social preview setting | PNG, JPG, or GIF under 1 MB; at least 640 × 320 pixels, with 1280 × 640 pixels recommended for best display. PNG transparency is supported, but GitHub recommends a solid background if unsure because transparent designs can look different on light and dark backgrounds. | Applies to a repository-level preview configured in GitHub, not to og:image on each page of a documentation website. |
Sources: LinkedIn sharing guidance and GitHub repository documentation. Choose a format accepted by the destination and keep the visual legible against both light and dark backgrounds if it uses transparency.
Verify the deployed page, not just the source file
- Build and deploy the documentation site.
- Open the deployed page’s HTML source or inspect its document head in developer tools.
- Confirm that
og:imageis present and points to the intended image. Check title, description, and canonical page URL metadata where relevant. - Open the image URL directly in a private browser window or another unauthenticated context. Confirm it resolves to the expected image without a login or local development path.
- Check that the URL and image dimensions, format, and file size meet the target platform’s published guidance.
- Use the destination platform’s own preview or sharing tools where available, and verify the page after deployment.
Platforms may cache crawled page data, and their refresh behavior can differ. The sources cited here do not establish a universal refresh schedule, so do not assume a metadata change will appear immediately or identically everywhere.
Rank #4
Troubleshoot missing or incorrect previews
- The body image appears, but the share card does not: a Markdown image is not a substitute for head metadata. Add the image through the generator’s supported metadata mechanism and inspect the rendered HTML.
- The metadata tag exists, but the image is missing: check that the URL is publicly accessible, uses the correct deployed path, and returns the intended asset. Where required, use an absolute URL.
- The plugin generates an incomplete URL: for Material for MkDocs, check that
site_urlis set and that the installed plugin version supports the configuration you are using. - Different pages show the same image: confirm that page-level metadata is set for each page and that a global default is not overriding it.
- A GitHub repository preview differs from the documentation page: GitHub’s repository Social preview setting is separate from the page’s Open Graph metadata. Configure the setting or metadata that matches the place being shared.
- The preview has unexpected contrast or cropping: check the destination’s dimensions and preview behavior, and avoid relying on transparent artwork against a fixed background.
- The preview has not changed after deployment: verify the live HTML and image first. Crawler caching and refresh timing are platform-specific; consult the destination’s current documentation or preview tools.
Or skip the browser setup
To capture a page as an image for review, a one-request option is ScreenshotNeo. It returns a screenshot or PDF; a screenshot is not a replacement for setting og:image in your documentation page’s 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 documentation for the API. Cookie and consent banners, newsletter popups, and chat widgets can be removed before capture; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for 1,000 free screenshots a month, with no card required.
Quick Recap
Best Value
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.
