SEO TECHNICAL

Having a basic understanding of technology will help you build credibility with developers and optimise your site for search engines.

Now that you've created worthwhile content based on thorough keyword research, it's critical to make sure that search engines can also understand it.

Although you don't need to have a thorough understanding of these notions on a technical level, it is crucial to understand what these technological assets are used for in order to communicate effectively with engineers. It's crucial to be able to communicate with your engineers because you'll probably require them to complete some of your optimizations. If they can't comprehend your request or recognise its value, they are unlikely to give it priority. When you build confidence and trust with your developers, you may start to cut through the bureaucracy that frequently prevents important work from getting done.

Beyond cross-team collaboration, knowing technical SEO optimization is crucial if you want to make sure that your web pages are designed for both crawlers and users. In order to accomplish that, we've separated this chapter into three parts:

How websites function
how websites are interpreted by search engines
Customer behaviour on websites

Everyone needs to grasp these principles because a site's technological architecture can significantly affect how well it performs. Share this section of the manual with your programmers, content creators, and designers as well if you want to ensure that everyone working on a site's development is on the same page.

How websites function

SEOs must have at least a fundamental comprehension of the thing they are optimising if search engine optimization is the process of making a website search engine friendly!

We describe the website's development below, from domain name acquisition to fully rendered state in a browser. The essential rendering path, or the process by which a browser converts a website's code into a viewable page, is a crucial part of the website's trip.

For several reasons, it's crucial for SEOs to comprehend this information about websites:

The procedures taken to put together a webpage can have an impact on how quickly it loads, and Google takes speed into account when determining how to rank a site.
Some resources, like JavaScript, are rendered by Google on a "second pass." When SEO-important components are added to the page using JavaScript, it's possible that they won't be indexed because Google will first look at the page without JavaScript before rendering JavaScript a few days to a few weeks afterwards.

Consider the time it takes for a page to load as your daily commute. You get ready at home, get your belongings for the office, and travel directly to work using the shortest route. It wouldn't make sense to put on only one pair of shoes, travel a longer way to work, leave your belongings there, and then immediately go back home to grab the second pair. In some ways, that is what ineffective websites do. This chapter will show you how to identify potential inefficiencies on your website, how to make it more efficient, and the benefits that can come from doing so for your rankings and user experience.

A website must be put up before it can be accessed!

A domain name has been bought.

A domain name registrar like GoDaddy or HostGator is where you can buy domain names like moz.com. These registrars are merely businesses that oversee domain name reservations.

2. The IP address and domain name are related.

Without domain name servers, the Internet cannot recognise names like "moz.com" as website addresses (DNS). The Internet employs what is known as an Internet protocol (IP) address, which is a string of digits (for example, 127.0.0.1), but we prefer to use names like moz.com since they are simpler for people to remember. To connect those human-readable names with machine-readable numbers, we must employ a DNS.

A website's path from the server to the browser

User asks for a domain.

People can access websites by typing the domain name straight into their browser or by clicking on a link to the website now that the name has been connected to an IP address via DNS.

2. The browser sends out requests.

When a web page is requested, the browser sends a DNS lookup request to translate the domain name to the page's IP address. Then, the browser sends a request to the server for the HTML, CSS, and JavaScript that were used to build your website.

3. The server transmits resources.

The website files are sent to the searcher's browser for assembly when the server gets the request for the website.

4. The web page is built by the browser.

Although the resources have now been received from the server by the browser, the web page still needs to be rendered before the user can view it on their browser. The browser is building a Document Object Model as it organises and parses every resource on the online page (DOM). The DOM is what your Chrome browser displays when you right-click and select "inspect element" on a web page.

5. Final requests are made by the browser.

The browser will send an additional request to your server if it requires any additional code in order to display your website since it won't display a web page until all the page's required code has been downloaded, parsed, and executed.

6. The browser displays the website.

Whew! After all of that, the code for your website has been converted (rendered) into the visual representation you see in your browser.

Now that you're familiar with how a website looks in a browser, we'll concentrate on the components of a website, or the code (programming languages) used to create those web pages.

The three most common are:

What a website says in HTML (titles, body content, etc.)
CSS controls how a website looks (color, fonts, etc.)
How does JavaScript behave? (interactive, dynamic, etc.)

What a website says in HTML

Hypertext markup language, also known as HTML, is the foundation of a website. The HTML standard defines a number of elements, including headings, paragraphs, lists, and content.

Here is an illustration of a webpage and the HTML that goes with it:

Because HTML is what's "under the hood" of every page an SEO creates or works on, it's essential for them to understand. Even though your content management system (CMS) probably doesn't require you to write your pages in HTML (for example, choosing "hyperlink" will allow you to create a link without having to type "a href="), it is what you are changing every time you make changes to a web page, such as adding content, changing the anchor text of internal links, and so on. In order to establish how pertinent your document is to a given query, Google crawls these HTML components. In other words, how your website ranks in Google's organic search depends greatly on the HTML code you use!

CSS: A website's appearance

Cascaded style sheets, or CSS, is what gives your web pages their particular fonts, colours, and layouts. When CSS arrived on the picture, it changed everything because HTML was designed to explain content rather than decorate it. With CSS, online pages may be "beautified" without needing to manually code styles into each page's HTML, which would be time-consuming and difficult for large sites.

Google's indexing algorithm didn't start rendering web pages more like an actual browser and less like a text-only browser until 2014. By using CSS to conceal content and links, black-hat SEO techniques attempted to take advantage of Google's outdated indexing methodology in order to manipulate search engine rankings. This tactic of using "hidden text and links" is against Google's quality standards.

CSS elements that SEOs in particular should be concerned about are:

Style directives can now reside outside of your page's HTML code in external stylesheet files (CSS files), which reduces the amount of code on your page, speeds up file transfers, and makes it less code-heavy.
Compressing these files can speed up the loading of your webpages because browsers still need to download resources like your CSS file. Page speed is a ranking consideration.
Your site's content may be better indexed if your pages are more content-heavy than code-heavy.
Using CSS to conceal links and content may result in a manual penalty and removal of your website from Google's index.

JavaScript: The behaviour of a website

Pages on the Internet were created using HTML in the beginning. When CSS arrived, web content could now have a style of its own. When JavaScript emerged as a computer language, websites could now be dynamic in addition to having structure and aesthetic.

The construction of non-static web pages is now much easier thanks to JavaScript. When a user tries to visit a page that has been augmented with this programming language, their browser will run JavaScript against the static HTML that the server delivered, creating an interactive webpage.

JavaScript has undoubtedly been used by you; you may just not have realised it. This is due to JavaScript's broad range of page-modifying capabilities. For instance, it can produce a pop-up or ask for third-party materials like advertisements to appear on your page.

Server-side rendering as opposed to client-side rendering

However, because search engines don't see JavaScript the same way that site visitors do, JavaScript might cause some issues for SEO. That is due to client-side rendering as opposed to server-side rendering. A client's browser is where JavaScript is often run. On the other hand, with server-side rendering, the files are run at the server and sent to the browser after being entirely displayed.

SEO-important page components including text, links, and tags that are loaded using JavaScript on the client's end rather than being reflected in your HTML are hidden from view in your website's code until they are shown. This implies that, at least initially, search engine crawlers won't be able to see what is in your JavaScript.

According to Google, as long as you're not preventing Googlebot from crawling your JavaScript files, they should be able to render and comprehend your web pages in much the same way as a browser. This means that Googlebot should experience websites in much the same way as a user would when using a browser. Google may, however, overlook some components that are only accessible after JavaScript is executed as a result of this "second wave of indexing" for client-side JavaScript.

There are a few additional issues that could arise while Googlebot renders your web pages, preventing Google from comprehending the JavaScript on your pages:

You have forbidden Googlebot from accessing JavaScript resources.
There are too many requests to crawl your content on your server.
Googlebot cannot read the JavaScript because it is too complicated or obsolete.
After the crawler has finished with the page and moved on, JavaScript "lazy loads" the content into the page.
JavaScript, of course, offers a lot of options for web page design, but if you're not careful, it may also really harm your SEO.

Fortunately, there is a way to determine whether Google and your visitors are seeing the same thing. Use Google Search Console's "URL Inspection" feature to check how Googlebot sees your page. Enter the URL of your page into the GSC search field as follows:

Click "View Tested Page" to check how your page is being produced and crawled after Googlebot has revisited your URL.

When you select the "Screenshot" tab next to "HTML," your page will be displayed as it appears on a Googlebot smartphone.

You will then be able to compare how Googlebot views your page to how a visitor (or you) could see it. Google will also display a list of any resources they might not have been able to obtain for the URL you gave in the "More Info" page.

The second topic we'll cover, technological adjustments to improve Google's understanding of the pages on your website, builds on our understanding of how websites operate.

how websites are interpreted by search engines

Think of yourself as a search engine spider reading through a 10,000-word article on cake baking. How can you find the baker, the recipe, the ingredients, or the stages involved? Here's where schema markup is useful. You can use it to give search engines more detailed descriptions of the kinds of material on your page.

Schema is a means to categorise or arrange your content so that search engines can recognise specific components on your web pages. Schema is frequently referred to as "structured data" because it gives your data structure. Due to the fact that you are marking up your material with organisational code, the process of arranging your data is frequently referred to as "markup."

Google's preferred schema markup, JSON-LD, is supported by Bing and was revealed in May 2016. Visit Schema.org to see the thousands of available schema markups, and for more information on how to use them, see Google Developers' Introduction to Structured Data. You can test your markup using Google's Structured Data Testing Tool after implementing the structured data that best fits your web pages.

Schema markup can make it possible for supplementary features to appear alongside your pages in the SERPs in addition to assisting bots like Google in understanding the subject matter of a particular piece of content. You've undoubtedly already seen these unique characteristics, known as "rich snippets," in action. Examples include:

automobiles in Top Stories
Review indices
website search boxes
Recipes

Remember that utilising structured data can make a rich snippet more likely to appear, but it does not ensure it. As the use of schema markup grows, more sorts of rich snippets will likely be added in the future.

Final words of wisdom for successful schema:

A page may have several different kinds of schema markup.

The other products listed on the page must also be marked up if you mark up one element, such as a product, and there are other products listed there as well.

Don't mark up content that visitors can't see, and abide by Google's quality standards.

Make sure the reviews are actually viewable on the page if you include review structured markup, for instance.

If you have multiple pages, Google requests that you add structured markup to all of the duplicate pages—not just the canonical one.
Provide original and updated material on your structured data pages (if relevant).
Your page's structure should accurately represent the markup on it.

For your content, try to use the most particular kind of schema markup.

The company shouldn't write reviews that have been marked up. They must to be sincere, unpaid testimonials from actual clients.

By using canonicalization, you can inform search engines about your favourite pages.

Google occasionally gets confused about which page to index in search results when it crawls the same material across multiple web pages. To aid search engines in better indexing the chosen version of material rather than all of its copies, the rel="canonical" tag was developed.

You can instruct search engines where to get the original, master version of a piece of content by using the rel="canonical" element. You’re simply saying, "Hey search engine! Instead of indexing this, index this source page." Therefore, the canonical tag is here to save the day if you wish to republish a piece of material, whether exactly or slightly modified, but don't want to risk creating duplicate content.

A single URL is guaranteed to exist for each individual piece of content on your website through proper canonicalization. Google advises including a self-referencing canonical tag on each page of your website to stop search engines from indexing duplicate copies of the same page. Without a canonical tag indicating which version of your website is favoured, https://www.example.com and https://example.com may be indexed separately, leading to duplicate content.

A common Internet adage is "avoid duplicate material," and for good reason! Google favours sites with original, worthwhile content over those that repeatedly reuse material from other sources. Because they strive to give users the greatest possible search experience, search engines rarely display numerous versions of the same information. Instead, they only display the canonicalized version or, in the absence of a canonical tag, the version they believe to be the most likely to be the original.

It’s also fairly usual for websites to have several duplicate pages owing to sort and filter choices. An e-commerce site might, for instance, offer faceted navigation, which reorders results on the product category page from lowest to highest price and enables users to filter products to get precisely what they're looking for. Something like example.com/mens-shirts?sort=price ascending could result from this. Imagine all the variants your main product category page would have if you added more sort/filter choices like colour, size, material, brand, etc.

Customer behaviour on websites

Although SEO stands for search engine optimization, we stated that SEO is equally as much about people as it is about search engines. That is so because the purpose of search engines is to assist users. This objective helps to clarify why some websites, despite having attributes like strong backlink profiles, might not do well in search and why Google's algorithm favours websites that offer the best user experiences.

We can design experiences that maximise search performance when we know what makes their web surfing experience ideal.

Ensuring your mobile visitors have a great experience

Given that mobile devices now account for well over half of all web traffic, it is safe to conclude that mobile users should be able to access and easily browse your website. Google released an update to its algorithm in April 2015 that would give mobile-friendly pages the upper hand over non-mobile-friendly pages. So how can you make sure your website is compatible with mobile devices? Google advises responsive web design even though there are three main approaches to configure your website for mobile.

Adaptive design

Any type of device your visitors use will display properly on a responsive website. The web page can "react" to the device size using CSS. Because of this, visitors won't need to double-tap or pinch-and-zoom to access the text on your pages, which is excellent. Are your web pages responsive to mobile devices? To check if your website is mobile-friendly, utilise Google's tool!

AMP

Accelerated Mobile Pages, or AMPs, are used to send material to mobile users at rates that are far faster than traditional non-AMP delivery. Because it uses an unique AMP version of HTML and JavaScript and does not use the original website to deliver content, AMP is able to do it very quickly.

Indexing for mobile first

Google began converting domains to mobile-first indexing in 2018. It's helpful to clarify because that move caused some misunderstanding between mobile-friendliness and mobile-first. Google crawls and indexes your website's mobile version when you use mobile-first indexing. Although optimising your website for mobile devices is beneficial for both consumers and search engine rankings, mobile-first indexing occurs irrespective of mobile friendliness.

This has sparked some concerns for websites that don't have consistency between their mobile and desktop versions, such as when their mobile view displays different content, navigation, links, etc. For instance, a mobile site with different links would change how Googlebot (mobile) crawls your site and distributes link equity to your other sites.

Increasing page speed to lessen visitor annoyance

Google wants to provide searchers with content that loads instantly. We've grown accustomed to expecting pages to load quickly, so when we don't, we frequently return to the SERP in quest of a better, quicker page. Page speed is essential for on-site SEO because of this. By using technologies like the ones listed below, we can increase the pace of our web pages.

One of the primary causes of slow pages is images!

One of the main causes of websites taking so long to load is images. There are more technical approaches to optimise the speed and manner in which photos are displayed to your viewers, in addition to image compression, optimising image alt text, selecting the appropriate image format, and uploading image sitemaps. The following are some key techniques to enhance image delivery:

1. How to give the ideal image size for each device using SRCSET

You can indicate which version of your image should be used in various circumstances by using the SRCSET attribute, which enables you to have numerous copies of your image. To create specialised images for particular-sized devices, this piece of code is put to the HTML's img> tag, which is where your image is situated.

With the exception of photos, this is similar to the idea of responsive design that we previously covered!

This not only reduces the time it takes for photos to load but also offers a novel option to improve the on-page user experience by serving up distinct and suitable graphics for various device kinds.

2. Use lazy loading to display to visitors that a picture is loading.

When you visit a webpage, a fuzzy, lightweight version of the image or a coloured box in its place shows instead of the expected blank white space while the surrounding content loads. This is known as lazy loading. The image clearly loads in full resolution after a brief delay. This is something that the well-known blogging site Medium excels at.

The entire high quality version loads after the initial low resolution loading. Additionally, this aids in streamlining your crucial rendering process! In order to inform users that something is happening or is being loaded, you display a low-resolution teaser image while all of your other page resources are downloading.

Condensing and bundling your data will increase speed

Recommendations like "minify resource" are frequently made in page speed audits, but what does that actually mean? Minification reduces the size of a code file by deleting items like line breaks and spaces and, when possible, shortening the names of code variables.

Another term frequently used to describe increasing page speed is "bundling." Bundling is the process of combining numerous files using the same coding language into a single file. To cut down on the number of JavaScript files needed by a browser, for instance, several JavaScript files could be combined into one larger file.

You'll speed up your website and use fewer HTTP (file) requests if you minify and bundle the files required to build your web page.

Enhancing the experience for visitors from other countries

To deliver the most appropriate experiences, websites that cater to audiences from different nations should get familiar with international SEO best practises. Without these improvements, visitors from other countries might have trouble locating the version of your website that is designed with them in mind.

A website can be made more international in two ways:

Language

Websites that cater to speakers of various languages are said to as multilingual. To let Google know that your page offers translations for additional languages, these websites should use something called a hreflang tag. study up on hreflang.

Country

Multi-regional websites are those that cater to users from different nations, and these sites should use a URL structure that makes it simple to target their domain or individual pages to particular nations. For example, using a generic top-level domain (gTLD) with a country-specific subdomain like "example.com/ca" for Canada or a country-specific top-level domain (ccTLD) like ".ca" for Canada.

Technical SEO: The Beginner's Guide to SEO