LinkPreview

A link preview component.

This component creates a link preview displaying the link text, an optional description and an optional OG image. It is geared towards displaying internal links, e.g. to a blog post. But it can also be used for external links.

This component cannot fetch link metadata on its own due to a browser’s same origin policy. Reading link metadata needs to be done server-side by the SvelteKit application that consumes this component.

Props

A LinkPreview component has the following properties:

Prop	Required	Description
`value`	yes	Link meta data of type `LinkMeta`.
`class`	no	Additional Tailwind classes.

Examples

Svelte 5 is alive

Our biggest release yet.

Wij zijn het Algemeen Nederlands Persbureau - ANP

Wij zijn het ANP, beginnen altijd met de feiten en leveren sinds 1934 onafhankelijk nieuws aan media. Ontdek ook onze communicatiediensten.

Pricing to Encourage Use

We’re sharing the bigger motivation and business plan behind offering a free plan for cloud computing.

A beginner-friendly guide to view transitions in CSS

Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages.

<script lang="ts">
	import { LinkPreview } from '$lib/components/index.js';
	import type { LinkMeta } from '$lib/types.js';

	const links: LinkMeta[] = [
		{
			title: 'Svelte 5 is alive',
			href: 'https://svelte.dev/blog/svelte-5-is-alive',
			description: 'Our biggest release yet.',
			ogImageUrl: 'https://svelte.dev/blog/svelte-5-is-alive/card.png'
		},
		{
			title: 'Wij zijn het Algemeen Nederlands Persbureau - ANP',
			href: 'https://www.anp.nl/',
			description:
				'Wij zijn het ANP, beginnen altijd met de feiten en leveren sinds 1934 onafhankelijk nieuws aan media. Ontdek ook onze communicatiediensten.',
			ogImageUrl:
				'https://anp.fra1.cdn.digitaloceanspaces.com/thumbs/logo-blauw-wit-fea3b_1200x630.jpg'
		},
		{
			title: 'Pricing to Encourage Use',
			href: 'https://blog.railway.com/p/free-plan-part-two',
			description:
				'We’re sharing the bigger motivation and business plan behind offering a free plan for cloud computing.',
			ogImageUrl:
				'https://res.cloudinary.com/railway/image/upload/v1758565566/free-plan-two_hyoeqx.png'
		},
		{
			title: 'A beginner-friendly guide to view transitions in CSS',
			href: 'https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide/',
			description:
				'Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages.',
			ogImageUrl: 'https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png'
		}
	];
</script>

<div class="@container">
	<div class="grid grid-cols-1 gap-4 @lg:grid-cols-2 @4xl:grid-cols-3">
		{#each links as link (link.href)}
			<LinkPreview value={link} />
		{/each}
	</div>
</div>