Skip to main content

Redesigning the website: What's in <head>

First, let's examine what's in the <head> area of my current site. Note that whatever's wrapped in {{ }} tags is Craft CMS code.

<!DOCTYPE html>
<html lang="{{ craft.app.language }}">
<head>

  <!-- Internet Explorer? Well, won't need this! -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <!-- Next part is pretty standard. -->
  <meta charset="utf-8" />
  <title>{{ siteName }}</title>
  <meta http-equiv="Content-Type" content="text/html; charset={charset}" />
  <meta name="description" content="{{ craft.app.globals().getSetByHandle('siteInfo').siteDescription }}" />
  <meta name="keywords" content="Wade, Winningham, Wade Winningham, Updrift, Ruby on Rails, PHP, MySQL, Craft CMS, HTML" />
  <meta name="author" content="Wade Winningham" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />

  <meta name="referrer" content="origin-when-cross-origin" />

  <link rel="shortcut icon" href="/favicon.ico" />

  <link rel="manifest" href="/site.webmanifest">

  <!-- Links to rss/atom feeds for those who use RSS Readers -->
  <link rel="alternate" type="application/rss+xml" href="{{ url('feed.rss') }}">
  <link rel="alternate" type="application/atom+xml" href="{{ url('feed.atom') }}">

  <!-- Link to an Adobe webfont. I'll drop this in the redesign. -->
  <link rel="stylesheet" href="https://use.typekit.net/mbc8gkz.css">

  <!-- CraftCMS embedding the css file -->
  {% set stylesheet = rev('main.css') %}
  {% if stylesheet %}
    <link rel="stylesheet" href="/{{ rev('main.css') }}">
  {% endif %}

<!-- The rest of this is page view tracking for Matomo -->
<!-- which I host myself rather than use Google -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//updrift.com/matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '1']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
</head>

Referrer

Based on the info in this article on referrer best practices, one meaningful change I can make is to set my referrer policy to strict-origin-when-cross-origin for the reasons within that post.

While that seems to be the default for most browsers today, it's not guaranteed, so seems best to be explicit.

Viewport

The viewport value is stale. Been forever since I'd have set that. One item, the user-scalable=no can be bad as the documentation indicates it can cause accessibility issues. Which makes sense as it doesn't allow for scaling the screen for those with visibility issues.

So I'll reset that to a safer value of width=device-width, initial-scale=1 and can adjust it if necessary when I get more into the layout and design later.

Manifest

A site.webmanifest file isn't required, but nice for Android devices. So I'll keep it basic.

{
  "name": "Updrift",
  "short_name": "Updrift",
  "description": "A blog from Wade Winningham on tech, development, and building web sites and appliations.",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Favicon

I'm going to stick to the recommendations in this evilmartians.com post and use these lines.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

I already included the necessary bits in my site.webmanifest file above.

Summary

And there we have it. You can just view source on my site to check out the current status of it.

A bit of it is just the embed code for Matomo, but I may replace that with https://umami.is before I'm done. Hopefully it has less embedding code.