ModX tips: the HEAD section of your site
published on
The purpose of the short ModX tips series is to help users new to ModX to get a basic site set up and available online.
This article explains how to create the HEAD section of your web pages. There will be a number of other things that can be added to what is shown below but we will start with the basics for now.
An initial HEAD section for your web site
I show an example of how to set up your HEAD section in ModX below.
Remember that you could add this to your template(s) directly. If you only use one template this should work fine.
Ideally you would want to create a new chunk and add a reference to it at the top of your web page. This gives you the freedom to add more templates easily and re-use code multiple times.
On to the code
<head> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="description" content="A description of your site goes here."> <meta charset="utf-8"> <title>[[*pagetitle]] | [[++site_name]]</title> <base href="[[!++site_url]]"> <link rel="canonical" href="[[~[[*id]]? &scheme=`full`]]"> <link rel="icon" type="image/jpeg" sizes="32x32" href="/assets/img/32.jpg"> <link rel="icon" type="image/jpeg" sizes="512x512" href="/assets/img/512.jpg"></head>
Why put this in the HEAD section of your site?
Let's look at this line by line
The viewport line supports the responsiveness of the site and combines with the rest of the code to make sure your site responds to the screen size.
The description line sets up the description that will be shown in search engines under the site name.
Charset sets the default character set that web pages will use. The setting above is actually the same as the default so it could be left out.
The title line displays the page title followed by a pipe (|) followed by the name of the site. This can obviously be modified to suit your own needs.
The next line, base href, will set the address of the main page. This is used along with any relative paths to ensure all links to resources go to the correct places.
Adding the link rel="canonical ... line makes sure that ModX (and your site) tells search engines which is the main page where this content will be found. The code above will be useful when there may be a number of pages (which all look different to search engines) but which all contain similar content.
For example, mysite.com/home.html and mysite/home.html?page=2 likely contain the same content. However, as far as a search engine is concerned, these are two different pages. The canonical tag effectively strips the query from the URL so you don't get a lot of duplicates showing up and the main page should get the SEO benefits.
The next two lines add links to image files which can be used to display icons for your site.
Conclusion
Using the above code should help you to get the HEAD section of your site set up and working quickly.
Remember that the best way to do this is to add it as a chunk which can be inserted into multiple templates. If you need to change your code you will only need to do it once.
It is also important to remember that this is only a start. There will no doubt be lots of other things you may want to include in your HEAD section such as Facebook and Twitter descriptions or even tracking code.