Drupal SEO audit and implementation of improvements

After the deployment of our Drupal development agency's new websites – droptica.pl and droptica.com – in mid-2016, we decided to improve a few things related to content optimisation, page loading speed and SEO. At the end of the year, we carried out a technical Drupal SEO audit, which enabled us to detect a certain number of shortcomings. While at it, we decided to implement the solutions recommended by Google. To conduct the audit we used, among many other tools, Google Webmaster Tools, LinkChecker, Alt Checker at http://www.contentforest.com and GTmetrix.

Below, you can find a list of changes that we decided to implement. The bigger and more extensive ones will be described later in this article.

1. Checking and changes in robots.txt
2. Adding and adapting of a sitemap.
3. Optimising the order and loading speed of js and CSS files.
4. Implementing Language href between PL and EN language versions.
5. Checking the new version of the website for broken and inactive links.
6. Verification of translations and correctness of links in PL and EN language versions.
7. Implementing SSL certificate for .com version.
8. Adding or changing meta tags, including canonical, shortlink and elimination of duplicate titles.
9. Systematising links by adding a trailing slash to all URLs.
10. Optimising added photos: naming, adding missing alt tags, optimising sizes and types, loading different photos depending on the device resolution.
11. Improving page loading speed through the use of feature systems.

Sitemap.xml

One of the first things that have been implemented in the area of SEO was the adaptation and implementation of a sitemap. We used the XMLsitemap module for Drupal 8, unfortunately, it is available only in alpha version, and we had to write our own patch for it. This module enabled us to create a sitemap.xml file for the entities and set their priority. A well-designed sitemap contains information about all the addresses available on the website, such as the date of the last update or the validity of the link and may also include data about the language version. By implementing it, we make it easier for indexing robots to do their job. You can read more about sitemaps at https://en.wikipedia.org/wiki/Site_map

Optimising the order and loading speed of js and CSS files

A common problem with page loading benchmarks is the loading speed of CSS and JavaScript files, which are usually downloaded from external sources. It is good practice to combine smaller CSS and JS files into few larger ones. You should also always remember to enable Aggregate CSS files and Aggregate JavaScript files in /admin/config/development/performance in the production environment. More advanced users can use the Advanced CSS/JS Aggregation module, which enables more advanced options. If possible, JavaScript files should be added asynchronously. Your browser will not have to wait for other elements until it downloads js files. If it is possible, you should load JavaScript at the end of the page instead of in the header. You should also avoid adding scripts globally if you use them only on a few subpages. This should significantly speed up website loading speed and allow your Google PageSpeed Tools to score much higher.

Implementing Language href

If you have a multilingual website, just like we do, Google recommends the implementation of the so-called Language href. What is this all about? It means adding links to alternative language versions, which allows for easier indexation of subpages. For example, you need to add the following in the HEAD section:

For www.droptica.pl/o-firmie/
<link rel="alternate" hreflang="pl" href="http://www.droptica.pl/o-firmie/" />
<link rel="alternate" hreflang="en" href="https://www.droptica.com/company/" />

For www.droptica.com/company/
<link rel="alternate" hreflang="en" href="https://www.droptica.com/company/" />
<link rel="alternate" hreflang="pl" href="http://www.droptica.pl/o-firmie/" />

Removing inactive links

After the deployment of a new website, the structure of links often changes as well. Before deployment, it is a good idea to save the old sitemap and compare it with the new one. If one of the URLs is missing on the new website, it is worth adding a new link to a similar content so as not to lose the link in Google. In Drupal, you can use the Redirect module for this purpose, and it has a number of useful functionalities. In the admin/config/search/redirect/404/ tab, you can see the list of all 404 pages that have been visited by users. For each 404, you can easily add a redirect - for example, 301 from a non-existent link to another one. Finding and editing old, broken links is another important thing. Such links could have been added on a blog, in news, and in many other places. In order to find them, you can use online tools such as http://www.brokenlinkcheck.com/ or desktop tools such as LinkChecker. Such links should be redirected if the address of the website changed or deleted if the link no longer exists.

Optimisation of photos on the website

One of the major changes that were implemented was the optimisation and improvement of display and loading speed of photos and graphic elements. Starting with the systematisation of file names, the image1.jpg logo2.jpg naming scheme has been replaced by a short description, and all missing ALT tags were added where necessary. One of the tools that can be used to do it can be found at http://www.contentforest.com/seo-tools/image-alt-checker.

We tried to compress the images as much as possible. If it was possible, we used compressed jpgs instead of pngs - the amount of space taken up by our website dropped dramatically. Interestingly, in some cases, the use of png gave much better results than going with jpgs. It all depends on the type of image. GTmetrix is a very useful tool for measuring things like these. If your site uses icons or other small elements, using SPRITE is a good practice. This allows your browser to stop sending queries for 100 files separately and download one large file containing all the icons instead, and CSS takes care of displaying them properly. You can read more about sprite at https://www.w3schools.com/.

The last thing worth mentioning about image optimisation is the use of srcset attribute. In HTML5, it allows you to physically load a different file if the user is viewing your website using their phone and a different one if they are using a computer with an HD screen. Instead of downloading a 4K image with a size of 2000 KB, the user will download a mini version adapted to mobile phones, with a size of, say, 120 KB.

An example from https://www.w3schools.com/

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Summary

The old adage says that nothing is forever in SEO, which is why such an audit should be carried out every few months in order to identify deficiencies and introduce new relevant standards. SEO activities on and outside the website usually bring results after a few weeks, if not months. This is perfectly visible when we look at the traffic on our website.

The page views for Droptica.com. The start of the new website, the process of changes in SEO and the amount of views in time are visible. Final effect: 45% more views in just 2 months.

A few weeks after implementation, we can see slight drops in the number of visitors coming to our website, perhaps due to some changes in positioning and the link structure. However, it can be noted that the implementation of SEO-oriented changes has yielded measurable results. After about 2 months, we have noticed a visible increase in the number of unique visitors. Taking May as the baseline, the number of visits in November/December increased by about 45% compared to the time before the deployment of the new website.

How about you? What tools do you use for SEO? Share them in our fanpage. If you want to learn more about Drupal 8 and other tools useful in designing web applications, like us on Facebook, where we share tutorials, guides and interesting industry facts, take part in DrupalDay and DrupalCamp! Also, don’t forget to check our blog - more new articles coming soon!