How to Make Website Thumbnails for a Podcast Guest Link Page

A website thumbnail for a podcast guest link page is a card image that helps visitors recognize an appearance and choose where to listen. There is no universal platform-prescribed size for these cards. Pick dimensions that match your page component, keep the important subject near the center, and check the result in the actual desktop and mobile layouts.

First decide whether each card links to an episode page or contains an embedded player. Use a guest-approved portrait, approved episode art, or a consistent design that combines the guest and show identity. Keep website card artwork separate from platform-native podcast artwork: those formats have their own requirements.

1. Choose the card destination and image

For a simple guest appearance directory, a linked image and text label are usually enough. Link the image and its accessible text link to the same episode destination. If visitors should be able to listen without leaving the page, consider an interactive Spotify embed for Spotify episodes. Spotify embeds can be adjusted for width and height, and its oEmbed response can provide a title, embed HTML, and a thumbnail URL and dimensions when available; the image is not guaranteed to be present.

Use an image you have permission to publish. A portrait supplied or approved by the guest, approved show art, or a purpose-made branded graphic are sensible options. The platform guidance cited here does not establish a photo permission policy, so confirm rights with the image owner or guest where appropriate.

2. Set dimensions for your own page

Do not copy an artwork size from a podcast platform and assume it is a web-card standard. Start with the site builder or component’s requested dimensions and aspect ratio. If there is no specification, choose one consistent ratio for the card system and render images with a deliberate crop. Keep a high-resolution master so you can make alternate crops later.

Put the face, guest name, and any essential episode cue in a central safe area. Responsive cards may be narrower or cropped differently at mobile widths. Keep text short and large enough to read at the smallest intended display size, and avoid placing essential type against a busy photograph.

Platform artwork is a separate deliverable

• Spotify for Creators video thumbnails: Spotify specifies a horizontal 16:9 image and suggests 1920 × 1080 pixels. This applies to video thumbnails, not every audio appearance or website card. Audio episodes use show or episode artwork. Spotify’s thumbnail guidance
• YouTube podcast artwork: A YouTube podcast is represented as a playlist, with episodes as videos. YouTube requires square podcast artwork in its setup flow and recommends 1280 × 1280 pixels. That is podcast artwork for YouTube, not a universal card size. YouTube’s podcast setup guidance

3. Build a responsive, accessible card

This standalone HTML file is a small starting point. Replace the example destination and image path with your own. The image and title both link to the episode, and the title provides a text route for visitors who do not rely on the image alone.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Podcast appearances</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 2rem; font: 16px/1.5 system-ui, sans-serif; }
    .episodes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
      gap: 1rem;
      max-width: 70rem;
      margin: auto;
    }
    .episode-card { overflow: hidden; border: 1px solid #ddd; border-radius: .75rem; }
    .episode-card a { color: inherit; text-decoration: none; }
    .episode-card img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      object-position: center;
      background: #eee;
    }
    .episode-card h2 { margin: 0; padding: 1rem; font-size: 1.1rem; }
    .episode-card a:focus-visible { outline: 3px solid #315eea; outline-offset: 3px; }
  </style>
</head>
<body>
  <main class="episodes" aria-label="Podcast appearances">
    <article class="episode-card">
      <a href="https://example.com/episodes/guest-interview">
        <img src="/images/guest-interview.webp"
             alt="Guest Name on the Example Show"
             width="960" height="600" loading="lazy">
        <h2>Guest Name on the Example Show</h2>
      </a>
    </article>
  </main>
</body>
</html>

The 16:10 ratio above is just an example component choice, not a recommended universal standard. Set aspect-ratio to your chosen card shape. object-fit: cover fills the area and crops overflow; object-position can shift the crop toward a face. If the artwork itself contains text or must remain uncropped, use a matching ratio or object-fit: contain and accept the empty space around the image.

4. Add Spotify information or an embed when useful

If you already know the episode URL and only need a static thumbnail, create the card yourself and link directly to the episode. If you want Spotify to provide preview data, its oEmbed API accepts a Spotify URL. Treat the returned thumbnail as optional and handle missing image fields. For an interactive listening surface, use Spotify’s embed workflow and test the player on the page where it will appear.

<iframe
  title="Listen to the episode on Spotify"
  src="https://open.spotify.com/embed/episode/EPISODE_ID"
  width="100%"
  height="152"
  style="border: 0; border-radius: 12px;"
  loading="lazy"
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
></iframe>

Replace EPISODE_ID with the ID from the episode URL. Spotify describes embeds as interactive and documents adjusting their size; see its embed overview, oEmbed reference, and oEmbed tutorial. For dynamic pages, do not assume that every episode supplies a thumbnail or that externally hosted preview images will always load. Provide a fallback image and a direct episode link.

5. Review the cards at real sizes

1. Open the page at desktop width and at a narrow phone width.
2. Check that each face and important visual cue survives the crop.
3. Read names and episode context at the smallest card size.
4. Follow both the image and title links and confirm each opens the intended episode.
5. Check image loading, keyboard focus, and any embedded player on the published page.
6. Compare several cards together. A repeatable series style should make the page feel coherent without making every appearance indistinguishable.

A screenshot is useful for reviewing the final page at a fixed viewport: it can reveal inconsistent crops, uneven card heights, or labels that become too small. ScreenshotNeo is a website screenshot API and MCP server; its capture options include viewport and device presets, full-page shots, CSS selectors, and custom CSS or JavaScript. See the ScreenshotNeo documentation.

Or skip the browser setup

Capture a page preview with one GET request. Replace YOUR_API_KEY with your key and change the URL to the page you want to review. The API can return PNG, JPEG, WebP, or PDF; this example saves the returned image bytes with a WebP filename, so request WebP if you configure an explicit output format.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/podcast-guest \
  -o guest-page.webp

Python

import requests

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

Node.js

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/podcast-guest'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await (await import('node:fs/promises')).writeFile('guest-page.webp', bytes);

Cookie banners, popups, and chat widgets are removed before the shot, and each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed; response headers report the page verdict and billing status. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots. Every feature is available on every plan. Read the API documentation and sign up for 1,000 free screenshots a month, with no card.

Troubleshooting

Problem	Likely cause	Fix
The guest’s face is cut off	The image is being cropped to fill a different aspect ratio.	Adjust object-position, move the subject inward in the source, or choose a card ratio closer to the source image.
Text in the image is unreadable on phones	The composition relies on small baked-in text or the card becomes too narrow.	Reduce the words, enlarge the type in the source artwork, or place the guest and episode label as responsive HTML text outside the image.
A preview image is missing	Spotify oEmbed’s thumbnail fields can be nullable, or the source image is unavailable.	Use a local fallback image and keep the episode title and direct link visible.
The image looks soft	The source is too small for the displayed dimensions or a high-density screen.	Export from the high-resolution master at an appropriate size and avoid enlarging a small preview.
The link opens the wrong place	The card URL points to a show, playlist, or unrelated episode.	Verify the episode URL directly and test the image and text links after publishing.
The embedded player does not fit	The iframe dimensions or parent layout constrain the player.	Use a fluid width, set a suitable height, and test at both desktop and mobile widths. Confirm the embed URL is an episode URL.
Screenshot review shows a blank or incomplete page	The page may still be loading, rely on delayed content, or present a bot check.	Check the live page in a browser, wait for the page to settle, and use screenshot settings for a delay or selector when needed. ScreenshotNeo reports page verdict and billing headers.

Performance, reliability, and cost

For a page of static cards, store optimized image files on your site or image host and specify intrinsic width and height to reduce layout shifts. Lazy-load images below the initial viewport. Use an embed only where the listening interaction adds value: it loads an external interactive surface, while a static card is simpler and lighter for a directory. Keep a fallback if a remote preview image is missing.

There is no sourced performance statistic showing that one card design increases clicks or listens. Judge the page by whether visitors can identify the guest and reach the correct episode, and check the actual result across screen sizes.

ScreenshotNeo offers a free allowance of 1,000 screenshots per month with no card. Paid plans are 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. Only clean shots are billed, and failed loads and cache hits cost nothing. These options can help when reviewing many page variants or generating previews; for a single card, opening the page in a browser is sufficient.

FAQ

Should every guest card use the same design?

A consistent template helps visitors scan a series. Keep the guest or episode image distinctive within that template so appearances remain recognizable.

Can I use the Spotify preview image as my card?

Yes, when the oEmbed response supplies a usable thumbnail and you are comfortable with its appearance. The documented thumbnail fields may be null, so keep a fallback and test the result.

Does a website card need to be 16:9?

No universal website-card ratio is defined by the platform guidance in this article. Spotify’s 16:9 guidance is for its video thumbnails; select a ratio that works with your own page component.

Is the YouTube podcast image also the episode card image?

Not necessarily. YouTube’s square podcast artwork belongs to its platform setup. A guest link page can use a separate image designed for its own card layout.