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-
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!
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.
Now that your domain name is successfully linked to IP address via DNS, let’s see how your website gets from server to browser:
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-
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-
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.
Client-Side Rendering vs Server-Side Rendering
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.
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:
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.
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 backlink 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-
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.
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.
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.
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-
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-
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.
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.
eSearch Logix Technologies Pvt. Ltd.
Address (Delhi/NCR): 1st Floor, H-161, Sector 63,
Noida, Uttar Pradesh, India
eSearch Logix LLC
Address: 30 N Gould St STE R
Sheridan, WY 82801, USA
SALES (INDIA): +91-836-8198-238
SALES (INT.): +1-(702)-909-2783
HR DEPTT.: +91-977-388-3610