Svelte can render the LinkMetadata custom element directly. Use the API directly when you want your own markup.

Use the preview component

Load the component in app.html, a layout, or the page head:

<svelte:head>
  <script type="module" src="https://api.linkmetadata.com/component.js" async></script>
</svelte:head>

<link-metadata-preview
  data-url="https://example.com/article"
  data-theme="card"
  data-show-branding="false">
</link-metadata-preview>

For a reusable component:

<script>
  export let url;
</script>

<link-metadata-preview
  data-url={url}
  data-theme="card"
  data-show-branding="false">
</link-metadata-preview>

Fetch metadata yourself

Use the Fetch API when you want to handle loading, errors, and rendering in Svelte.

<script>
  import { onMount } from "svelte";

  export let url;

  let metadata = null;
  let error = null;

  onMount(async () => {
    const params = new URLSearchParams({ url });

    try {
      const response = await fetch(`https://api.linkmetadata.com/v1/metadata?${params}`);

      if (!response.ok) {
        throw new Error(`Metadata request failed with ${response.status}`);
      }

      metadata = await response.json();
    } catch (err) {
      error = err;
    }
  });
</script>

{#if metadata}
  <a href={metadata.url} target="_blank" rel="noreferrer">
    <strong>{metadata.title || metadata.url}</strong>
    {#if metadata.description}
      <p>{metadata.description}</p>
    {/if}
  </a>
{:else if error}
  <a href={url}>{url}</a>
{:else}
  <span>Loading preview...</span>
{/if}

In SvelteKit, move the same fetch call into a load function when you want metadata before the page renders.

The API is free to use and rate limited per IP address. For complete field details, see Metadata API reference.