Webutvikling

Search Engine Optimisation

NOTE: Hosting my website on the itstud.hiof domain resulted in my website (path) being inaccessible to crawlers and search results. To remedy this I hosted my site on github for the purposes of generating a sitemap and viewing search engine results. My sitemap and several URLs are, therefore, relate to the github domain.

Sitemap and Crawlers

View the sitemap of this website

First things first, I set out to index my site using Google's Search Command. Since my website is completely new and there aren't any other websites linking to my site, I made use of the Google search console. Firstly, I registered myself as owner of the URL. I then proceeded to instruct Google search console to index my site. I supplied google with a sitemap generated via xml-sitemaps.com, and crawlers were then instructed to index my site using the sitemap I provided. If my website hosted on the itstud.hiof domain was accessible to crawlers, I would create a robots.txt file restricting access to the 'Oblig 2', and 'Oblig 3' versions of my site, as they are only hosted for archive and reference purposes, and I wouldn't want them to be a landing page for a visitor as it would result in confusion, and they aren't optimised.

A screenshot of Google search console verifying my website
Google search console verifies my website, allowing for indexing, sitemap allocation, and crawling to commence. The search console also provides the owner with statistics relating to site visits, such as bounce rate, visitors, and visitor location.

Metadata

To increase hit rate and include my site on relevant searches I added additional metadata to supply search engines with more information they can make use of. By making use of the <meta> tag in the <head> of the HTML code, I can supply additional information about the website without changing the appearance or structure. Using the properties name and content I can create properties such as 'keywords', 'description', and 'author' with values. This information can then be used by search engines to generate a more accurate search result complete with a summary of the site. The sitemap can be used to also display additional subpages (this page is a subpage of index.html).

A screenshot of a Google result of my site, along with two versions of my metadata description.
After a few days of waiting for Google to index my site and for it to appear as a search result I finally got a glimpse of how Google perceives my site. Breadcrumbs were only on subpages, so I couldn't preview these results as Google was still processing my sitemap at the time of writing, but I wasn't happy with the 'snippet', or description. I went back to my code and edited it to be both more detailed and focused, while changing norwegian words to english. Even though I'm comfortable with the blend of 'norwenglish' on my site, I theorised that search engines would have a hard time distinguising the original meta description.

Microdata and Structured Data

Structured data such as microdata and JSON-LD allow search engines access to additional information about a web page, and subsequently process this data for use in search results. If appearing on relevant results is the goal, then the addition of structured data to a website will help immensely. One such example is a local plumbing business. With the addition of structured data, search engines can be supplied with crucial information such as geographic location. A local plumbing business may not need to appear on the front page of a generic search such as 'plumbing', but will absolutely appear on the front page of a more specific search such as 'plumbing in <location>'. Appearing on search results to a wide variety of people has little meaning to the local plumbing business if visitors to the web site don't contact and order a service.

Read more about microdata

Other

Overall, I interpreted the guidelines regarding SEO as boiling down to the following points:

  • Optimise text, especially links and buttons, to be more specific
  • Ensure that the website is easy to navigate, with a hierarchical sitemap often being a suitable choice
  • Follow standard practices outlined by the W3
  • Incorporate semantic markup whenever possible
  • Ensure that the site is responsive, and works with both mobile devices and others
  • Add accessibility to the site wherever needed. Examples include tab navigation, and additional ARIA attributes
  • Ensure that the site loads fast, avoiding such things as large video and image files if unnecessary
A performance test of my website using Google lighthouse
After optimising my website I decided to conduct a final test using Google lighthouse. I got the following results. Note the SEO score is flagged in orange. I decided to investigate the reason.
Flagged items relating to my website's SEO that could be potential problems
The reason for a lower score was the lack of 'href' property in an <a> tag in my nav bar. I decided to leave it as it is, since my website isn't actually going to be released to the public, but if I was to remedy the problem I would either change the tag to <span>, or create a href value directed to new page containing only links to that specific dropdown menu.