How to Make Website Thumbnails for a Tamil-Language Blog Links Page
Build consistent image cards for a Tamil blog links page, then set and test a separate social preview so shared links show the image you chose.
A “website thumbnail” can mean two different things: an image shown beside a link on your blog’s links page, or the preview image a social or messaging service fetches when someone shares a URL. They are related, but they are configured separately. For a links page, make a consistent image card for each destination. For sharing, set the page’s Open Graph metadata and featured image, then inspect the preview on the services your readers use.
This guide shows a manual HTML/CSS approach that works on a static site or can be adapted to a blog editor, WordPress options for reducing manual work, practical image dimensions, Tamil text checks, and a workflow for testing link previews. If you need screenshots of your own published page while reviewing its layout, ScreenshotNeo can capture a URL as an image or PDF.
1. Decide which thumbnail you need
| Use | What you build | Where it appears |
|---|---|---|
| Links-page card | A card in your page layout with an image, link title, and optional short description | Your blog’s own links or resources page |
| Social preview | Page metadata, usually Open Graph title, description, and image | When someone shares the page URL in a social or messaging app |
A card image does not automatically become the share image for the links page itself. Set both when you want the links page to look good in your blog and when its URL is shared. Likewise, changing a destination page’s featured image does not necessarily change the thumbnail you manually chose for that destination’s card.
2. Plan the cards and images
- Inventory the destinations. For each URL, write a short recognizable title, an optional one-line Tamil description, and choose an image that represents the page.
- Pick one visual system. Reuse a template, image ratio, crop style, background treatment, and small set of colors. The collection should look intentional even when the source images differ.
- Keep the image supportive. Put the link’s identifying information in actual page text as well as the image. Avoid making tiny text inside an image carry the entire meaning; it may be cropped or unreadable on a phone.
- Check your typeface with real Tamil copy. Verify glyph shapes, vowel signs, conjuncts, word spacing, and contrast at the size the card will actually appear. Preview on a phone and in the browsers your readers use. This is a practical design check, not a claim that one font or platform works universally.
- Use descriptive alternative text. If the image adds information, describe it briefly; if it is purely decorative beside an already descriptive link, use empty alt text (
alt="") to avoid repeating the link title to screen readers.
3. Make responsive link cards with HTML and CSS
This self-contained example creates a responsive card grid. Replace the sample URLs and image paths with your own. Store images at the referenced paths or use absolute image URLs from your media library. The example uses a fixed aspect ratio and object-fit: cover, so images of different shapes fill the same card area; choose source images with the important subject near the center to reduce unwanted cropping.
<!doctype html>
<html lang="ta">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Useful links</title>
<style>
:root {
--card-border: #dedbd5;
--card-background: #fff;
--text: #24221f;
--muted: #625f5a;
--focus: #174ea6;
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem 1rem;
color: var(--text);
background: #f7f5f1;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
main { width: min(100%, 68rem); margin-inline: auto; }
h1 { line-height: 1.25; }
.link-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.link-card {
overflow: hidden;
color: inherit;
background: var(--card-background);
border: 1px solid var(--card-border);
border-radius: .75rem;
text-decoration: none;
}
.link-card:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.link-card img {
display: block;
width: 100%;
aspect-ratio: 1.91 / 1;
object-fit: cover;
background: #e8e3da;
}
.link-card__body { padding: 1rem; }
.link-card h2 { margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.45; }
.link-card p { margin: 0; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.link-card { transition: transform 140ms ease, box-shadow 140ms ease; }
.link-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px #00000012; }
}
</style>
</head>
<body>
<main>
<h1>பயனுள்ள இணைப்புகள்</h1>
<div class="link-grid">
<a class="link-card" href="https://example.com/guide">
<img src="/images/guide-card.webp" alt="" width="1200" height="628" loading="lazy">
<div class="link-card__body">
<h2>தமிழ் எழுதுவதற்கான வழிகாட்டி</h2>
<p>எழுத்துரு மற்றும் தட்டச்சு குறித்த அறிமுகம்.</p>
</div>
</a>
<a class="link-card" href="https://example.org/resources">
<img src="/images/resources-card.webp" alt="" width="1200" height="628" loading="lazy">
<div class="link-card__body">
<h2>வாசிப்பு வளங்கள்</h2>
<p>மேலும் படிக்கத் தேர்ந்தெடுத்த இணைப்புகள்.</p>
</div>
</a>
</div>
</main>
</body>
</html>The sample sets lang="ta" because the page content is Tamil. If the whole page is in English, set the appropriate language for the page and mark Tamil passages with lang="ta". The sample image dimensions are 1200 × 628, close to a 1.91:1 social-preview canvas; a card can use that same source ratio, but the layout’s card size is your choice.
Using the example in a blog editor
If your editor strips custom HTML or CSS, use its native link or image blocks and apply the same structure: image, linked title, and optional short description. Check whether the editor makes the whole card clickable, preserves keyboard focus, supports responsive images, and lets you enter useful alt text. Do not assume a theme’s image crop will match your exported artwork; preview the published page.
4. Choose an image size and export
For a share-preview image, WordPress.com’s general guidance recommends 1200 × 630 pixels, an aspect ratio of 1.91:1, JPG or PNG, and a file under 5 MB as a safe target. Keep important details near the center because services can crop previews. These are practical recommendations from WordPress.com, not a universal guarantee for every app.
Its Facebook guidance lists a 200 × 200 pixel minimum, recommends at least 600 × 315 pixels for larger images, and gives 1200 × 630 pixels for high-resolution displays, with an 8 MB maximum. The 5 MB general safe target and 8 MB Facebook maximum describe different things: staying under 5 MB is the broader conservative recommendation, while 8 MB is the Facebook limit reported in that guide. See WordPress.com’s social preview guidance and its Facebook image thumbnail guidance.
- For a links-page card, select a crop that remains recognizable at the actual card width. You can use a separate card crop if the social image needs a different composition.
- Export JPG for photographic artwork or PNG when crisp graphics or transparency matter. Check the result at full size and at phone-card size.
- Compress large files and use modern formats where your platform supports them. Keep a fallback format if your publishing setup requires one.
- Do not add essential title or description text only inside the image. Provide it in the page content and metadata too.
5. Add a social preview for the links page
Set the title, description, and intended preview image for the URL that people will share. In Open Graph terms, the core fields commonly include og:title, og:description, and og:image. Add them to the page’s HTML head if you manage the site directly:
<head>
<meta charset="utf-8">
<meta property="og:title" content="பயனுள்ள இணைப்புகள்">
<meta property="og:description" content="தமிழில் தேர்ந்தெடுத்த பயனுள்ள இணைய வளங்கள்.">
<meta property="og:image" content="https://example.com/images/links-preview.jpg">
<meta property="og:url" content="https://example.com/links/">
<meta property="og:type" content="website">
</head>Use an absolute, publicly reachable image URL. Replace the example domain and Tamil copy with your real page details. If you use WordPress.com, it says it automatically adds og:title, og:description, and og:image tags for posts and pages. Its guide says the page title, excerpt, and featured image feed the preview; if there is no excerpt, it uses the first 195 characters of content, and if there is no featured image it searches other site images. Setting a deliberate featured image and excerpt helps prevent an unintended image or description from being selected. See WordPress.com’s social preview documentation.
Other WordPress installations may use theme or SEO-plugin controls for social metadata. Avoid outputting competing duplicate Open Graph tags from multiple plugins. After publishing, inspect the page source or a preview tool to confirm there is one intended set of values.
6. Pick a publishing workflow
| Approach | Works well when | Trade-offs to check |
|---|---|---|
| Manual cards in the page editor | You have a modest list and want full control over artwork and layout | You maintain image, title, link, and description yourself; check responsive behavior and alt text |
| WordPress link-card block | You want card or list layouts and metadata retrieval for internal or external links | Check plugin compatibility, maintenance, support, and behavior when a destination has no usable Open Graph tags |
| Hosted link-in-bio site | You want a separate hosted links landing page rather than a page inside your blog | Check domain options, design controls, language rendering, and current plan terms |
The WordPress.org directory listing for Custom Card Link – OGP Blog Card Block describes internal cards using a post’s title, excerpt, and featured image, and external cards retrieving title, description, and image from Open Graph metadata. It lists card and list layouts and responsive card images, and identifies the plugin as free and GPL licensed. Verify its current compatibility and maintenance status before installing; directory features do not establish compatibility with every setup.
Canva’s link-in-bio tool is another route if you need a separate landing page: Canva describes templates, brand colors and fonts, and responsive previews. Its feature information says free websites can publish on a Canva subdomain, while unique or existing domain options require Pro; plan details can change, so check the current terms. You do not need a hosted builder just to create thumbnail images.
7. Test the real page and refresh cached previews
- Publish the links page and open it on a desktop and a phone. Check the crop, card order, Tamil glyph rendering, tap targets, contrast, and whether each link goes to the intended destination.
- Share the real page URL in the platforms your audience uses. Inspect the actual preview rather than assuming the page’s card image is what the platform will fetch.
- Use WordPress.com’s Jetpack Link Preview panel where available. The WordPress.com guide also points to Facebook Sharing Debugger for Facebook and WhatsApp previews and LinkedIn Post Inspector for LinkedIn.
- If the preview is old, check that the HTML metadata and image URL have actually changed, then request a fresh scrape using the relevant inspector. Social services cache preview data, so a change may not show immediately.
- WordPress.com says X re-indexes card tags roughly every seven days. Do not interpret a delayed X refresh as proof that your updated page metadata is wrong.
- If Facebook reports a special-character issue with an image title, WordPress.com suggests renaming and re-uploading the file with a plain filename, then requesting a fresh scrape. This is a specific troubleshooting step; it does not mean Tamil text generally fails.
8. Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The links page shows no image | Broken or private image URL, editor removed the image, or CSS gives it no visible size | Open the image URL directly in a private browser window, check the published HTML, and inspect the image element’s computed dimensions. |
| The card crops off the subject | The source aspect ratio differs from the fixed card box or the subject is near an edge | Re-crop with a centered subject, use a more suitable source, or change the card’s aspect-ratio or object-position. |
| Tamil characters look like boxes or are spaced oddly | The selected font or rendering environment may not cover or shape the text as intended | Choose a typeface with Tamil support, load it correctly, and test actual copy on the target phones and browsers. Keep text as HTML when practical. |
| Sharing shows a different image | The page has no explicit image metadata, another plugin emits tags, or the service cached an earlier preview | Set the intended featured image or og:image, inspect the published head for duplicates, then request a fresh scrape. |
| Preview description is unexpected | The CMS selected an excerpt or content fallback, or competing metadata is present | Set a deliberate excerpt/description and check the final rendered metadata, not only the editor fields. |
| Preview image fails despite being correct in a browser | The social crawler may not be able to fetch the URL, or the image is too large or encoded in a way the platform rejects | Use a public HTTPS image URL, meet the platform’s size guidance, and inspect errors in the platform’s preview debugger. |
| Old preview remains after a fix | Platform cache has not refreshed | Request a scrape in the platform inspector where available; allow for platform-specific re-index timing. |
9. Screenshot the published page to review its layout
A screenshot is useful for checking how card spacing, crops, and Tamil text appear at a particular viewport. It does not replace the social preview inspector: a browser screenshot captures the rendered page, while a sharing service reads page metadata and may apply its own crop and cache.
Do it yourself with a browser
For a one-off review, open the published page in your browser at the target viewport and use its built-in screenshot or print-to-PDF command. For repeatable captures, use browser automation such as Playwright: navigate to the URL, set a viewport, wait for images and fonts to load, then save a full-page screenshot. Keep the browser version, viewport, color scheme, and font availability consistent when comparing revisions. This is a separate visual QA task from setting Open Graph tags.
Or skip the browser setup
Make one API request for a screenshot or PDF of the published page. The API accepts a URL and supports PNG, JPEG, WebP, or PDF output; its parameter names used by other screenshot APIs also work. See the ScreenshotNeo API documentation for the full options and current request details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/links/ -o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://example.com/links/"},
timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as f:
f.write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://example.com/links/'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server gives AI agents tools including take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.
10. Performance, reliability, and cost
- Page speed: use appropriately sized card images and lazy-load images below the fold. Set width and height attributes or an aspect ratio to reduce layout shifts. Avoid shipping enormous originals for small cards.
- Reliability: use stable image URLs and keep a source copy of your artwork. Confirm the published page and image are publicly available, then recheck after theme, plugin, or domain changes.
- Maintenance: maintain card links and metadata when destinations move. A card can continue to display while its link becomes stale, so periodically open the destinations.
- Preview costs: manual image design and metadata do not require a screenshot API. If you repeatedly inspect many pages or viewports, account for capture volume and choose a workflow that avoids unnecessary repeated requests. ScreenshotNeo says cache hits are not billed; its published plans are Free 1,000/month, 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, and every feature is on every plan.
FAQ
Should every link card have its own unique image?
It is usually easier for readers to scan a curated list when each image helps distinguish its destination. If you reuse a visual, make sure the title and description still identify each link clearly.
Can I use the same image for the card and the share preview?
Yes, if the same crop works in both places. A links-page card and a social preview are selected by different parts of your page setup, so configure both even when the asset is shared.
Does Tamil copy belong in the thumbnail artwork?
It can, but keep it short and test the typeface and crop at small sizes. The linked title should remain real page text so it stays readable and accessible.
Why did changing the image not update an old message preview?
Sharing services may cache the fetched metadata and image. Confirm the current page tags first, then use the relevant preview inspector to request a refresh where possible.
Do I need a link-in-bio service or a screenshot API?
No. You can build cards in your existing blog and set metadata there. A hosted link page or screenshot API is optional, for separate publishing or repeatable visual review.
