Recommended Free Tools
Put each page’s title, description, and preview-image reference in its Markdown front matter, then configure your site generator or framework to emit the corresponding social metadata in the rendered page’s <head>. Front matter is only input: the generated HTML and a publicly reachable image are what social crawlers need.
What the page must output
Open Graph specifies four required properties for a page: og:title, og:type, og:image, and og:url. They belong in meta tags in the document head. Add og:description when your framework supports it. See the Open Graph protocol.
As an Amazon Associate I earn from qualifying purchases.
A front matter field does not automatically create these tags. Configure the site’s template, generator, or metadata API to read the page values and render them. The key name and image-path rules depend on the framework; there is no universal front matter schema.
A framework-neutral workflow
- Add page-specific values. Put the title, description, and image reference in the Markdown front matter using the keys your framework recognizes.
- Configure global defaults. Enable the framework’s Open Graph output or add a shared head template. Let page-level values override defaults when the framework supports that behavior.
- Resolve the image URL. Make sure the image reference becomes an absolute URL that is publicly served and accessible to crawlers. Relative paths may need a configured site origin.
- Build or render the page. Front matter is not the finished metadata; inspect the generated HTML head.
- Check the result and the asset. Confirm the required tags contain the intended page values and that the image URL opens publicly. If you also publish Twitter Card metadata, check those tags separately.
Quarto: use the image field
Quarto documents image as a per-document preview-image field. A minimal document can look like this:
#1 Best Overall
---
title: "A page title"
description: "A concise page summary"
image: "/images/page-preview.png"
---Enable social metadata in _quarto.yml with website: open-graph: true or website: twitter-card: true. Quarto derives the title and description from page metadata by default. For a relative image path, set website: site-url in the site metadata so Quarto can resolve it against the site origin.
Quarto can also select a preview image from a full URL, a document-relative or project-relative path, or an image marked .preview-image; the relative-path and class-based approaches require site-url. As a fallback, it looks for an included image named preview.png, feature.png, cover.png, or thumbnail.png. Optional image metadata includes image-width, image-height, image-alt, and card-style fields. Consult Quarto’s website tools documentation for the supported configuration.
Rank #2
Hugo and Grafana Writers’ Toolkit: use meta_image
Grafana’s Hugo-based Writers’ Toolkit documents meta_image for Open Graph and social image metadata. Its value must be the URL of an image hosted on the website:
---
meta_image: https://example.com/images/page-preview.png
---The field only works as intended if the site’s Hugo theme or template renders it into the page head. Check the generated tags rather than assuming a theme reads custom front matter. See the Grafana Writers’ Toolkit metadata documentation.
Next.js: connect content data to metadata or image routes
Next.js does not automatically treat arbitrary Markdown front matter as page metadata. Your content layer must load and parse the front matter, then pass its values to the App Router metadata API or to an image-generation route.
Use metadata for page-specific tags
The App Router supports static Metadata exports and the generateMetadata function for page data. These metadata exports are supported only in Server Components. Use the page’s parsed title, description, image, and URL to populate the metadata your route emits. The exact connection depends on the Markdown parser and content system in your project; Next.js does not specify a universal front matter integration.
Choose a static or generated image
For a designed, fixed asset, Next.js supports special opengraph-image and twitter-image files in route directories. More specific route-level files take precedence over higher-level files. For cards that vary with each article’s data, a route-level opengraph-image.ts can generate an image with ImageResponse using data fetched for that page. Next.js documentation illustrates a 1200 × 630 PNG; that is an example, not a universal requirement for every platform. See the Open Graph and Twitter image file convention and Next.js metadata documentation.
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 errorsJekyll: make the template render your custom field
Jekyll reads YAML front matter between triple-dashed delimiters and exposes its variables to Liquid. You can store an image reference there, but the documented front matter basics do not establish a built-in Jekyll social-image field. Use a project-specific key and update the theme or layout to output the appropriate Open Graph tags. Validate the rendered head for your theme rather than assuming a field name is recognized.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose the image approach and path deliberately
| Decision | Use it when | Check |
|---|---|---|
| Static asset or generated image | A static file suits a human-designed card; generated routes or build-time code suit repeatable cards based on article fields. | Next.js documents both static image files and dynamic generation. Quarto supports metadata-driven selection and fallback discovery. |
| Full URL or relative path | Choose the representation supported by your framework and content workflow. | Confirm how it resolves to the public site origin. Quarto requires site-url for relative preview-image paths. |
| Global default or page override | Use a default for pages without a specific card and page values when an article needs its own. | Quarto merges global configuration with document metadata; Next.js gives more specific route-level image files precedence. |
| Framework metadata API or custom template | Use the supported mechanism for the site generator and its rendering boundaries. | In Next.js, metadata APIs are Server Component-only. In Hugo or Jekyll, confirm that the active template reads the field. |
Do not assume one front matter key, image dimension, or file type works across all frameworks or social services. Follow the relevant framework’s conventions and verify the output.
Validate and troubleshoot before publishing
- Tags are missing: The framework may not emit social metadata by default, or the active template may not read your field. Enable its Open Graph feature or update the shared head template, rebuild, and inspect the generated document.
- The wrong image appears: Check the framework’s image field and precedence rules. In Quarto, verify the explicit field and fallback candidates; in Next.js, check whether a more specific route image takes precedence.
- The image URL is relative or incorrect: Resolve it against the public site origin. In Quarto, configure
site-urlfor relative paths. Confirm the finalog:imageis the intended URL. - The asset works locally but not for crawlers: Ensure the deployed URL is public and the image is available there. A private, invalid, or unavailable asset cannot reliably serve as the preview image.
- Social previews have not changed: First confirm the deployed HTML and image are correct. Platform crawler caching and refresh behavior vary; do not assume a markup change guarantees an immediate refresh everywhere.
- Next.js metadata is unavailable: Check that the route uses a Server Component for metadata exports and that your content layer actually passes parsed front matter into the metadata API or image route.
The deliverable is not the YAML value by itself: it is a rendered page with the expected head tags and a working public image URL.
Or skip the browser setup
If you need a screenshot of a rendered page rather than a social card generated from front matter, ScreenshotNeo can return an image or PDF with one GET request. Its capture can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents.
Free tools Windows power users keep installed
One-click scans. No signup required.
cURL example; replace the URL with your rendered page:
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 options and response details. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. This is a screenshot service, not a substitute for configuring Open Graph tags or designing a social preview card. Sign up for ScreenshotNeo’s free plan.
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.
