Warningsocial.head-within-300kb

The head is too big for WhatsApp to read

Why it matters

WhatsApp reads only the start of a page when it makes a link preview, and says so: the <head> section "must appear within the first 300KB of the HTML". When a page inlines its stylesheets, fonts or a large block of script data into the head, </head> lands past that point, WhatsApp never reaches your sharing tags, and a link pasted into a chat shows as a bare address, while every other network previews it perfectly.

Source: WhatsApp link previews.

How to fix it

Put the sharing tags first, straight after <meta charset> and <title>, and move what is heavy out of the head: link stylesheets instead of inlining them, load fonts from files rather than as base64, and move large JSON blobs (__NEXT_DATA__, a page builder's state) to the end of <body>.

<head>
  <meta charset="utf-8" />
  <title>…</title>
  <meta property="og:title" content="…" />
  <meta property="og:image" content="https://www.example.com/share.png" />
  <!-- then everything else -->
</head>

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

They differ only in what the server answered:

412 KB into the page

WarningThe head ends 412 KB into the page. WhatsApp only reads the first 300 KB, so links pasted into a chat may get no preview.

fail-head-at-412kb

PassedThe head ends 1 KB into the page, within the 300 KB WhatsApp reads.

pass-small-head