CHAPTER SIX: TECHNICAL SEO

Now that you've created great content based on good keyword research, it's critical to ensure that it's readable not only by people, but also by search engines!

You don't need to have a thorough technical understanding of these topics, but you should understand what they do so that you can speak intelligently about them with developers. Speaking the language of your developers is essential because you will almost certainly need them to carry out some of your optimizations. They are unlikely to prioritize your requests if they do not comprehend or recognize the significance of your request. When you create credibility and trust with your developers, you can begin to cut through the red tape that frequently prevents important work from being completed.

To be effective, SEOs require cross-team collaboration.

It is critical to maintain a positive relationship with your developers in order to successfully address SEO difficulties from both sides. Don't put off hiring a developer until a technical problem has poor SEO consequences. Instead, join forces for the planning stage in order to prevent the issues entirely. If you don't, you may end yourself wasting time and money later.

Aside from cross-team collaboration, understanding technical SEO optimization is critical if you want to ensure that your web pages are structured for both humans and crawlers. To that goal, this chapter has been broken into three sections:

How websites function
How search engines perceive websites
Users' interactions with websites

Because a site's technological structure can have a significant impact on its performance, it's critical that everyone understands these principles. It's also a good idea to share this section of the book with your programmers, content writers, and designers so that everyone participating in the site's development is on the same page.

How websites function

If SEO is the process of improving a website for search, SEOs must have a fundamental understanding of the thing they're optimizing!

We detail the website's journey below, from domain name purchase to fully rendered state in a browser. The crucial rendering path, which is the process by which a browser converts a website's code into a viewable page, is an important component of the website's trip.

Understanding this about websites is critical for SEOs for several reasons:

Page load speeds can be affected by the steps in this webpage assembly process, and speed is not only vital for keeping users on your site, but it is also one of Google's ranking considerations.
Certain resources, such as JavaScript, are rendered by Google on a "second pass." Google will examine the website without JavaScript first, then render JavaScript a few days to a few weeks afterwards, implying that SEO-critical elements added to the page using JavaScript may not be indexed.

Consider the website loading phase to be your journey to work. You get ready at home, gather your belongings for the office, and then take the shortest route from home to work. It would be absurd to put on only one shoe, drive a longer route to work, leave your belongings off at the workplace, and then return home to grab your second shoe, right? That's exactly what slow websites do. This chapter will show you how to diagnose where your website may be inefficient, what you can do to streamline, and the beneficial effects that streamlining may have on your rankings and user experience.

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

A domain name has been acquired. Domain names such as moz.com are obtained through registrars such as GoDaddy or HostGator. These registrars are just corporations that manage domain name reservations.
A domain name is associated with an IP address. Without the assistance of domain name servers (DNS), the Internet does not recognize names like "moz.com" as website addresses. The Internet employs a collection of numbers known as an Internet protocol (IP) address (for example, 127.0.0.1), but we prefer names like moz.com since they are easier for humans to remember. A DNS is required to connect such human-readable names with machine-readable numbers.

How a website is delivered from server to browser

The user requests a domain. People can now request a website by typing the domain name directly into their browser or by clicking on a link to the website now that the name has been linked to an IP address via DNS.
Requests are made by the browser. That web page request causes the browser to issue a DNS lookup request to translate the domain name to its IP address. The browser then sends a request to the server for the code used to create your web page, such as HTML, CSS, and JavaScript.
The server transmits resources. When the server gets a website request, it delivers the website files to the searcher's browser for assembly.
The web page is assembled by the browser. The browser has now received the server's resources, but it still needs to put them all together and create the web page so that the user can view it. The browser creates a Document Object Model (DOM) as it parses and organizes all of the web page's resources. When you right-click and "inspect element" on a web page in Chrome, you'll see the DOM (learn how to inspect elements in other browsers).
The browser makes the final queries. The browser will only display a web page once all of the page's necessary code has been downloaded, parsed, and executed, thus if the browser need any further code to display your website, it will make an additional request from your server at this time.
The website appears in the browser. Whew! After all of that, your website has been converted (transformed) from code to what you see in your browser.

Now that you understand how a website appears in a browser, let's look at what it's built of — in other words, the code (programming languages) utilized to create those web pages.

The three most prevalent are as follows:

HTML - The language of a website (titles, body text, and so on).

CSS - The appearance of a website (colors, fonts, and so on).

JavaScript's behavior (interactive, dynamic, etc.)

What a website says in HTML

HTML stands for hypertext markup language and is the foundation of a website. HTML defines elements such as headings, paragraphs, lists, and content.

Here's an example of a webpage and the HTML that goes with it:

HTML is essential for SEOs to understand because it is what is "under the hood" of every page they produce or work on. While your CMS is unlikely to require you to write your pages in HTML (for example, selecting "hyperlink" will allow you to create a link without having to type in "a href="), it is what you are modifying every time you add content, change the anchor text of internal links, and so on. Google crawls these HTML elements to establish the relevance of your document to a specific query. In other words, what's in your HTML has a significant impact on how your website ranks in Google organic search!

CSS: the design and look of a website

CSS stands for "cascading style sheets," and it is responsible for your web pages' fonts, colors, and layouts. Because HTML was designed to explain content rather than style it, the introduction of CSS was a game changer. CSS allowed web pages to be "beautified" without requiring the coding of styles into each page's HTML – a time-consuming operation, especially for large sites.

CSS components that SEOs should be concerned with:

Because style directives can be stored in external stylesheet files (CSS files) rather than your page's HTML, your page becomes less code-heavy, lowering file transfer size and increasing load times.
Browsers must still download resources such as your CSS file, thus compressing these can help your webpages load faster, and page performance is a ranking consideration.
Making your pages more content-heavy rather than code-heavy will improve indexing of your site's content.
Using CSS to conceal links and information can result in your website being manually penalized and deleted from Google's index.

JavaScript: How a Website Functions

HTML was used to create webpages in the early days of the Internet. When CSS was introduced, webpage content gained the power to be styled. With the introduction of the programming language JavaScript, websites could now have not only structure and aesthetic, but also be dynamic.

JavaScript has greatly expanded the possibilities for creating non-static web pages. When a user seeks to visit a website augmented with this programming language, the user's browser will run the JavaScript against the static HTML given by the server, resulting in a webpage that comes to life with some type of interaction.

You've undoubtedly seen JavaScript in action – you simply didn't realize it! This is due to the fact that JavaScript may do nearly anything to a page. It may, for example, generate a pop-up or request third-party resources such as adverts to display on your page.

Client-side rendering as opposed to server-side rendering

However, JavaScript can cause issues for SEO because search engines do not view JavaScript in the same manner that human visitors do. This is due to the difference between client-side and server-side rendering. The majority of JavaScript is executed in the client's browser. Server-side rendering, on the other hand, executes the files on the server and sends them to the browser in their completely rendered state.

Text, links, and tags that are loaded on the client's side with JavaScript rather than represented in your HTML are invisible to the code of your page until they are rendered. This means that search engine crawlers will not see what's in your JavaScript at first.

Google claims that as long as you don't prevent Googlebot from crawling your JavaScript files, they can render and interpret your web pages just like a browser, which means that Googlebot should see the same things as a user browsing a site in their browser. However, because of this "second wave of indexing" for client-side JavaScript, Google may overlook elements that are only available after JavaScript is performed.

Other things that could go wrong during Googlebot's process of rendering your web pages and prevent Google from knowing what's in your JavaScript include:

You've banned Googlebot from accessing JavaScript resources (for example, via robots.txt, as we taught in Chapter 2).
Your server is overwhelmed by the number of requests to crawl your content.
Googlebot cannot read the JavaScript because it is too complex or old.
JavaScript does not "lazy load" anything into the page until the crawler has completed and moved on from the page.

Needless to say, while JavaScript opens up a lot of possibilities for web page construction, if you're not careful, it might have major consequences for your SEO.

Fortunately, there is a technique to see if Google sees the same thing as your visitors. Use Google Search Console's "URL Inspection" feature to check how Googlebot sees your page. Simply enter the URL of your page into the GSC search bar:

Click "Test Live URL" from here.

When Googlebot has crawled your URL again, click "View Tested Page" to check how your page is crawled and rendered.

The "Screenshot" tab next to "HTML" displays how Googlebot smartphone renders your page.

In return, you'll see how Googlebot views your page as opposed to how a visitor (or you) could see it. Google will also offer you a list of any resources that they were unable to obtain for the URL you gave in the "More Info" page.

Understanding how websites work sets a solid basis for what comes next: technical adjustments to help Google better understand the pages on your website.

How search engines interpret websites

Consider yourself a search engine crawler looking for a 10,000-word article on how to bake a cake. How can you find the author, recipe, ingredients, or steps to baking a cake? Schema markup comes into play here. It enables you to provide more detailed classifications for what type of material is on your website to search engines.

Schema is a method of labeling or organizing your content so that search engines can better comprehend what items on your web pages are. This code gives your data structure, which is why schema is sometimes referred to as "structured data." The process of organizing your data is commonly referred to as "markup" because you are marking up your material with organizational code.

Google's recommended schema markup (announced in May 2016) is JSON-LD, which Bing also supports. Visit Schema.org for a complete list of the thousands of possible schema markups, or view the Google Developers Introduction to Structured Data for further information on how to apply structured data. After you've implemented the structured data that works best for your web pages, you can use Google's Structured Data Testing Tool to validate your markup.

Schema markup can enable unique features to accompany your pages in the SERPs, in addition to assisting bots like Google understand what a particular piece of content is about. These unique characteristics are known as "rich snippets," and you've most likely seen them in action. They include stuff like:

Carousels of Top Stories.
Reviewers gave it five stars.
Search boxes on Sitelinks.
Recipes.

Remember that employing structured data can help but does not guarantee the presence of a rich snippet. As the use of schema markup grows, further sorts of rich snippets will most likely be included in the future.

Some final words of wisdom for schema success:

On a page, you can utilize a variety of schema markup. If you mark up one element, such as a product, and there are other items mentioned on the page, you must also mark up those other products.
Follow Google's Quality Guidelines and avoid marking up content that is not accessible to visitors. If you add review structured markup to a page, for example, make sure the reviews are viewable on that page.
If you have duplicate pages, Google recommends that you use structured markup on all of them, not just the canonical version.
On your structured data pages, include original and updated (if applicable) material.
Structured markup should accurately depict your page.
Use the most specific sort of schema markup possible for your content.
The company should not write marked-up reviews. They should be genuine, unpaid company testimonials from real consumers.

Canonicalization informs search engines about your chosen pages.

When Google scans the same material on many web pages, it isn't always sure which page to index in search results. This is why the rel="canonical" tag was created: to assist search engines in indexing the preferred version of material rather than all of its duplicates.

The rel="canonical" element tells search engines where to find the original, master version of a piece of material. "Hey, search engine!" you're effectively saying. Don't index this; instead, index the source page." So, if you want to republish a piece of content, whether it's exactly the same or slightly updated, but don't want to risk creating duplicate material, the canonical tag is here to help.

Canonicalization ensures that any piece of unique content on your website has only one URL. Google suggests adding a self-referencing canonical tag on every page on your site to prevent search engines from indexing numerous versions of a single page. Without a canonical tag indicating which version of your web page is favored, https://www.example.com could be indexed independently from https://example.com, resulting in duplicates.

"Avoid duplicate content" is an Internet adage for a reason! Google prefers to reward sites that have unique, valuable material rather than content that has been copied from other sources and repeated over numerous pages. Because search engines seek to deliver the greatest possible user experience, they will rarely show numerous versions of the same information, instead displaying only the canonicalized version, or, if no canonical tag exists, whichever version they believe to be the original.

Due to sort and filter options, it is also highly typical for websites to have several duplicate pages. On an e-commerce site, for example, you might have faceted navigation, which allows users to filter down products to get exactly what they're looking for, such as a "sort by" function that reorders results on the product category page from lowest to highest price. This could result in a URL like this: example.com/mens-shirts?sort=price_ascending. Consider adding more sort/filter choices like as color, size, material, brand, and so on, and consider all the variations of your main product category page that would result!

Users' interactions with websites

In Chapter 1, we stated that, despite the fact that SEO stands for search engine optimization, SEO is as much about people as it is about search engines. This is due to the fact that search engines exist to serve searchers. This purpose explains why Google's algorithm rewards websites that give the best possible searcher experiences, and why certain websites, although possessing features such as powerful backlink profiles, may not perform well in search.

We can develop ideal search experiences by understanding what makes their online surfing experience optimal.

Providing a pleasant experience for your mobile visitors

Given that mobile accounts for well over half of all web traffic nowadays, it's safe to conclude that your website should be accessible and simple to use for mobile visitors. Google released an algorithm update in April 2015 that favored mobile-friendly pages over non-mobile-friendly pages. So, how can you make sure your website is mobile-friendly? Google favors responsive web design over the other two options for mobile website configuration.

Design that is responsive

Responsive websites are built to suit the screen of any device your visitors are using. CSS can be used to have a web page "respond" to the size of the device. This is perfect since it eliminates the need for users to double-tap or pinch-and-zoom to access the content on your pages. Not sure if your website's mobile-friendly? To confirm, try Google's mobile-friendly test!

AMP is an abbreviation for Accelerated Mobile Pages, and it is used to send material to mobile visitors at substantially faster speeds than non-AMP delivery. AMP is able to provide content so quickly because it uses cache servers (rather than the source site) and a unique AMP version of HTML and JavaScript.

Indexing for mobile devices initially

Google began transitioning domains to mobile-first indexing in 2018. This move has caused some confusion between mobile-friendliness and mobile-first, therefore it's important to clarify. Google crawls and indexes the mobile version of your web pages using mobile-first indexing. Making your website mobile-friendly is beneficial to users and your search performance, yet mobile-first indexing occurs irrespective of mobile-friendliness.

CHAPTER SIX: TECHNICAL SEO

Now that you've created great content based on good keyword research, it's critical to ensure that it's readable not only by people, but also by search engines!

To be effective, SEOs require cross-team collaboration.

How websites function
How search engines perceive websites
Users' interactions with websites