Revisiting index.html - Part 2

February 22, 2020

image-thumbnail

Part 1 covered the link tag and the script tag. This time we’re covering OpenGraph (og from here on), favicon, charset, and lang.

OpenGraph Protocol

og-logo

The OpenGraph Protocol (og for short) is Facebook’s spec for how to write an HTML document’s metadata. When you share a url, the title, thumbnail, and everything else you see get pulled together by that site’s bot, based on the og info it finds.

Share a web page’s url, and you’ll see something like this, though it varies a bit by platform.

thumbnail_example

So where does each piece actually come from?

Title

‘Revisiting index.html - Part 1’ is the content of the document’s <meta property="og:title">. Open the link and check dev tools, and you’ll see this.

title_example

description

That’s the content of <meta property="og:description">. In the screenshot above it’s been truncated with an ellipsis because the description ran long.

description_example

thumbnail(og:image)

This one’s the content of <meta property="og:image">. The catch with og:image is that its content has to spell out exactly what the bot needs, nothing vague.

<!-- ❌ An absolute path for the image gets treated as invalid og:image info -->
<meta property="og:image" content="/static/image.png">

<!-- ⭕️ A correct example -->
<meta property="og:image" content="https://so-so.dev/static/image.png">

On this blog, I use siteUrl to write it out like this.

Filling in this page info isn’t just about how it looks when a url gets shared. It also feeds into search results and pushes your SEO score up.

search_result

🤖 Favicon

Open any page in Chrome, and you’ll spot a small icon sitting right next to the tab’s title.

That’s the favicon.

favicon_example

Drop in an icon file with an ico or png extension and write this, and your site has a favicon.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Supporting IE means the ico format is non-negotiable.

An ico favicon can hold multiple sizes in one file, so you just pack them all in and go. A png favicon can’t do that, so you have to declare every size you need separately, like below.

<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

With a png favicon, here’s which one each browser actually picks:

Firefox and Safari go with whichever favicon is declared last.
Chrome on Mac reaches for the 32x32 favicon unless there’s an ico one available.
Chrome on Windows falls back to the ico favicon unless a 16x16 is declared first.
If none of the above are available, both Chromes take whichever is declared first, while Firefox and Safari take whichever is declared last. Chrome on Mac, in practice, actually ignores 16x16 entirely and only pulls in the 32x32 favicon when it needs to shrink one down for a non-retina display.
Opera just picks one of the available icons more or less at random.

so-so.dev also ships a whole set of files under the name apple-touch-icon, which cover things like the iOS home-screen shortcut icon and Safari bookmarks.

apple_touch_tag

👻 Invisible pieces that still matter

The head isn’t only home to things you’re meant to notice. Some of its most important pieces never show themselves at all.

charset

This sets the encoding a page will accept. Almost everyone uses utf-8, because it covers a huge range of characters: Korean, English, Japanese, and plenty more.

charset-1

Switch it to ISO-8859-1 for Latin characters instead, and the page above stops rendering correctly.

charset-2

lang

lang is the attribute that sets a page’s language. Below, in order: default, ko, ja (Japanese), and zh (Chinese). Same sans-serif font, but it renders noticeably differently depending on the language.

lang

Get the lang attribute right, and you avoid font-rendering issues down the line.

Source: Font-rendering problems you’ll run into once you ship a global service

Usually you set lang once, on <html> at the very top of the document, but if one specific tag needs a different language, you can scope it like this.

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

📝[TIP] Facebook and Twitter thumbnails

Thumbnails don’t render the same way everywhere. Let’s compare Facebook and Twitter.

You can preview exactly how any link will look, before you even share it, at these sites.

Facebook

Facebook supports two thumbnail shapes.

See Facebook’s image requirements and the Facebook link-sharing FAQ.

large (600 x 315 pixels or bigger)
small (anything smaller than 600 x 315)

If your thumbnail unexpectedly shows up small, open dev tools, grab the actual image behind og:image’s content, and check its dimensions. It’s almost certainly been compressed down below 600, for one reason or another.

Twitter

Twitter shows thumbnails as a Card, so on top of og:image you also need Twitter-specific meta tags.

Which image becomes the thumbnail (og:image)
How it’s rendered as a card (meta tag) Check Twitter’s card guide and you’ll see a <meta name="twitter:card"> tag is mandatory.

The example above has meta tag info but no og:image at all.

Platforms like Facebook or KakaoTalk will sometimes fill in a missing og:image “on their own,” but Twitter flatly refuses to show a thumbnail without one.