The head: search results, sharing and embeds
The parts nobody sees: how your page looks in Google, how your link looks in WhatsApp, how to attach CSS and code, how to send the right size picture, and how to put a map or a video in a page.
By the end you can
- Write a head that Google and social apps can use
- Control what people see when your link is shared
- Attach CSS and JavaScript in the right place
- Send phones a smaller picture, and embed a map or a video safely
Easier if you did first
step 1 of 5
A head that does its job
Remember the parcel from the first lab. The head is the outside: who it is for and what is inside. Nobody reading your page sees any of it, and almost all of it matters.
<title> is two things at once: the name on the browser tab, and the blue line people click in Google. Write it for someone scanning a list of results. Say what the page is, then who you are.
The description is the grey sentence under that blue line. Google does not always use it, but when it does, it is your advert. One sentence, about 25 words.
A canonical link is a sign saying 'the real address of this page is here'. Pages can often be reached by several addresses, with www and without, with a slash and without. Google treats those as different pages competing with each other. The canonical link settles it.
A favicon is the tiny picture on the browser tab and in bookmarks.
theme-color paints the browser's own bar on a phone to match your site. And a robots tag with noindex keeps a page out of Google, which you want on a thank-you page and almost nowhere else.
Write the head on the right. The preview will stay nearly empty, because none of this is visible. That is correct.
<title>Hosting and domains in Ghana | DrewsTech</title>
<meta name="description" content="Managed hosting, domains and email for Ghanaian businesses, from GHS 600 a year." />
<link rel="canonical" href="https://www.drewstechconsult.com/hosting" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#00ff9c" />What these words mean
- title
- The browser tab name, and the headline of your Google result. About 60 characters.
- description
- The sentence shown under your Google result.
- canonical
- The one true address for this page, when several addresses reach it.
- favicon
- The small icon on the tab, in bookmarks and on a phone home screen.
- theme-color
- Colours the browser's own bar on mobile.
- robots
- Tells search engines what to do. noindex keeps the page out of results.
Easy to get wrong
<title>Home</title> on every page
<title>Hosting and domains in Ghana | DrewsTech</title>
The title is the headline of your search result and the name of the bookmark. 'Home' tells a searcher nothing, so they click somebody else's link.
Copying one canonical link onto every page
Each page points at its own address
Then every page claims to be the home page, and the rest disappear from Google. This is a real way to delete your own site from search by accident.
What we check
- The title is specific, not one word
- There is a real description
- The canonical link has a full address
- A favicon is linked
- The browser bar colour is set