Social previews and screenshots

The default tags

Every root document is served with generated tags in front of your HTML. Exported HTML pages get none, and no screenshot either.

Tag	Default
`og:title`	`𝗥𝗧𝗘𝗱𝗴𝗲.𝗻𝗲𝘁 🌐 ← ⚡ RTCode.io`
`og:image`	The screenshot of the deploy. The image URL changes with every deploy.
`og:image:width`, `og:image:height`	`1200` and `630`
`og:description` and `<meta name=description>`	The title of the playground, set in the Code dialog, or else the host name without the path.

Set the title with Set Title… (Alt+T / ⌥+T). See Deploying to RTEdge.net.

The screenshot

After each deploy, RTEdge.net takes a screenshot of route/ at a viewport of 1200 by 630 CSS pixels, at twice the scale. The image is a 2400 by 1260 PNG, sent as image/png and cached as immutable. Its URL changes with every deploy, so shared links pick up the new image.
The capture waits until the network requests of the page have settled, for up to 20 seconds, and retries a failed attempt. A page that keeps connections open, with polling, streams or WebSockets, may never settle.
The capture leaves out the browser's white default background, so areas that your page does not paint are transparent. Give :root a background to get an opaque card.

Try an opaque card

A background on :root fills the screenshot. This one follows the color scheme of the capture.

html

<style>
  :root { color-scheme: light dark;
          background:   light-dark(oklch(.98 0 0), oklch(.18 0 0)); }
</style>
<h1>Launch week</h1>

Experimental A deployment can be shot in forced dark mode. Set the developer flag D before you deploy: choose Developer: Edit Flags in the command palette (F1) and type D, or run Y.add('D') from io.eval.js. The screenshot and the default og:image then use the dark variant. Your page should follow a dark prefers-color-scheme for the result to look right.

Y.add('D')
await edge.save.limit({ message: 'Dark social card' })

Note: This feature is experimental. The developer flags are not part of the documented API and may change.

Preview the card

Output Settings has an og:image viewport preset, 1200 × 630 CSS pixels with the hint "Browser screenshot layout.", that shows your page as the capture will see it. See Output settings.

Your own tags

Write the tags yourself and the platform leaves its own out. A <meta> element in the first 8,192 characters of the served HTML, with property or name set to og:title, og:image, og:description or description, suppresses that generated tag. The image size goes with og:image. The check is a plain-text match on the served page, so a <meta> inside a <template> that stays in the page counts, while content removed with edge:remove or edge:redact, and exported files, do not. Quoted and unquoted values both match.

Try your own title, image and description

Keep these tags near the top of the page. The platform then omits its own og:title, og:image with its size, and description. It still adds og:description, from your title or the host name, unless you write that tag too.

html

<meta property=og:title content=Clock>
<meta property=og:image content=https://example.com/card.png>
<meta name=description content="An analog clock in one HTML file">
<title>Clock</title>

Tags for X and LinkedIn

For crawlers whose user agent starts with Twitter or Xbot, the page also gets twitter:card with summary_large_image, twitter:image, twitter:title, twitter:description, twitter:site (@RTCode_io) and twitter:creator (@Elefunc). The twitter:image points to a proxy of the og:image, and it is left out when you write your own og:image. Each of these tags is suppressed by one you write. See x.rt.ht, px.rt.ht and fp.cf.rt.ht. LinkedIn crawlers get the generated tags wrapped in <head>…</head>.

Per-link overrides

Experimental A link can override the generated tags without a new deploy. Add query parameters to the URL you share. They affect the generated tags only, never tags you write yourself, and they apply to root documents, not to files or workers.

o:t or og:title: The title. A double quote in it becomes an apostrophe. og:title wins over o:t.
o:d or og:description: The description. og:description wins over o:d.
o:i or og:image: The image URL. The size stays 1200 by 630. og:image wins over o:i.
o:i:dark: Uses the dark variant of the default screenshot. It has no effect when you give an image.

plain

https://name.rt.ht/?o:i:dark&o:t=Launch%20week&o:d=Try%20the%20new%20editor

Encode the values for a URL. RTEdge.net also reads the end of the query to choose a content type for the page, as Query parameters describes, so end a query that carries an image URL with a parameter such as &_.

?ogo returns only the generated tags, without your page, which is a quick way to check them. Add &.txt to read them as text. See Query parameters.

Note: These parameters are experimental and may change.

Protected pages

The tags are generated after the access check. A crawler that is not allowed to view a page restricted with edge:user gets the 401 or 403 page, not your tags, so such a page has no useful preview. See Restricting access.

Screenshot history

Every screenshot is archived with its deploy. Compare them in the screenshot mode of the version viewer; see Versions and Smart Undo. The * index shows the same image with a 📸 action, and the Recent Deployments drawer uses it as the thumbnail of each deploy.