Documentation

Learn LinkMetadata through task-focused tutorials, practical how-to guides, reference material, and conceptual explanations.

Tutorials

Start here when you are learning the product for the first time.

Build your first link preview - Add the LinkMetadata component to a page and fetch metadata from the API.

Complete specific tasks once you know the basics.

Customize the preview component - Change the card theme, layout, visibility, and styling.
Render pre-fetched metadata - Use data-meta to render cached or server-rendered metadata without another API request.
Use LinkMetadata with React - Add the preview component to React or fetch metadata for a custom React card.
Use LinkMetadata with Vue - Add the preview component to Vue or fetch metadata for a custom Vue card.
Use LinkMetadata with Svelte - Add the preview component to Svelte or fetch metadata for a custom Svelte card.
Use LinkMetadata with Astro - Add the preview component to Astro or fetch metadata during Astro rendering.

Look up component options, response fields, and API behavior.

Component reference - Attributes, CSS variables, and stable selectors for the preview component.
Metadata API reference - Request parameters, response fields, cache behavior, and errors for the metadata endpoint.

Understand how metadata extraction, caching, images, and safety tags work.

How LinkMetadata works - How metadata extraction, caching, images, and safety tags fit together.
Metadata extraction rules - How LinkMetadata chooses titles, descriptions, URLs, images, favicons, and raw tag maps.
Images and CORS - How LinkMetadata analyzes preview images, marks CORS safety, and proxies images for browser cards.
Safety tags - What safety tags mean, how they are produced, and how to use them in product decisions.