Learn How to Optimize Your Site with Technical SEO

We’ve already covered in the previous chapter, how you can create quality content that would give your audience solutions to their queries or provide them with relevant information, now it’s time that we move towards tackling the search engines as well! 

As a business owner, it’s not required for you to have a deep knowledge of these technical concepts, however, it’s essential that you at least understand some part of it or have a basic knowledge to be able to communicate productively with the developers. If you want your SEO to run smoothly, you’re going to have to interact with the developers at some point or other. You need to be able to speak their language if you want them to understand your query and then resolve it promptly. You must create a harmonious and productive relationship with the developers for your SEO to run without any bumps. 

Have a Cross-Team Support in Place 

You must establish transparency and a healthy relationship with the developers so that SEO challenges can be tackled successfully from both ends. You do not have to wait for a problem to arise or a technical issue that needs to be resolved for you to initiate a conversation with the development team. Instead, focus on building an active and healthy relationship from the very beginning so that there’s harmony between the team and a problem can be resolved quickly whenever it arises. 

However, you must understand the technical side of SEO even beyond establishing cross-team support. Technical SEO is a very huge and important part of SEO if you want your content to be understandable by both- humans and search engine crawlers. To tackle this important topic, we’ve divided this chapter into three major parts- 

1. Understanding how websites work. 
2. Exploring how search engines understand websites. 
3. How users interact with websites. 

Before you start building your website, you need to understand how it works, what purpose it serves, how a search engine might perceive it, and its overall technical structure. Having this information would not only help you communicate better, but it also affects the performance of your site in the long run. Moreover, you can go ahead and share this chapter of our guide with different teams working on your sites such as content writers, programmers, and designers so that they can also get a clear understanding and everyone is on the same page. 

So, now that we’re clear on why we need to understand the technical side of website building, let’s go ahead! 

Understanding How Websites Work

Search engine optimization or SEO is the process of optimizing a website so that search engines can locate it and rank it higher on search engine results pages (SERPs). So, you must have a basic understanding of how a website works if you want to optimize it for SEO. 

In this article, we’re going to focus on a website’s journey from start to finish. Since the domain name is purchased till its fully rendered state in a browser. The rendering path is an essential component of the website’s journey where the website browser turns a website’s code into a message that’s understandable by human eyes. 

There are a lot of steps in the website assembly process that affects the loading time of your website page. And as we’ve already established in earlier chapters, your website’s load time or speed is very important for keeping users on your site and is also a factor that Google considers while ranking any site. 

Imagine that your website loading process is similar to how your commute to work. If a website is not streamlined and is inefficient, then it would be similar to you traveling to work wearing one show, dropping it off at work, then traveling back home to get your other shoe. This makes the whole process redundant and inefficient. In this chapter, we’re going to try to understand the whole website loading process so that you can learn to streamline your website, which later would also affect your website’s SEO and ranking positively. 

You Need to Set Up a website before it Can Be Accessed! 

1. Purchase a domain name: Before all else, the first thing that needs to be done is purchasing a domain name (such as example.com) from a registrar such as HostGator or GoDaddy. These registrars work as an organization that manages the registration of domain names.
2. Link the domain name to IP address: Without the help of a domain name server (DNS), the internet wouldn’t understand things such as domain name or example.com. Internet essentially looks at things in binary form and understands a series of number or Internet Protocol (IP) address when it comes to a website. However, the website is displayed as example.com so that it’s easier for humans to read, understand, and remember. Thus, once you’ve purchased a domain name (human-readable), you need to link to an IP address (machine-readable numbers) with the help of a DNS. 

How a Website Travels from Server to Browser 

Now that your domain name is successfully linked to IP address via DNS, let’s see how your website gets from server to browser: 

1. The user places a request for domain: A user can simply place a request for a website by typing the domain name (example.com) directly into their browser or can simply click on the link to the website. 
2. The browser makes a request: The request that the user has placed prompts the browser to place a DNS lookup request that converts the domain name to its IP address. Once it’s done, the browser makes a request to the server for your website’s code (such as HTML, CSS, and JavaScript code). 
3. The server sends the resources: Once the server has received a request for website code, it responds by sending the website files so that they can be assembled in the searcher’s browser. 
4. Browser assembles the web page: Now that the browser has received resources from the server, it needs to assemble the resources and render them so that the user can view them in their window. As the browser is parsing and assembling the resources, it’s creating a thing called Document Object Model (DOM). (The DOM is what appears on your screen when you click on ‘inspect element’ in a web browser.)
5. A final request is placed by the browser: A browser will only show a web page once it has gathered all the necessary code related to that page and it’s been downloaded, parsed, and executed. So, this final request placed by the browser is a way of making sure that all the necessary code has been assembled. 
6. Finally, the User’s website appears in the browser: Your code is finally rendered and it appears in form of your requested web page in the browser. 

What Components Make a website? 

Now that we’ve covered how a website appears from a server to a browser, let’s deduce what components make a website. In other terms, let\’s discuss the programming languages that are used to construct a web page- 

Three of the most commonly used programming languages that construct a web page are- 

• HTML (Content & Structure)– this part handles what a website says (such as Headings, Paragraphs, Titles, Lists, Body Content, etc.)
• CSS (Presentation)– CSS handles how a website looks (Font, Colour, Background Colour, Border, etc.) 
• JavaScript (Behaviour & Action)– JavaScript handles how a website behaves (Dynamic display, Widgets, User interaction, etc.) 

1. HTML- What a Website Says 

HTML or Hypertext Markup Language serves as the backbone of a website. It takes care of the content and structure of a website and conveys what a website means to say. 

HTML handles and defines elements such as headings, paragraphs, titles, lists, body content, and more. Here’s an example of what an HTML code to its corresponding web page looks like: 

HTML plays an important role when it comes to SEO. HTML takes care of the elements that live under wraps or what makes a website, and it is important for SEO to understand any page that you create or work on. And while your CMS wouldn’t necessarily require you to write your pages in HTML, it is what’s happening behind the scenes whenever you place a command such as changing the anchor text of internal links, adding any content, and more. 

Moreover, whatever’s on your HTML page plays an important role in how your web pages would rank in Google’s organic search. Whenever a user places a request in the Google browser, the crawlers scan your HTML elements to see how relevant your content is to that particular user query, thus if you want your page to rank on Google SERP then HTML is an essential part of the process. 

2. CSS: How a Website Looks 

Cascading Style Sheets or CSS are responsible for what your website looks like. It handles the style elements of your web page which covers things such as font, colour, background colour, borders, layouts, etc. 

HTML was first created to take care of the structure of a website but it lacked the certain style factor that we have come to associate great websites with. Thus, the creation of CSS was a game changer and it has since changed the way all websites look. It helps beauty webpages without having to worry about manually coding every HTML page to create style, which can be quite a tiring process, especially for large websites. 

Earlier Google used to render web pages more like a text-only browser, and it was only in 2014 that its indexing system began to render the web pages more like an actual browser. This lead to Black hat SEO tactics where people tried to capitalize on Google’s older indexing system and were hiding CSS to hide texts and links to manipulate Google’s search engine rankings. Doing so is a violation of Google’s guidelines and can end up backfiring on the perpetrator. 

Here are some components of CSS that SEOs should care about- 

• Using CSS can help in reducing your site’s load time. Instead of using HTML, style directives can live in your CSS files which makes your page less code heavy and reduces the file transfer size which makes load times faster. 
• When browser downloads resources, having heavy CSS files can affect the speed of your webpage. Thus, it’s advisable to compress them so that your web pages can load faster. 
• CSS allows your pages to be more content-heavy rather than code-heavy which leads to better indexing of your site’s content. 

However, one must remember that using CSS to hide your links and content can get your website removed from Google’s index and it can be manually penalized for indulging in black-hat SEO.  

3. JavaScript: How a Website Behaves 

In the initial days of the internet, the building of webpages was entirely reliant on HTML, then CSS came along and helped a little with the styling of web pages, however, the oncoming of JavaScript programming language completely changed the way websites are built and made it dynamic in nature. 

Over time, JavaScript has created lots of opportunities for the creation of non-static web pages. Whenever a user accesses a page that’s been enhanced using JavaScript programming, the browser page on the user’s side would automatically executes the JavaScript against the static HTML that the server has returned. This would result in the user receiving a page that’s come to life with interactivity. 

Every day we come across a lot of pages that have JavaScript in action behind the scenes that have transformed the whole look of the page and made it come alive. So, next time whenever you see a pop-up or third-party resources like ads displayed on your page, you should understand that JavaScript is in action. 

Client-Side Rendering vs Server-Side Rendering 

Before we move along, we must remember that JavaScript can also pose some problems for SEO as well because a lot of search engines don’t look at JavaScript the way a human does. The reason behind this is client-side rendering vs server-side rendering.

Execution of most JavaScript files is accomplished in a client’s browser. However, with server-side rendering, all the files are executed on a server’s end and the server sends fully-rendered files to the browser. 

So, some SEO-critical elements such as tags, links, and texts are not represented in your HTML and are loaded on the client’s side with JavaScript. So, until these elements are rendered, they are not visible from your page’s code. This means that at least initially the search engine crawlers wouldn’t be able to see what\’s in your JavaScript. 

According to Google, unless the Googlebot is being blocked by you from crawling the JavaScript files, it can render and understand your web pages just as a browser would. This means that the Googlebot should be able to see the same site that a user is viewing in their browser. However, due to the second wave of indexing, where Google indexes and ranks JavaScript pages two waves days apart, Google can miss some of the elements which will only be visible once the JavaScript is executed. 

There are some additional factors that go wrong during Google’s rendering process of your web pages that can play a role in preventing Google from understanding what’s there in your JavaScript-

• You’ve used robots.txt or other methods to block Googlebot from JavaScript resources. (Already covered in chapter 2) 
• All the requests to crawl your content can’t be handled by your server. 
• Googlebot is unable to understand your JavaScript because it’s either too complex or outdated. 
• Until the crawler has finished with a page and moved on from it, the JavaScript doesn’t “lazy load” the content into the page. 

It goes without saying, although JavaScript presents a lot of great opportunities and opens up newer avenues for SEO if one isn’t careful enough then it does have serious ramifications and can end up harming your SEO instead of helping it. 

Thankfully, there’s a way for you to see whether Google is viewing the same thing as your visitors or not. You can use Google Search Console’s “URL Inspection” tool to see how Googlebot views your page. All you have to do is paste your page’s URL into the Google Search Console search bar. Like this: 

Then, click on “Text Live URL”: 

Once Google has recrawled your URL, click on “view tested page” to see how your page is being rendered and crawled: 

You can click on the screenshot tab to see how Googlebot smartphone is rendering your page: 

At the end of this exercise, you’ll see how Googlebot sees your page in comparison to how a visitor might see your page. You can also access the list of resources that they might have been able to get for your entered URL by clicking on the “More info” tab. 

We needed to cover how a website works as it lays a foundation for what’s to come next. Moving forward we’re going to discuss what technical optimizations can be implemented to help Google understand your website better. 

Exploring How Search Engines Understand Websites

If you’re a search engine crawler scanning a 10,000-word article about how to make pizza at home. How are you going to be able to identify the author, ingredients, recipe, or steps that one has to follow to make a pizza? This is where we introduce Schema Markup.  

Using schema, you can spoon-feed search engines more specific classifications about what kind of information is present on your page. It is a way for you to organize or label your content in a way that it’s easier for a search engine to have an understanding of what kind of elements are presented on your web page. This code provides a kind of structure to your data, which is why Schema is sometimes also referred to as “structured data”. Also, this whole process of structuring data is called “markup” because you are using organizational code to make up your content. 

Announced in May 2016, Google’s preferred schema markup is JSON-LD, which coincidently is also supported by Bing. You can visit Schema.org to see the full list of available schema markups. You can also check out the Google Developers Introduction to Structured Data to get additional information on how to go about implementing structured data. Once you’ve implemented the structured data that suits your web pages the best, you can use Google’s Structured Data Testing Tool to test your markup. 

We\’ve already established that Schema markup helps bots like Google understand what a piece of content is all about, but in addition to this, it also enables special features to accompany your pages in the SERPs. These special features are called “Rich Snippets”, and you must have encountered them on some web page. These rich snippets are things like a recipe, top stories carousels, sitelinks search boxes, and review stars. 

We would like you to note that using structured data can definitely help enable a rich snippet to be present on your page, but it does not guarantee its presence. There are just these few rich snippets as of now, however, more can be added in the future if the use of schema markup increases. 

Here are some last words of advice on Schema Markup: 

• Multiple types of schema markup can be used on a page. However, be sure that if you’re marking one element such as a product, then all the other products need to be marked too. 
• Be sure not to mark the content that is not visible to the users and follow Google’s Quality Guidelines. 
• It’s important that if your site has a duplicate page, then Google asks that you not only mark the canonical version with your structured markup but also mark up each duplicate page. 
• On your structured data pages, you need to provide updated as well as original content. 
• The structured markup should serve as an accurate representation of your page. 
• The most specific type of schema markup should be used for your content. 
• Your marked-up reviews should be genuine and unpaid business reviews coming from actual customers and not be written by the business. 

Use Canonicalization to Tell Search Engines about Your Preferred Pages 

Google sometimes doesn’t understand which page to index in the search results when it comes across the same content on different web pages. To resolve this issue, the rel=” canonical” tag was invented. Using this tag, you can help the search engines understand which page you want to be indexed. In other terms, you can inform Google to understand which one is your preferred page out of all of the duplicates. It allows you to point Google in the right direction of finding the location of the original or master version of a piece of content. 

So, if you want to publish a piece of content again, whether it’s the same or altered slightly, you don’t have to worry about creating duplicate content with the help of the rel=” canonical” tag. 

Having proper canonicalization allows to you make sure that every piece of content on your website is unique and has only one URL. That’s why Google recommends that you have a self-referencing canonical tag on every page on your website so that search engines do not end up indexing multiple versions of a single page. For instance, if you do not have a canonical tag telling Google which version of your web page is the original one or you prefer over the other, then https://www.example.com could end up getting indexed separately from https://example.com, which would create duplicates. 

Make sure that you follow “avoid duplicate content” as a piece of principal advice. Google aims to award the sites that have published content that is unique and original- and not just content that’s been taken from other resources, refurbished, and repeated across multiple pages as new content. This is why search engines will rarely show multiple versions of the same content, as they want to give the best search experience to the user. Search engines would always choose to show only the canonicalized version, and in case the canonical tag is missing, then they’d choose whichever version they find most likely to be the original content. 

How Users Interact with Websites

As already discussed in chapter 1, although SEO stands for Search Engine Optimization, it’s as much or more about people as it is about search engines. This is because search engines and everything around is there for one main reason- and that is to serve the users i.e., the searchers who use these search engines. This clearly explains the reason why Google’s algorithm is so eager to reward the website that aims to provide the best possible experience for searchers. This is the reason why some websites despite having the best qualities such as robust back-link profiles, would fail to perform or rank well in search engines. 

Thus, we must understand what makes the user’s search engine experience optimal so that we can also aim to replicate it and try to create content that best serves our users and get maximum search performance- 

Mobile-Friendly Experience 

You need to ensure that your website is accessible and easy to navigate for mobile users as well. Today, more than half of website traffic comes from mobile, so it’s essential that you give it enough or more attention to detail. It’s easier and more convenient for people to access a website using their mobile phones on the go. So, you also need to incorporate these changes into your plan. 

Google rolled out an algorithm in April 2015 that promotes mobile-friendly pages over non-mobile-friendly pages. There are a lot of ways for you to make your website mobile-friendly, however, Google recommends going with responsive web design. 

Responsive Web Design 

If you want your website to fit perfectly on the user’s screen, no matter what device they’re using, then you need to implement responsive web design. Doing so would ensure that your site opens perfectly on all different-sized devices such as mobile, desktop, tablets, etc. You can use utilized CSS to have the web page “respond” to the kind of device you want. Doing so would allow you to provide a better experience to users as they wouldn’t have to pinch-and-zoom or double-tap to view the content on your pages. 

If you want to check whether your website is mobile-friendly or not, you can use free tools such as Google’s Mobile Friendly Test.

AMP or Accelerated Mobile Pages

AMP is used to deliver content to a mobile user at a speed that’s much higher than non-AMP delivery. Accelerated mobile pages or AMP can accomplish this because it delivers content from their cache servers instead of the original site. It uses a special AMP version of JavaScript and HTML. 

Mobile-First Indexing 

According to a 2018 update, Google started preferencing mobile-first indexing over websites. This gave rise to a lot of confusion between the mobile-first and mobile-friendliness of a website. Let’s see the difference. 

Google chooses to crawl and index the mobile version of your web pages when it comes to mobile-first indexing. Now, making your website accessible to mobile users\’ screens is essential for your site\’s performance in search, however, mobile-first indexing has no connection whatsoever to mobile-friendliness. This has created issues where websites lack cohesion between mobile and desktop versions. Some content of both versions may differ such as navigation, links, etc., on the user’s mobile view. 

Improve Page Speed 

Your site must load faster if you want to rank higher in search engine results pages (SERPs). Google’s first and foremost aim is to provide a good experience to its users, and that is only possible if your page loads lightning-fast for searchers. If your page is too slow then the user is more likely to hit back, abandon the search, or move to your competitor\’s page. There are a lot of tools available online that can be used to improve your site’s load time. 

Here are some links that might help you with it-

Related: Learn How to Optimize WordPress Page Load Time (esearchlogix.com) 

Related: Top Plugins to Help Your WordPress Site Load Faster (esearchlogix.com)

Focus on International SEO 

If your websites cater to audiences from multiple countries then you should familiarize yourself with International SEO best practices to be able to serve audiences from each and every location better and give them more relevant experiences. If you refuse to perform these optimizations then your international visitors might have some difficulty in locating your version of the site that specifically caters to them which is not a sign of a good user experience. 

Here are two ways in which you can internationalize your site- 

• Language 

The sites that cater to speakers of multiple languages are known as multilingual websites. If you want Google to be aware that your site caters to multiple languages then you need to add a hreflang tag. 

• Country 

Now, the sites that cater to audiences in different countries are known as multi-regional websites and they should have specific distinctions in their URL so it’s easier to target their domain or pages to specific countries. For example, you can easily use a country code top-level domain (ccTLD) such as “.ru” for Russia, or you can use a generic top-level domain (gTLD) which has a country-specific subfolder such as “example.com/ru” or Russia. 

To Wrap it UP 

That’s enough for the technical SEO for now. Till now you’ve learned how to conduct your research, how to write content, and how to optimize your website to cater search engines and provide a good user experience. 

Now, our next aim is to familiarize you with the establishing authority so that your page will be able to rank higher in SERPs. Let’s go ahead and discuss ‘Link Building & Establishing Authority’ in Chapter 6.