You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Once the app has a public (absolute) canonical URL, add an og:image and other Open Graph-related meta tags to create a social card.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><!-- ============ Core Open Graph ============ --><metaproperty="og:type" content="website"><metaproperty="og:site_name" content="Learn-Dev"><metaproperty="og:title" content="Learn-Dev — Learn programming"><metaproperty="og:description" content="A hands-on playground for learning programming."><metaproperty="og:url" content="https://learn-dev.ericbouchut.com/"><metaproperty="og:locale" content="en_US"><!-- ============ The image itself ============ --><!-- MUST be an absolute URL. PNG/JPG, not SVG. --><metaproperty="og:image" content="https://learn-dev.ericbouchut.com/card.png"><!-- HTTPS variant (some crawlers check it explicitly) --><metaproperty="og:image:secure_url" content="https://learn-dev.ericbouchut.com/card.png"><!-- MIME type, so the crawler doesn't have to sniff it --><metaproperty="og:image:type" content="image/png"><!-- Dimensions: lets platforms lay out the card before download --><metaproperty="og:image:width" content="1200"><metaproperty="og:image:height" content="630"><!-- Accessibility text for the image --><metaproperty="og:image:alt" content="Learn-Dev logo on a dark gradient background"><!-- ============ Twitter/X extension ============ --><!-- X reads og:* as a fallback, but these give a bigger card --><metaname="twitter:card" content="summary_large_image"><metaname="twitter:site" content="@ericbouchut"><metaname="twitter:title" content="learn-dev — Build in Public"><metaname="twitter:description" content="A hands-on playground for learning programming."><metaname="twitter:image" content="https://learn-dev.ericbouchut.com/card.png"><metaname="twitter:image:alt" content="learn-dev logo on a dark gradient background"><title>Learn-Dev - Learn programming </title></head><body><!-- page content --></body></html>
Open Graph requires an absolute URL, and link crawlers do not render SVG.
Here is some more context about this topic.
Note
When you share a link to your app on Slack, iMessage, LinkedIn, X, etc., those platforms generate a preview “card”.
This is usually a title, description, and a thumbnail image.
That image comes from a **<meta property="og:image">** tag in your page’s HTML (part of the Open Graph protocol).
You need a public, canonical URL first.
Open Graph image URLs must be absolute (e.g. https://learn-dev.ericbouchut.com/card.png), not relative (/card.png). Crawlers fetch the image from their own servers, so they can’t resolve a relative path — they have no base domain to attach it to. Until your app is deployed at a stable public address, you don’t have that absolute URL to point to.
Important
The image can’t be an SVG.
Most social/link crawlers (Facebook, LinkedIn, Slack, etc.) don’t render SVG for preview cards.
You’d need a raster format like PNG or JPG (recommended size ~1200×630px).
Once the app has a public (absolute) canonical URL, add an
og:imageand other Open Graph-related meta tags to create a social card.Open Graph requires an absolute URL, and link crawlers do not render SVG.
Here is some more context about this topic.
Note
When you share a link to your app on Slack, iMessage, LinkedIn, X, etc., those platforms generate a preview “card”.
This is usually a title, description, and a thumbnail image.
That image comes from a **
<meta property="og:image">** tag in your page’s HTML (part of the Open Graph protocol).You need a public, canonical URL first.
Open Graph image URLs must be absolute (e.g.
https://learn-dev.ericbouchut.com/card.png), not relative (/card.png). Crawlers fetch the image from their own servers, so they can’t resolve a relative path — they have no base domain to attach it to. Until your app is deployed at a stable public address, you don’t have that absolute URL to point to.Important
The image can’t be an SVG.
Most social/link crawlers (Facebook, LinkedIn, Slack, etc.) don’t render SVG for preview cards.
You’d need a raster format like PNG or JPG (recommended size ~1200×630px).