Astro works well with LinkMetadata because you can either render the hosted web component or fetch metadata while Astro renders the page.

Use the preview component

Load the component script and add the custom element in any .astro page or layout:

---
const url = "https://example.com/article";
---

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

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

If many pages use previews, place the script in your shared layout instead of repeating it on every page.

Fetch metadata during render

Use the Fetch API in Astro frontmatter when you want to fetch once during server rendering or static generation, then pass the result to the component with data-meta.

---
const url = "https://example.com/article";
const params = new URLSearchParams({ url });
const response = await fetch(`https://api.linkmetadata.com/v1/metadata?${params}`);

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

const metadata = await response.json();
---

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

<link-metadata-preview
  data-original-url={url}
  data-meta={JSON.stringify(metadata)}
  data-theme="card">
</link-metadata-preview>

This avoids a second browser-side metadata request. The component still handles image rendering, fallback behavior, and later runtime updates.

Render your own Astro markup

For complete control, fetch metadata and render normal Astro HTML.

---
const url = "https://example.com/article";
const params = new URLSearchParams({ url });
const response = await fetch(`https://api.linkmetadata.com/v1/metadata?${params}`);
const metadata = response.ok ? await response.json() : null;
---

{metadata ? (
  <a href={metadata.url} target="_blank" rel="noreferrer">
    <strong>{metadata.title || metadata.url}</strong>
    {metadata.description && <p>{metadata.description}</p>}
  </a>
) : (
  <a href={url}>{url}</a>
)}

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