DEV Community

Tom Holloway 🏕
Tom Holloway 🏕

Posted on

Common HTML meta tags, link rels and header elements

If you're like me, then you may have at one time or another forgot what things you might need in your HTML for search engines and other information that hints to browser interactivity. It's usually a bit of a tedious task, and I always end up forgetting this information.

Meta Tags

The main ones to think about including would be: title, charset, viewport, description.

<meta charset="utf-8">
<title>NEW POST - helpful page title here</title>
<meta name="viewport" content="width=device-width; initial-scale, viewport-fit=cover">
<meta name="description" content="brief description (google truncates this under 160 characters, keep this long enough to be sufficiently descriptive and draw attention">

Social Media Meta

You don't necessarily need these meta tags at all, but they can be helpful for automating what a sample tweet might look like.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nyxtom">
<meta name="twitter:title" content="dev.to/nyxtom">
<meta name="twitter:description" content="Minimalist system for blah blah blah">
<meta name="twitter:image" content="https://static.libvar.dev/logo-card-light.png">

Similarly you can add the OpenGraph which can be helpful for mostly Facebook posts. These tags are as follows:

<meta name="og:title" content="libvar.dev">
<meta name="og:url" content="libvar.dev">
<meta name="og:description" content="Minimalist system for ...">
<meta name="og:image:type" content="image/png">
<meta name="og:image:width" content"1024">
<meta name="og:image:height" content="600">

Icons and Favicons

If you're looking to include icons for Apple devices you can use the apple-touch-icon to help improve what your page will look like on an iPhone or iPad.

<!-- third-generation iPad with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon-144.png">
  <!-- iPhone with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon-114.png">
  <!-- first- and second-generation iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon-72.png">
  <!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
  <link rel="apple-touch-icon-precomposed" href="favicon-52.png">
  <!-- basic favicon -->
  <link rel="shortcut icon" href="favicon.png">

Preconnect

If you add a preconnect link to the header, you can also inform the browser to establish connections to another domain, and you'd like it to happen as soon as possible. This might help resources load a bit quicker if you are (for instance) connecting to a static asset server somewhere.

<link rel="preconnect" href="https://static.libvar.dev">

Preload

Similar to preconnect you can inform the browser to fetch requests inside the HTML head that you will need very soon. I've seen this commonly used for things like fonts that might usually be specified inside css files for instance.

<link rel="preload" href="https://static.libvar.dev/font.woff2" as="font" type="font/woff2">

Conclusion

This isn't a definitive list of meta tags and header tags that are seen across tons of websites. Search engines don't rank based on any of this information and you can't really game it anyways using any of this information. The utility is in providing something descriptive for the user if your search result happens to come up. Loads of other meta tags aren't all that necessary and can bloat up your HTML. The most useful ones I've found are the ones I've listed above.

Discussion (0)