link-previews/examples/static.html at main · arfct/link-previews · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- The <title> is the last-resort preview title on every platform -->
  <title>Sales report for Q1 2025</title>
  <meta name="description" content="Revenue up 12% vs Q4 2024" />

  <!-- ============ Open Graph: the tags every platform reads ============ -->
  <meta property="og:title" content="Sales report for Q1 2025" />
  <meta property="og:description" content="Revenue up 12% vs Q4 2024" />
  <meta property="og:site_name" content="Example" />
  <!-- og:url should be the canonical URL of THIS page -->
  <meta property="og:url" content="https://example.com/reports/q1-2025" />
  <meta property="og:type" content="website" />

  <!-- Absolute URL required. 1200×630 is the safe large-card size.
       Width/height let the first-ever fetch lay out the card without
       downloading the image. Keep the file well under ~600 KB for WhatsApp. -->
  <meta property="og:image" content="https://example.com/chart.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <!-- Optional: inline-playable video on iMessage/Telegram/Discord.
       Must be directly fetchable — no auth wall.
  <meta property="og:video" content="https://example.com/demo.mp4" />
  <meta property="og:video:type" content="video/mp4" />
  <meta property="og:video:width" content="1280" />
  <meta property="og:video:height" content="720" />
  -->

  <!-- ============ Twitter/X ============
       Falls back to og:* for title/description/image; the card tag is the
       one that matters — summary_large_image gets the full-width layout,
       and Slack keys off it too. -->
  <meta name="twitter:card" content="summary_large_image" />

  <!-- ============ Icons: the small half of icon + thumbnail combos ============
       WhatsApp shows this small icon alongside the large og:image. iMessage
       only does in its social-post layout (next block); otherwise an image
       hides the icon. Both rels, same asset, ≥180×180 PNG. -->
  <link rel="icon" href="https://example.com/icon.png" />
  <link rel="apple-touch-icon" href="https://example.com/icon.png" />

  <!-- Discord embed accent color -->
  <meta name="theme-color" content="#0a84ff" />

  <!-- ============ iMessage social-post masquerade ============
       iMessage hides og:description and, beside an image, the icon.
       og:type=article plus this ActivityPub alternate link (href may be
       empty — presence is the signal) switches iMessage to its social-post
       layout: image, description, then icon beside the title. It needs an
       og:description, or iMessage falls back to the default layout. Other
       platforms ignore the link. On a static page you can't UA-branch, so
       either accept article as your og:type or serve dynamically. See
       docs/imessage.md.
  <meta property="og:type" content="article" />
  <link rel="alternate" type="application/activity+json" href="" />
  -->
</head>
<body>
  <h1>Sales report for Q1 2025</h1>
  <p>The page itself — crawlers never read past the head.</p>
</body>
</html>