All tools

HTML <head> Generator

Solid baseline head tags for an HTML page.

<head> tags
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Site</title>
<meta name="description" content="A short description that shows in search results and social shares." />
<meta name="author" content="Your Name" />
<meta name="theme-color" content="#000000" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />

<meta property="og:type" content="website" />
<meta property="og:title" content="My Site" />
<meta property="og:description" content="A short description that shows in search results and social shares." />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/og.png" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Site" />
<meta name="twitter:description" content="A short description that shows in search results and social shares." />
<meta name="twitter:image" content="https://example.com/og.png" />

Solid baseline for the <head> of any HTML page. Includes character set, viewport, social share tags, theme color, and standard icons. Most static site generators and frameworks have their own ways to set these - this is for hand-rolled HTML.

About

Type title, description, theme color, and domain. The tool builds the &lt;head&gt; tags for charset, viewport, social shares, theme color, and standard icons.

How to use

  1. Fill in title, description, domain.
  2. Tick the social share blocks you need.

FAQ

Do I need all this?+

Charset and viewport are required. Description helps search. Open Graph and Twitter card matter if anyone shares your URL. Theme color shows up in mobile browser chrome.