Menu

📰
0

OpenGraph, Twitter Cards, and article metadata in Astro

DEV Community: astro·Roger Rajaratnam·about 1 month ago
#LdQ7SBgU
Reading 0:00
15s threshold

Original post: OpenGraph, Twitter Cards, and article metadata in Astro Series: Part of How this blog was built — documenting every decision that shaped this site. When someone shares a link to a blog post, the card that appears in Slack, LinkedIn, or iMessage is determined by OpenGraph tags in the <head> . Get them wrong and the shared link is an unformatted URL. Get them right and it shows the post title, description, and a properly sized cover image. This is table stakes for any public-facing blog, but the implementation details matter — specifically, how to handle different content types (articles vs. pages), where to put canonical URLs, and how to avoid the common mistake of sharing a relative image path that produces a broken card. Centralising metadata in BaseLayout All meta tags are defined once in BaseLayout.astro . Every page passes what it needs as props; the layout handles the markup.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More