Use data-meta when your app already has metadata from your backend, cache, or server-side render.

Render from JSON

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

<link-metadata-preview
  data-meta='{
    "title": "Example article",
    "description": "A useful article rendered from cached metadata.",
    "url": "https://example.com/article",
    "image": { "url": null, "type": null, "width": null, "height": null, "size": null },
    "favicon": { "url": null, "type": null, "width": null, "height": null, "size": null },
    "og": {},
    "twitter": {},
    "safety_tags": []
  }'>
</link-metadata-preview>

When data-meta is present, the component renders it directly and skips its own API request.

Keep the original display URL

If your stored metadata uses a canonical URL but you want to display the original host, include data-original-url:

<link-metadata-preview
  data-original-url="https://short.example/post"
  data-meta='{"title":"Example","url":"https://example.com/post","image":{"url":null},"favicon":{"url":null},"og":{},"twitter":{},"safety_tags":[]}'>
</link-metadata-preview>

Update at runtime

data-meta is reactive. Replacing the attribute re-renders the card:

const preview = document.querySelector("link-metadata-preview");
preview.dataMeta = {
  title: "Updated title",
  description: "Updated description",
  url: "https://example.com/updated",
  image: { url: null },
  favicon: { url: null },
  og: {},
  twitter: {},
  safety_tags: []
};

Remove data-meta when you want the component to fetch fresh metadata from data-url.