The head, meta tags and link previews

The head is the invisible part of an HTML page: encoding, viewport, title, description and the Open Graph tags that chat apps build link cards from.

What you can’t see

Open any page and press Ctrl+U (in most browsers that is “view source”), then look at the top. In the <head> element there are dozens of lines you never see on screen. They are facts about the page, meant for the browser, for the search engine, and for the chat app you pasted a link into. A good head is invisible while all is well, and obvious when it is missing: the link looks bare, the page is tiny, accented letters have turned into question marks.

By the 2014 era a site was no longer just “a page in a browser”. It was shared on social networks and in chat apps, viewed on a phone, found in search. And the head says something different to each of those readers.

What is required

The encoding. <meta charset="utf-8"> is the first line of the head. It says how to read the bytes of the text. Without it, curly quotes and accented letters can turn into garbage, as they often did in the 1990s. UTF-8 is an encoding big enough for every language, and it is used almost everywhere now.

The viewport. <meta name="viewport" content="width=device-width, initial-scale=1"> tells a phone that the page is as wide as the screen. Without it the phone assumes the site was built for a screen about 980 pixels wide and shrinks it whole: tiny text, and responsive layout doesn’t work. Apple introduced this line for the first iPhone in 2007, and every browser reads it now.

The title. <title> is what you see on the tab, in bookmarks and as the headline of a search result. The rules: every page gets its own, the main point comes first, about 60 characters (search engines cut it off after that), and the project’s name goes at the start or the end, but never a bare “Home”.

The description. <meta name="description" content="…"> is the text a search engine may show under the title. It doesn’t affect the page’s position directly, but it affects whether a person clicks. Write it for a person: who you are, who it is for, what they get. 50 to 160 characters. The search engine may swap your text for its own if that suits the query better.

The canonical address. <link rel="canonical" href="https://…"> tells a search engine which of several addresses for one page is the main one (with www and without, with a trailing slash and without).

The icon. <link rel="icon" href="…"> is the small picture on the tab. An SVG icon is good because it stays sharp and weighs a few hundred bytes.

Check yourself: what happens without a viewport?

The phone assumes the screen is about 980 pixels wide and shrinks the page. The text gets tiny, and the responsive styles don’t apply.

How your link looks

When you paste a link into WhatsApp, Slack, iMessage or LinkedIn, the app visits the page itself and builds a card: a picture, a headline and a couple of lines. Where does it get them? From Open Graph tags. Facebook devised this convention in 2010, and almost everyone reads it now (in Russia that includes Telegram and VK). The tags look like <meta property="og:…" content="…">:

• og:title is the headline of the card;
• og:description is the caption;
• og:image is the picture, usually 1200 × 630 pixels; the address must be complete, with https://, because someone else’s server builds the preview;
• og:type is the kind of page, most often website;
• og:locale is the language and country, written like en_GB or en_US;
• og:url and og:site_name are the address and the name of the site.

With no Open Graph tags, the app takes whatever it finds: the page title and the first picture it comes across, or nothing at all. The result can be embarrassing. Apps also remember a preview for a long time, so after a fix the new card doesn’t appear at once.

Play with how one page looks in three places. The length is cut differently in each, so the whole point has to fit at the start.

title description Who you are, who it is for and what a person gets. One or two sentences with the words people search for. og:title (if empty, title is used) og:description (if empty, description is used) og:image

Browser tab

Project name: what you…

Search result

riverbend.example

Project name: what you do

Who you are, who it is for and what a person gets. One or two sentences with the words people search for.

Length: title 25 (about 60 show), description 105 (about 155 to 160).

Link in a messenger

image

riverbend.example

Project name: what you do

Who you are, who it is for and what a person gets. One or two sentences with the words people search for.

Check yourself: why must the og:image address be complete?

Because the preview is built by someone else’s server, which doesn’t have your page. A relative address would tell it nothing.

Practice

Fill in the head of your page. Take the title and the description from your brief: it has everything you need (who you are, who it is for). If you don’t have a real site address yet, use the placeholder https://riverbend.example/: it keeps the addresses in the tags complete.

Notice that the tab icon and the preview image won’t load without their files, because the preview doesn’t go onto the network. Your job right now is to write the right tags.

What was wrong with 2014

The description and keywords tags used to be written “for the search engine”: <meta name="keywords"> was stuffed with a hundred words. Search engines stopped counting it long ago (Google said so in 2009), and today the tag is just clutter. Link previews were random at first too: every social network invented its own tags until Open Graph became the common language. Today the rule is simple: write for the person who will read the card, not for a robot.