Search

Technical SEO: The Definitive Guide 2021

You might assume that anything ‘technical’ would come under the remit of your website developer, but you would be wrong. There are some technical aspects that you need to understand so you can successfully optimise your website for search engines. This post will cover all the 'behind-the-scenes' SEO techniques. Let’s dive straight in.



Creating high-quality and informative content is a wonderful foundation to build on but it is important that search engines can read it as well as humans.


Now I know what you’re thinking, I am not here to get technical and I feel a little overwhelmed. But there is no need! You don’t need to have an in-depth understanding of developer talk but it is worth grasping just so you can intelligently communicate with them about your website and how to make it better.


There are a lot of search engine optimisation jobs that you will be able to take on, but some will be out of your control and can only be completed by your website developer. To speak their language is like a gift because you will be able to correctly request the changes that you require and give them an explanation to why it is important. This should make them prioritise your changes and complete your work just that little bit quicker.


If you want to ensure that the pages on your website are optimised for both search engine robots and humans, then you will need to understand technical SEO. As this is quite a bulky subject, we have split this section of the course in to three chapters; how websites work, how search engines understand websites and how users interact with websites.


These principles are extremely important and must be understood if you want to optimise the technical structure of a website.


How websites work


Here we are going to delve a bit deeper into the journey of a new website. From the moment you purchase a domain name all the way to its rendered state in a search engine browser.


One very important step in the journey of a website is the rendering path it takes. This is the stage where a browser turns a website’s code into a viewable page. Knowing things like this is very important for search engine optimisers, here are a few reasons why:


- One of the most important ranking factors that Google and other search engines monitor is the page loading speed. There are small steps to take when building a new webpage to optimise the content and allow for faster load times.


- SEO elements that are applied to a web page using different software such as JavaScript might not get indexed straight away. In fact, Google tends to index this type of information during their second sweep of a website which might be after a few weeks. This means it will take your website longer to rank for certain things.


Image the loading process of a website is your journey to work. You get yourself dressed at home, gather your briefcase and lunchbox to take to the office, and then take the fastest route from your house to your place of work. Then imagine putting on just one of your shoes, take a much longer route journey to work, drop your briefcase and lunchbox into the office then head back home to get your other shoe.


Now use this story is a great analogy to describe inefficient websites that have avoided working on technical SEO. This section of the course will teach you how to understand where your website might be inefficient, what you can do to fix it and how these changes can positively affect your search engine rankings.


Before a website can be looked at, it needs to have some sort of meat on the bone. The first things to do are…


1. Purchase a domain name - For this step you don’t need to go to anyone, just a company that manages domain name reservations. One of the most popular services that we can personally recommend is GoDaddy. They have excellent rates and a UK-based call centre to help with answer any questions you might have.


2. Link your new domain name to an IP address - Although the internet has a lot of good points, it can’t understand names, such as “facebook.com” as website addresses without the inclusion of domain name servers which are more commonly known as DNS. You see, the internet uses a mixture of numbers to identify items on the web called an Internet Protocol, more commonly referred to as an IP Address. Humans on the other hand, well we like words and names. The DNS is one in the middle that links the machine-readable IP addresses to the human-readable names to make life easier for everyone.



How a website gets online


The best way to explain this is in step-by-step stages outlined below.


1. Webmaster requests domain – Thanks to the work by the DNS to link the website name to an IP address, a searcher can request a website by inputting the domain name directly into their browser or by clicking on a link to take them directly to the website.


2. Web browser request – Once step one is complete, it prompts the web browser to perform a DNS lookup to convert the domain name to its IP address. A request is then made by the web browser to the server for the coding structure of your website. Some popular examples are CSS and HTML.


3. Resources sent by server – After the server receives the website request, it sends the browser the website files to be assembled.


4. Web page assembly – At this point in the process, the web browser would have received the information from the server, however its not over yet. The browser must now put it all together and render the web page so a human can view it on their browser.


5. Any last requests – The browser may make some final requests for information from the server at this point. A web browser will only show a website once it is satisfied is has all the necessary code and it has been executed.


6. We are live – You can finally jump on to your chosen web browser and view your website in all its glory.


What makes up a website


A website is made up of code, the language of programmers. Huge portions of code are strung together to produce beautiful web pages.


The three most popular types of code are:


- CSS – Focuses on the colours, font, and other aspects of how a website looks.

- HTML – This is the written content on a website, including titles and the text body.

- JavaScript – Controls how a website behaves, and the level of interaction needed.


A deeper dive into CSS


For those who enjoy a pub quiz and take in as much general knowledge as possible, CSS is the acronym for “Cascading Style Sheets”. CSS controls how your website appears, what colours are used and how an individual page is laid out.


SEO Agency in Bridgend


There is a reason why CSS is in this course and that is because it is an important skill to understand for search engine optimisers. For example, building a web page to be more content-heavy rather than code-heavy can lead to better indexing and higher search engine rankings. It is important to get the balance right but don’t be afraid to make you website beautiful, you are building it for humans after all.


Using CSS can reduce the number of code-heavy elements you use on a web page and as a result will improve page loading speeds.


What HTML says about your website


HTML coding is all the text elements that appear on your website. This can include lists, paragraphs, and headings.


Much like CSS, HTML is very important to the lives of SEOs because you are basically using this code to tell search engines what your website is about. Google crawls HTML elements to understand what web pages contain and determine if a page is relevant to a search query. If it is, great news. If not, well there is more work to do around your content.


Using JavaScript on a website


When JavaScript arrived on the scene, everything changed for web developers. They already had HTML so they could publish their content, CSS then allowed them to make it look stylish and beautiful, then JavaScript allowed them to create dynamic, interactive websites that could engage visitors and keep them on their websites for longer.


Using JavaScript can bring your website to life which is one of the reasons it is important for SEOs. It can basically do anything to a web page, from creatively displaying banner adverts to introducing an email subscription pop up window, the possibilities really are endless.

There are some negatives surrounding JavaScript so don’t get too excited too early. By publishing a web page that has links, text and tags loaded on using JavaScript you are creating code that is invisible to a search engine robot initially.


Make sure you are using all three types of coding to effectively manage your SEO. Yes, you are building your website for humans, but if a search engine can’t understand what your page is about, you will find visitors are hard to come by.


How search engines understand websites


A search engine crawler determines the information on a web page. Imagine it was to crawl a 2,000-word article about how to fix a printer. How would it identify the different methods to fix it, which printer it is relevant to and who the author is? This is what schema markup is used for. It supports search engines in their quest to understand the specific pieces of information presented on a web page.


Schema markup is a method of organising and labelling content so search engines have a better understanding of the information and elements that appear on a web page. You might also have heard this referred to as “structured data.”


There are quite literally thousands of available schema markup’s available that search engines support. Google’s preferred scheme markup, that is also supported by Bing, is JSON-LD. Visit the schema.org website to view the full list of tools that can help you ‘markup’ and organise the elements on your web page.


A useful tool to test your markup for individual web pages is Google’s ‘Structured Data Testing Tool.’


Not only can a schema markup allow a search engine to better understand the content and elements on your web page, but it also enables special features to accompany your pages in search engine results. The phrase “rich snippets” is often mentioned in SEO and this is what they are. Pieces of information that answer queries in a certain way. For example:


- Carousels

- Recipes

- Sitelink search boxes

- Reviews


Before you head off to the next part of this section, here is some advice for you to take away with you in relation to successfully enabling schema markup.


- If you have published numerous duplicate web pages, search engines ask that you mark up each duplicate page with your structured markup, not just the canonical version.


- It is worth noting that you can use multiple types of schema markup on a web page. If you mark up one page element, like a specific product, you must also markup all other products on that page if there are any.


- Schema markup should reflect your page in an accurate way, don’t try and play tricks on search engines, they don’t appreciate it.


- Ensure that you use the most specific schema markup available to you when you’re categorising different page elements.


- Avoid marking up content that isn’t visible to human visitors. If you’re not sure about this one, we advise that you look at the Quality Guidelines published by Google. An example is ensuring that if you add review schema markup to a page, that the reviews are clearly visible on that page.


- Don’t skip corners and write reviews for your business. Reviews should be written by genuine customers.


- Publish updated and original content on your structured data pages.



Preferred web pages


Did you know that you can tell search engines which page is your preferred web page? When web pages, from the same website have the same or very similar content, it is difficult for search engines to determine which page should be put in front of searchers.


You can tell search engines all about your preferred pages and higher quality content with the rel=”canonical” tag or canonicalization.


Using a rel=”canonical” tag tells a search engine where it can find the master version of a piece of content. You’re basically saying, “Hello search engine old friend, do me a favour and don’t index this; index this other page instead.” This is useful when you are publishing repeat content with perhaps updates on it and you don’t want to appear as if you are purposely creating duplicate content.


Without a canonical tag, you risk indexing web pages separately and creating duplicates. For example, without telling Google that https://www.exampleseo.com is the preferred page, they will index https://exampleseo.com separately and it will appear as a duplication.

Duplicate content


It is common knowledge that search engines despise duplicate content and reward websites for having unique and valuable content. What we are trying to say is, even though you might have found a website that nobody ever visits that happens to have incredible content, do not use it.


Search engines will always endeavour to provide the best user experience so they will rarely show low-quality and more importantly, duplicate content. They will, however, show the canonicalized version so be sure to use the canonical tag where needed.


How website users interact


This part of technical SEO will cover a variety of topics that will further help you understand the technical aspects of search engine optimisation with a focus on visitor behaviour. You will recall that in the first section of this course, we addressed the fact that although SEO stands for search engine optimisation, that SEO is as much about humans as it is about search engines. That’s because search engines wouldn’t be what they are without human beings, in fact the core purpose of a search engines existence is to cater for searchers. It is important to understand that and will explain why Google rewards websites that provide an excellent experience for searchers, and why other websites might not rank very well in SERP’s despite having quality backlinks.


Bridgend Web Designer


When you understand what makes an excellent experience for searchers, and optimise your website accordingly, you will benefit from far better search engine rankings.


Mobile visitors


Depending on which segment you look at, it is fair to say that well over half of all website traffic comes from mobile devices. So that means your website should be formatted correctly and be easily accessible to mobile visitors. Without the correct formatting you risk losing huge portions of your audience which are very unlikely to ever return.


Let’s go back to the Spring of 2015, a new generation of lamb were born, trees had begun to show life and Google had rolled out a new algorithm that favoured mobile-friendly pages over non-mobile-friendly pages.


So how do you tick this box and ensure that your website is mobile-friendly? The short answer is – responsive web design. However, there are three main ways to configure your website for mobile users.


Responsive web design


A responsive web design is a website that is designed to fit the screen of multiple different devices and can understand what device it is being viewed on so it can alter its appearance accordingly.


Many web masters use CSS to build responsive web pages however if you are using a website builder such as Wix, then they will provide you with a mobile version of the website that you can edit and check that all of the elements are showing correctly.


We have all seen a non-responsive website and we all have the same reaction. You have to sit and double tap the screen to zoom in on segments of information while at the same time your frustration goes and before long you decide to leave the website and find an alternative.

A quick way to find out if your website or web pages are mobile friendly is to use Google’s ‘Mobile-Friendly Test’.


Accelerated mobile pages


Accelerated Mobile Pages or AMP as it is more commonly known is a method to deliver content to mobile visitors at a far greater speed than normal. It works by delivering content from its cache servers and uses an AMP version of HTML and JavaScript. It is worth noting that this is not the original website and only a cached version. You should always work to make your web pages load speed as quick as possible.


Indexing on mobile first


It is important to know the difference between mobile-friendliness and mobile-first indexing.


- Mobile-Friendliness – Makes your website compatible with mobile screens and benefits your search engine performance as it is an SEO factor looked at by Google.


- Mobile-First Indexing – Google crawls the mobile version of your web pages and indexes those before anything else.


Confused yet? You’re not the only one. Over the years the introduction of mobile-first indexing has produced major concerns for websites that lack similarity between mobile and desktop versions. This could be anything from showing alternative content to the navigation bar and even internal links to other pages.


The reason some SEOs were concerned about mobile-first indexing is because a mobile version of a website that has different navigation or links, will alter the way in which a search engine will crawl the website and how much link equity (link juice) is sent to other web pages.


Page speed


As a generation that doesn’t have any patience to wait for anything, it is so vitally important to make you website load speed lightning fast for both searchers and search engines. It’s something that we have learnt to expect in all walks of life and websites are no different.


How many times have you clicked on to a website and it taken longer than you wanted to load? What do you do next? You leave that website and find an alternative that loads faster.

Therefore, there is such a high emphasis on page speed and why it is a crucial aspect of technical SEO. There are a wide range of tools readily available across the web that can be used to optimise your web pages for speed. Here is a list of some of our favourites.


- GTMetrix

- Google’s Page Speed Tool

- Google’s Mobile Website Speed & Performance Tester

- Google Lighthouse

- Chrome DevTools


You’ll most likely find that the images on your web page are the main culprits for slow loading speeds. You should recall that during the On-Page SEO section of this course we discussed image compression, optimising ALT text and choosing the correct image format.


As well as what you learnt previously, there are other technical ways to optimise the way and speed in which images are shown to your website visitors. Here are some pointers on improving the delivery of images:


1. SRCSET – Responsive designs for images.


Adding the SRCSET code to an image allows you to have multiple versions of that same image which you can then specify which version should be shown of different devices. This piece of code is added to the <img> tag to provide unique images for specific devices.


This is a fantastic method to enhance the user experience by providing optimal images for different devices, not to mention the improvements it will make to your page loading time. A win-win you might say!


2. Image Loading – Using a low-resolution image before the main image.


Image loading can often be one of the most frustrating part of surfing the web because it slows your momentum. A method used by main websites to avoid this is something called ‘Lazy loading’. This is when you go to a web page and, instead of seeing a white space where an image will eventually load, you see a blurry version of the image. The blurry version remains there for a few seconds until the high-resolution image loads clearly.


The main benefit to this is obviously the improved page load speed but it also allows you to optimise your critical rendering path. So, what does that mean? In simple terms it means that your website will show low-resolution images that tells visitors that elements are loading, and they should stay where they are. For a deeper dive into this subject and how to implement it correctly across different platforms, we recommend that you use Google’s ‘Lazy Loading’ guidance tool in their developer’s section.



Grouping files together


When using such online tools as the Google Page Speed Test, it is likely that you will receive a recommendation to “minify resource”. By completing this action means you will condense a code file by simply abbreviating code names and removing things like spaces and line breaks on a web page.


Digital Marketing Agency in Bridgend


You might also come across the term “bundling” on your SEO journey and this just the word given to describe the process of combining a group of the same coding language into one single file. A great example of this is JavaScript files. These are usually large pieces of code which can impact the load speed of your web page, but there is a solution. By bundling multiple JavaScript coding and placing it into one larger file, you are reducing the amount of JavaScript files that a browser must process.


By bundling code together as well as minifying your web page, you are going to directly impact the speed in which your website will load. As a result of this, you will not only reap the rewards from search engines, but you will be improving the user experience.


Don’t forget about international audiences


If your services or products are meant for the international stage, then it is recommended that you understand the best practices in International SEO. Without optimising your website for international visitors then you may be missing huge segments of your target audience. There are two main practises to look at when building your web pages for an international audience.


- Country – If you want to target an audience in a specific country or multiple countries for that matter, then you should select a URL that makes it easy for you to do so. It is sometimes even worth considering the use of a country code top level domain (ccTLD) such as “.au” for Australia, or a generic top-level domain (gTLD) with a specific submain that targets a certain country, an example would be “examplewebsite.com/au” for Australia.


- Translation – If you want to target visitors that speak a variety of other languages then you need to show Google and other search engines that you have a copy of your website, translated in to other languages. This can be done by applying the “hreflang” tag.


That’s it for technical SEO


Congratulations on making it to the end of the Technical SEO section of this course. We have covered the basic principles of SEO, the research in to selecting the right keywords, how to compose engaging content that will help you rank, and now you have the knowledge to successfully optimise a website using both on-page and technical processes to further enhance the user experience and improve search engine rankings.


Now it’s time to jump straight into the next section where you will learn all about domain authority and building those all-important backlinks.