How to Make Website Preview Images for a Marathi Resource Links Page

A website preview image has two parts: the artwork and the webpage metadata that tells sharing platforms which image to show. Create a landscape image with checked Marathi text, host it at a publicly fetchable URL, and point your page’s og:image tag to it. Then share the page in the destinations your readers use and check the resulting crop and readability.

This guide covers both a one-off design workflow and a repeatable HTML/CSS workflow. It also shows how to inspect the page with a screenshot, since exporting an image alone does not configure link previews.

1. Decide what the preview should communicate

A small link card has limited space. Before opening a design tool, decide what a reader should understand at a glance:

Topic: what kinds of resources the page collects.
Language: that the resources or page are in Marathi.
Identity: which site or page the link leads to.

Write a short Marathi headline and, if useful, a brief supporting phrase. Have a fluent Marathi editor check spelling, meaning, punctuation, and line breaks. Prefer Devanagari when that is how the audience reads Marathi. Do not rely on a Latin-language layout or spell-check to catch issues with Devanagari conjuncts and matras.

Keep essential content away from the edges. Sharing destinations can crop or resize images differently, so the center should still communicate the topic if some outer area is clipped. There is no single image dimension mandated by the Open Graph protocol. Check the current requirements and appearance for each destination that matters to your audience.

2. Create the artwork and check Marathi typography

Option A: use a visual editor

Create a landscape canvas. Choose dimensions after checking the sharing destinations’ current image guidance.
Add the short, editor-reviewed Marathi copy and the page identity.
Choose a font that supports every character in the copy. Inspect the actual Devanagari rendering, especially conjuncts, matras, punctuation, and line breaks.
Check contrast and legibility at the approximate small size of a link card, not just at full canvas size.
Export the image. Canva recommends PNG for social media and text and advises checking dimensions and source image quality; those are Canva recommendations, not universal platform requirements.

Canva documents an accessibility checker and alternative-text features. Its checker does not guarantee accessibility compliance, and the design tool’s accessibility features do not set metadata on a separately managed webpage. Review both the artwork and the page configuration.

Option B: build a repeatable image with HTML and CSS

For many resource pages, HTML and CSS make it easier to reuse a layout and update the copy. This example produces a local SVG file with a landscape layout and Marathi text. Replace the sample copy with text reviewed for your page. Use a system font only if it renders all required characters on the machine generating the file; otherwise load a Devanagari-capable font and confirm that the export includes it.

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
  <rect width="1200" height="630" fill="#f4efe7"/>
  <circle cx="1030" cy="130" r="180" fill="#f3c46b"/>
  <rect x="70" y="70" width="1060" height="490" rx="32" fill="#ffffff"/>
  <text x="120" y="160" font-family="Noto Sans Devanagari, sans-serif"
        font-size="30" fill="#365447">संसाधन संग्रह</text>
  <text x="120" y="290" font-family="Noto Sans Devanagari, sans-serif"
        font-size="58" font-weight="700" fill="#17251f">मराठी संसाधने</text>
  <text x="120" y="365" font-family="Noto Sans Devanagari, sans-serif"
        font-size="28" fill="#39443e">वाचण्यासाठी आणि शिकण्यासाठी निवडक दुवे</text>
  <rect x="120" y="430" width="250" height="58" rx="29" fill="#365447"/>
  <text x="155" y="468" font-family="Noto Sans Devanagari, sans-serif"
        font-size="22" fill="#ffffff">तुमच्या साइटचे नाव</text>
</svg>

Save the markup as preview.svg, render it to a format accepted by your target sharing destinations, and inspect the rendered output. SVG support and conversion behavior vary by destination, so a PNG export is a practical choice when broad image compatibility matters. Check the destination’s current format and size limits rather than assuming one format works everywhere.

Google Fonts documents loading web fonts and using a generic CSS fallback. If you use a web font for the graphic, verify that the font covers the Marathi characters and that your rendering or export process waits for the font to load. A fallback can silently change wrapping or glyph appearance.

3. Host the image and add Open Graph metadata

Upload the finished image to a public URL that sharing services can fetch. Then put that URL in the HTML metadata for the page being shared. The image URL and the page URL are separate: uploading artwork does not automatically connect it to a page.

Add these tags inside the page’s <head>, replacing the example URLs and description. The Open Graph protocol defines og:image and recommends og:image:alt when a page specifies an image. The image type, width, height, and secure URL properties are optional metadata.

<head>
  <title>Marathi Resources | Example Site</title>
  <meta property="og:title" content="Marathi Resources | Example Site">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/marathi-resources/">
  <meta property="og:image" content="https://example.com/images/marathi-resources-preview.png">
  <meta property="og:image:alt" content="A preview for a collection of Marathi learning and reading resources.">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>

Write og:image:alt as a description of the informative content in the image, not as a slogan or caption. If the same graphic appears within the page, give its HTML image element appropriate alt text too. Metadata alt text and inline image alt text serve different placements.

If the page also uses other preview metadata, make sure the values agree: the title, page URL, description, and image should all refer to the same resource page. Put the tags in the server-rendered HTML head when possible, so a crawler that does not run the page’s JavaScript can still find them.

4. Check the actual shared page

Open the page’s public URL and confirm it returns the intended page.
Inspect the HTML head and verify that og:image points to the final image URL, not a local file or preview URL.
Check that the image URL is publicly fetchable and returns the expected image.
Share the page in the destinations your audience uses. Check loading, crop, contrast, and whether Marathi remains legible at card size.
If a previously shared preview remains after an update, use that destination’s current official preview inspection or refresh tool where available. Preview caching behavior differs by platform.

A browser screenshot is useful for checking the page itself, its rendered fonts, and whether the page has loaded as expected. It does not guarantee that a sharing platform will use the same crop or refresh its cached card. Check the destination’s preview separately.

5. Choose a workflow that fits the page

Approach	Good fit	Review carefully
Visual editor	A single image, quick revisions, or a team comfortable with visual design tools.	Devanagari rendering, reduced-size readability, export quality, and metadata on the actual website.
HTML/CSS or scripted generation	Many similar resource pages, reusable layouts, or changes managed in code.	Font availability at render time, correct line wrapping, output conversion, and the page metadata update.

Both workflows still need a human review of the Marathi text and a check of the finished page in the destinations where it will be shared.

6. Troubleshooting

Symptom	Likely cause	What to do
The shared card shows no image.	The tag is missing, points to the wrong URL, or the image cannot be fetched publicly.	Inspect the page source for `og:image`. Open the image URL without being signed in and check the server response.
The old image still appears.	The destination may be showing a cached preview.	Confirm the page now serves the new tag and image, then use the destination’s current official preview refresh process if it provides one.
Marathi glyphs look wrong or become boxes.	The chosen font lacks character coverage or did not load before export.	Use a font with Devanagari coverage, wait for it to load in the export workflow, and inspect the final rasterized image.
Matras or conjuncts are hard to read.	Text is too small, cramped, or broken across unsuitable line breaks.	Shorten the copy, increase type size and spacing, and ask a fluent editor to review the line breaks and rendering.
The card crops important words.	The destination uses a crop or aspect ratio different from the design canvas.	Keep essential text toward the center, check the destination’s current guidance, and preview the share there.
The image looks blurry.	The source image is too small or was scaled up during display or export.	Start with a sufficiently detailed source for the destination and inspect the actual exported file at display size.
The screenshot shows a loading state.	The page or its fonts and images had not finished loading when captured.	Wait for a page-specific selector, a suitable delay, or network idle before capture, then inspect the result.

7. Screenshot the page while you review it

You can capture the page in a browser automation setup to review layout and font rendering. For a repeatable local check with Playwright, install the package and browser using Playwright’s official installation instructions, then run this Node.js script. It saves a full-page screenshot after the page reaches network idle. Some sites keep network connections open, so if that wait does not complete, use a page-specific readiness condition or a bounded delay supported by your setup.

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1200, height: 800 } });
await page.goto('https://example.com/marathi-resources/', {
  waitUntil: 'networkidle',
  timeout: 60000
});
await page.screenshot({ path: 'marathi-resources-page.png', fullPage: true });
await browser.close();

This checks the rendered webpage, not the artwork file alone. Review the actual exported image too, and test the URL in each sharing destination. Their metadata parsing and caching are separate from your browser capture.

Or skip the browser setup

For a quick page capture, ScreenshotNeo takes a URL in one request and returns an image or PDF. Its screenshot API and MCP server are made for developers. For this page, use the API to inspect the rendered result after updating the artwork or metadata.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/marathi-resources/ -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/marathi-resources/"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/marathi-resources/' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

See the ScreenshotNeo API documentation for request options. The page’s preview metadata still needs to be present on the page, and a screenshot is not a substitute for testing the share card on its destination.

Cookie and consent banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Responses include page-verdict and billing headers.
An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000 screenshots. Every feature is on every plan.

Performance, reliability, and cost

For a single page, the design and metadata work is usually the main effort. For many pages, a reusable layout and automated metadata generation reduce repeated editing, but add a font-loading and rendering step that should be checked in the generated files. Serve the image from a stable public URL and avoid changing the file while leaving a stale page reference.

Link preview fetching and caching are controlled by the destination platform. A correct page can therefore take time to display an updated card, and a browser screenshot cannot establish that every platform has refreshed its copy. Maintain the page metadata and image URL, then verify using each destination’s available inspection flow.

ScreenshotNeo’s stated monthly plans are Free: 1,000 shots, Starter: $5 for 3,000, Growth: $15 for 15,000, Pro: $39 for 60,000, Scale: $99 for 250,000, and Business: $249 for 1,000,000. Yearly billing gives two months free. Use a browser setup you already maintain if that suits your workflow; for occasional captures, the free plan may cover the checks described here.

FAQ

No. The page needs metadata that points to the hosted image, including og:image.

Does Open Graph require one specific image size?

The protocol documents optional width and height properties but does not prescribe one universal size. Check the current guidance for the sharing destinations you use.

Should the Open Graph alt text repeat the headline?

It should describe the informative content of the image. Use a concise description that helps someone understand what the artwork conveys.

No. A browser screenshot shows the webpage. Sharing platforms can crop, cache, or render link previews differently.

Primary references

The Open Graph protocol documents image metadata and recommends image alt text.
Canva accessibility guidance covers contrast, typography, and alternative text, while noting the checker does not guarantee compliance.
Canva export guidance discusses file types and image quality for its workflows.
Google Fonts documentation covers web font loading and CSS fallbacks.