You might assume that anything ‘technical’ would fall under the area of your website designer, but you would be wrong. There are some technical aspects that you need to understand, so you can successfully optimize your website for search crawlers. This post will cover all the technical SEO you need to know. Let’s dive straight in:
Creating high-quality content is an amazing foundation to create your SEO campaign upon, but it’s important that search crawlers can read it as well as humans. As always you will have an accelerated edge with your SEO campaign if you have been keeping up with my previous posts here, here and here.
Now I know what you’re thinking, I’m not here to get technical, and I feel a little overwhelmed. But there’s no need! You don’t need to have an in- depth understanding of designer talk, but it’s 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 optimization capacities that you’ll be able to take on, but some will be out of your control and can only be completed by your website designer. To speak their language is like a gift because you’ll be suitable to properly request the changes that you demand and give them an explanation to why it’s significant. This should make them prioritize your changes and complete your work just that little bit quicker.
Nevertheless, then you’ll need to understand technical SEO, If you want to ensure that the pages on your website are optimized for both search engine robots and humans. As this is quite a big subject, we’ve decided this section of the blog into chapters.
These principles are extremely important and must be understood if you want to optimize the technical structure of a website.
How websites work
Here we’re going to claw a bit deeper into the journey of a new website. From the moment you buy a domain name all the way to its rendered state in a search engine browser.
One very significant step in the trip 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 effects like this is veritably important for search engine optimizers, here are a numerous reason why:
—One of the most significant ranking factors that Google and other search engines monitor is the page loading speed. There are small steps to take when erecting a new webpage to optimize 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 scrape of a website, which might be after a multitude of weeks. This means it’ll take your website longer to rank for certain things.
Imagine the loading process of a website is your journey to work. You get yourself dressed at home, gather your briefcase and lunch box to take to the office, and also 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 trip to work, drop your briefcase and lunch box into the office then head back home to get your other shoe.
Now, use this story as a great analogy to describe inefficient websites that have avoided working on technical SEO. This section of my blog session on SEO will educate 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 crawl rankings.
Before a website can be looked at, it needs to have some kind of meat on the bone. The first effects to do are …
1. Buy a domain name-For this step you don’t need to go to anyone, just a company that manages domain name reservations like us. One of the most popular services that we can personally recommend is NamesCheap. They’ve excellent rates and a UK- established call centre to help with answering 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, similar as “facebook.com”. You see, the internet uses a mix of numbers to identify items on the web called an Internet Protocol, mostly referred to as an IP Address. Humans on the other hand, well we like words and names. The DNS is 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 top way to explain this is in step-by-step stages outlined below.
1. Webmaster requests domain – Thanks to the work by the DNS to chain the website name to an IP address. A user can request a website by inputting the domain name directly into their internet browser search bar 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 also made by the web browser to the server for the code structure of your website. Some popular illustrations are CSS and HTML.
3. Resources transferred 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, still it’s not over yet. The browser must now put it all together and render the web page, so a human can view it on their device.
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’s satisfied is having all the necessary code, and it has been implemented.
6. We’re live – You can eventually jump onto 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 mainly 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 demanded.
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.
There’s a reason why CSS is in this post, and that’s because it’s a significant skill to understand for search engine optimizers. For illustration, designing a webpage to be more content-heavy rather than code-heavy can lead to better indexing and advanced search crawler rankings. It’s significant to get the balance right, but don’t be scared to make your business website beautiful, you’re constructing 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 also 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 headlines.
HTML is very important to the lives of SEO’s because you’re 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 applicable to a search query. However, great news, If it is. However, well there’s further work to do around your content, If not.
Using JavaScript on a website
When JavaScript arrived on the scene, everything changed for web designers. They formerly had HTML so they could publish their content. CSS also allowed them to make it look top-level and beautiful, also JavaScript allowed them to produce dynamic, interactive websites that could engage guests and keep them on their websites for longer.
Using JavaScript can bring your website to life, which is one of the reasons it’s important for SEOs. It can simply do anything to a web page, from creatively displaying banner announcements to introducing an email subscription pop up window, the possibilities really are endless.
There are some negatives regarding JavaScript, so don’t get too excited early. By publishing a web page that has links, text, and tags loaded on applying JavaScript, you’re creating code that’s invisible to a search engine robot initially.
Make sure you’re using all three types of rendering to effectively manage your SEO. Yes, you’re erecting your website for humans, but if a search crawler can’t understand what your page is about, you’ll find visitors are hard to come by.
How search crawlers understand websites
A search engine crawler determines the information on a web page. Imagine it was to crawl a- word doccument about how to fix a printer. How would it identify the different methods to fix it, which printer it’s applicable 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 system of organising and labelling content, so search crawlers have a better understanding of the information and elements that appear on a website. You might also have heard this referred to as “ structured data.”
There are literally thousands of available schema markup’s that search crawlers support. Google’s favoured scheme markup, that’s also supported by Bing, is JSON-LD. Visit theschema.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 crawler to better understand the content and elements on your web page, but it also enables special features to accompany your pages in search crawler display results. The expression “ rich snippets” is frequently mentioned in SEO, and this is what they are. Pieces of information that answer queries in a certain way. For illustration
— Carousels
— Recipes
— Site link search boxes
— Reviews
Before you head off to the coming part of this section, here’s 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 interpretation.
— It’s worth noting that you can use multiple types of schema markup on a webpage. However, like a specific product, you must also mark up all other products on that page if there are any, If you mark up one-page element.
—Schema markup should reflect your page in an accurate way, don’t try and play tricks on search crawlers, they don’t appreciate it.
— Ensure that you use the most specific schema markup available to you when you’re categorizing different page elements.
— Avoid marking up content that isn’t visible to natural visitors. However, we advise that you look at the Quality Guidelines published by Google, If not 100% sure about this one. An illustration is ensuring that if you add review schema markup to a page, that the reviews are easily visible on that page.
— Don’t skip corners and write reviews for your business. Reviews should be written by genuine clients.
— Publish updated and original content on your structured data pages.
Preferred web pages
Did you know that you can tell search crawlers which page is your favoured web page? When web pages, from the same website, have the same or very similar content, it’s difficult for search engines to determine which page should be put in front of searchers.
You can tell search crawler all about your favoured pages and higher quality content with the rel = ” canonical” tag.
Using a rel = ” canonical” tag tells a search crawler where it can find the master version of a piece of content. You’re principally 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’re publishing repeat content with possible updates on it, and you don’t want to appear as if you’re deliberately creating duplicate content.
Without a canonical tag, you risk indexing web pages independently and creating duplicates. For illustration, without telling Google that https//www.exampleseo.com is the preferred page, they will index https//exampleseo.com separately, and it’ll appear as a duplication.
Duplicate content
Its common knowledge that search engines despise duplicate content and reward websites for having unique and top-level content. What we’re trying to say is, even though you might have found a website that nobody ever visits that happens to have incredible content, don’t use it.
Search engines will always endeavour to give the top user experience, so they will rarely show low-quality and more importantly, duplicate content. They will, however, show the canonicalized interpretation, so be sure to use the canonical tag where necessitated to improve your traffic.
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 optimization, with a focus on guest behaviour. You’ll recall that in the first section of this post, we addressed the fact that although SEO stands for search engine optimization, that SEO is as equally about humans as it’s about search engines.
That’s because search crawlers wouldn’t be what they are without human beings, in fact, the core purpose of a search engine’s existence is to cater for searchers. It’s important to understand that and will explain why Google rewards websites that provide an excellent experience for visitors, and why other websites might not rank very well in SERP’s despite having quality backlinks.
When you understand what makes an exceptional experience for users, and optimize your website consequently, you’ll profit from far better search engine rankings.
Mobile Users
Depending on which segment you look at, it’s fair to say that well over half of all website traffic comes from mobile devices. So that means your website should be well catered to the mobile user and be fluently accessible to mobile and desktop visitors. Without the correct formatting, you risk losing huge portions of your niche, 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. Still, there are three main ways to configure your website for mobile users.
Responsive web design
A responsive web design is a website that’s designed to fit the screen of multiple different devices and can understand what device it’s being viewed on, so it can alter its aspect accordingly in order to display correctly.
Numerous web masters use CSS to make responsive web pages, however if you’re using a website builder similar to Wix. In this case, they will provide you with a mobile version of the website that you can edit and check that all of the elements are showing corectly.
We’ve all seen a non-responsive website, and we all have the same response. You have to sit and double tap the screen to zoom in on parts 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’s further generally known is a system 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’s worth noting that this isn’t the original website and only a cached interpretation. You should always work to make your origonal web pages load speed as quick as possible.
Indexing on mobile first
It’s 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 crawlers performance as it’s 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 preface 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 interpretation of a website usually has different navigation or links. This will alter the way in which a search engines will crawl the website and how important link equity (link juice) is sent to other web pages.
Page speed
As a generation that doesn’t have any tolerance to wait around for anything at all, it’s so vitally important to make your website load speed lightning fast for both searchers and search crawlers. Speed… It’s something that we’ve yet to tollerate in all walks of life, and websites are no different.
How many times have you clicked on to a website and it has taken longer than you wanted to load? What do you do next?… You left that website and found an alternative that loads faster right? 😉
Thus, there’s such a high emphasis on page speed and why it’s a pivotal 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’s 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 offenders for slow loading speeds. You should recall that during the On-Page SEO section of this blog over the past few weeks we discussed image compression, optimizing ALT text and choosing the correct image format.
As well as what you learnt previously, there are other technical ways to optimize the way and speed in which images are shown to your website visitors. Here are some pointers on perfecting the delivery of images for your website.
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 also specify which version should be shown on different devices. This piece of code is added to the sitemap to successfully optimize 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.
This is a fantastic system to enhance the user experience by providing optimal images for different devices, not to mention the advancements it’ll 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 frequently be one of the most frustrating part of surfing the web because it slows your momentum. A strategy 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 vague interpretation of the image. The vague interpretation remains there for a many 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 optimize your critical rendering path. So, what does that mean? In simple terms, it means that your website will show low-resolution images that tell callers that elements are loading, and they should stay where they are. For a deeper dive into this subject and how to implement it 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’s likely that you’ll receive a recommendation to “ minify resource”. By completing this action means you’ll condense a code file by simply abbreviating code names and removing effects like spaces and line breaks on a web page.
You might also come across the term “ speeding” on your SEO trip, and this is just the word given to describe the process of combining a group of the same coding language into one single file. A great illustration of this is JavaScript code.
These are generally large pieces of code which can impact the load speed of your web page, but there’s an answer. By bundling multiple JavaScript coding and placing it into one larger file, you’re reducing the amount of JavaScript files that a browser must reprocess.
By bundling code together as well as minifying your web page, you’re going to directly impact the speed in which your website will load. As a result of this, you won’t only reap the rewards from search engines, but you’ll be improving the user experience.
Don’t forget about international audiences
It’s recommended that you understand the top practices in International SEO, If your services or products are meant for the international platform. Without optimizing your website for international visitors, then you may be missing huge parts of your target audience. There are two main practises to look at when assembling 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 cherry-pick a URL that makes it easy for you to do so. It’s occasionally 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 subdomain that targets a certain country, an illustration would be “examplewebsite.com/au” for Australia.
– Translation – If you want to target visitors that speak a variety of other languages also, 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 Top-level technical SEO
Congratulations on making it to the end of the Technical SEO section of this blod post. So far we have covered the basic principles of SEO, the research in to choosing the right keywords, how to compose top-level content that will help you rank. Now you have the knowledge to successfully optimize a website using both On-page SEO and technical SEO processes to further enhance the user experience and improve search crawler engine rankings for yourself.
Stay tuned next week, when you’ll learn all about domain authority and erecting those important backlinks.
If you found this post ”On-Page SEO: The Full Guide. – Updated 2022” helpful or interesting, please feel free to give it a share or like it, so others may find value in this post.
We will be happy to advise you along with answer any questions you may have. Be it with Manual Social Media Management from our team of experts, at a lower cost and yet at a higher level of quality than any automation tools.
Or maybe you just need some professional website design or branding? we have you covered.
Book your FREE no-obligation quote today!
Our normal service area is Bridgend, however, we also cover Swansea, Port Talbot, Brynthethin, Sarn, Ogmore Vale, Maesteg, Llantwit Major, Cowbridge, Barry, Penarth, Dinas Powys and Cardiff.
We can also offer worldwide remote support, with competitive rates and friendly, professional service. We are here to help. Or simply start a live chat in the bottom right of this page and say hello 🙂
To our continued health and success
Eric – CEO Top Level Traffic – Web Design Bridgend.
