What Is Technical SEO? Your Guide to Getting Started

Another example of technical SEO would be building an XML sitemap for your site. The first major step in establishing a technical SEO strategy is setting up your website correctly so every page functions as it should. Google (and other search engines) crawls this file to understand your site better.

Setting Up Your Website

The first major step in establishing a technical SEO strategy is setting up your website correctly so every page functions as it should.

Let’s go over someSEO basicsand beginner steps to setting up a website from scratch:

1. Purchase a domain name:There are tons of domain registrars (businesses that organize and manage taken and available domain names) out there. Wix, GoDaddy, and Domain.com are some of the most popular registrars out there.
2. Link up your domain name to an IP address:Internet protocol addresses (IPs) are a set of numbers that help the internet translate a domain name like “semrush.com” into something it can catalog and organize. A domain name server (DNS) organizes these IP addresses into an intricate map across the web.

Once you’ve got those two parts down, you will need to start preparing your site to appear on searchers’ web browsers. There are several ways this happens:

1. A person searches for your site (example: a searcher wants to learn more about SEO, so they plug in “semrush.com” to their Chrome browser’s search bar).
2. Their internet browser will begin contacting the DNS to convertn a domain name and IP address. It will also start requesting information about your website’s type of programming/coding.
3. Once the DNS has the request, it will begin building the website files that will appear in the user’s internet browser.
4. The big show begins — rendering. Now that the DNS has delivered the right materials to the internet browser, the browser will begin building the web page requested. This is referred to as “rendering.” It allows typical users to see the polished website without sorting through a bunch of complex code.
5. The browser does a final check by making any unfulfilled code requests to the server.
6. Your website is displays successfully in the browser.

And that is the gist of how a website goes from inception to browser-ready. For more comprehensive information, check out our article onHow to Build Your Website Architecture for SEO.

URL Structure

Uniform Resource Locator (URL) structuredescribes the appearance of a URL. This structure gives important information about the web page to both search engines and searchers. For example, you’ve probably seen many URLs that start with “HTTPS.”

This group of letters refers to a URL structure that combines Hypertext Transfer Protocol and the Secure Socket Layer (SSL). That “S” at the end refers to a security protocol that many sites use to keep the contents of the webpage (and information users enter into the page) secure.

Let’s take a look at a structured URL example:

You can see from the content that this is a blog post about how to hire a marketing agency for your business. The URL structure also reflects this with “/blog/hire-a-marketing-agency.”

You can also see an SSL certificate at the top, indicated by the “S” at the end of “HTTPS” and the little lock icon in the left-hand corner of the search bar.

You can also audit HTTPS usage on your site using theSite Audit tool, which is helpful when checking for technical SEO issues.

Breadcrumb Navigation

Breadcrumb navigationrefers to a user’s “trail” when navigating a particular site. This breadcrumb navigation easily allows users to click to return to a previous page or to navigate several steps back in their journey through a website.

This type of navigation is good for maintaining an orderly site infrastructure, and it offers an additional layer of accessibility for the user. See the example below:

This image shows a specific page on Target’s website. The breadcrumb navigation is highlighted in purple at the top of the page. In this example, a customer could return to the “beauty” page or Target’s homepage with a click, if they like.

HTML, JavaScript, and CSS

You’ve probably heard ofHTML,JavaScript, and CSS used in technical SEO spaces or around the internet before. If it feels like learning Latin to you, don’t worry; HTML, JavaScript, and CSS are all programming languages many individuals can learn with a lot of patience, practice, and support.

Let’s use the house example again to go over each programming language.

• HTML:HyperText Markup Language is like a house’s foundation and load-bearing walls. This language provides the essential structure (code) browsers need to display your web content. When you see written content on a site, including headers and listicles, that’s HTML.

• JavaScript:This language is like the plumbing and electrical elements of the house. JavaScript provides the code that makes the functional parts of a site usable when searchers come to it. JavaScript makes elements of a website dynamic and flashy. With JavaScript, the options are essentially endless. For example, if you wanted to create a click-through quiz on one of your web pages, you could do that with JavaScript

• CSS:CSS (Cascading Style Sheets) is the house’s exterior in this analogy. This programming is responsible for the colors, fonts, and overall look of your site. Without it, things would look very blank and boring on a webpage.

To review:

• HTMLis the foundational code for your site
• JavaScriptadds interactive elements to your web pages
• CSSmakes everything look great

Pro tip: Use our downloadableJavaScript Cheat Sheetto reference common JavaScript commands.

Crawling, Indexing, and Rendering

So, once you have your website connected to an IP address and you’ve added your HTML, JavaScript, and CSS programming into the mix, what happens next? To ensure that your website appears in the SERPs, you’ll want to pay close attention to what Google is doing when it’s crawling, indexing, and rendering your website.

The better you understand each of these steps, the more you can refine your technical SEO strategy to meet the needs of users and search engines. The more you meet the needs of search engines, the better chance you have at ranking well in the SERPs.

Note: We will be using the most popular search engine, Google, as the example for this section.

Crawling

When you visit a website you like, do you browse multiple pages and follow breadcrumb navigation to check out all the content the site has to offer? If you do, then you understand exactly howGoogle’s crawlers(bots) navigate public websites.

Once these Google bots begin scouring the web, they go to public websites and hop from link to link much as a person would do.

Indexing (and Why Sitemaps Matter)

Indexingis like Google’s filing cabinet. Once the Googlebot crawls a public site, it stores that content, and (when it’s finished indexing) that page will appear in the relevant search engine results that best match a searcher’s query.

One way to ensure that Google has correctly crawled and then indexed your content is to leverage a free Google tool calledGoogle Search Console.

Once you create your free account, you can do several things like monitor when a new webpage you created is indexed. You can also submitsitemaps, making it easier for Google to identify and correctly catalog your site’s content.

Building a sitemap is very important because it makes Google’s life (and yours) much easier. Instead of aimlessly searching your website, you can tell Google where the important content is and how often you update it.

Tips:

• Ensure your main navigation features are in the most simple code possible (HTML). If you do want to use more complex JavaScript to build your navigation menu, know that Google is not as adept at indexing complex navigation structures.
• Ensure your mobile and desktop versions of your site are the same. Having different content on each can keep Google from correctly indexing your site.
• Incomplete navigation (like missing an important contact page) will keep Googlebot from jumping easily from link to link.

Open the Crawlability report in Site Audit to learn more about any issues or errors on your site.

Rendering

Rendering is what happens once Google has finished crawling and indexing your website content into its filing cabinet. If all goes well and your content begins appearing in the SERPs, Google wants to make sure that users see and interact with your content, just as you intended them to.

In the early days of the internet, websites didn’t have JavaScript. This made them very easy to render because they used HTML — a very static programming language. Now, with JavaScript and colorful CSS, Google’s job has gotten a lot more complex.

The more JavaScript and other complex coding elements you apply to your website, the more likely that Google will have difficulty rendering your website as you intended.

Implementing Structured Data

We touched on structured data briefly earlier on in this guide. As a recap: buildingstructured datais the act of helping Google understand your website content through creating a detailed site description in a language (code) that Google can readily understand.

For example, your structured data might include the title of the article or content, the description, and other elements baked into a code (schema) that Google likes.

If you want to learn how to create structured data, or you’d like some examples to build off of, check outGoogle’s Codelabsfor examples and an in-depth explanation.

Google even has aStructured Data Markup Helperif you’re struggling with figuring out how it all works.

The tool helps by walking you through building structured data to a sample web page. An example of the URL you entered will be rendered on the left. You tag items by clicking on them and providing context as to what that element of the page is about.

Once you have tagged all of the page elements, Google will render the structured data for you.

Another way to check on specific markup issues is to navigate to the Crawled Pages report on the main Site Audit page.

Filter for specific issues (Markup in the below example) and hover over the types listed underneath to see what type of markup the page has).

If there are any issues, Semrush will let you know which pages are causing the problem and how to fix them.

Page Speed

When the internet was in its early days, website pages were much easier for search engines to render. Programming was simplistic, and site elements were very bare bones.

Now, through the power of JavaScript and CSS, so many more things are possible for web developers. As web content becomes more rich and dynamic, page speed becomes a more critical factor in user experience (and in how well your content ranks in the SERPs).

Typically, the more JavaScript you have on your site (especially complex elements), the harder it is for that page to load. Because page speed is a ranking factor, you’ll want to make sure you pay close attention tohow long it takes for content to loadonce a user requests it.

Core Web Vitals

One way to monitor how fast content is loading on your website is through our Site Audit tool’s Core Web Vitals metric.

The Core Web Vitals are broken down into three main categories:

• Largest Contentful Paint (LCP):This defines the time it takes for the main portion of content on a web page to appear/load for users.

• First Input Delay (FID):FID measures a page’s response time when a user begins interacting with that page for the first time. This includes: clicking links, tapping buttons, and other custom JavaScript actions.

• Cumulative Layout Shift (CLS):This is a measurement of the number of unexpected shifts in the page layout that impact the main content of a page.

Google also provides these measurements through theirGoogle Search Console Core Web Vitals Reports.

Ideal Status Metrics for Core Web Vitals:

• LCP:Under 2.5 seconds
• FID:Under 100 milliseconds
• CLS:Score of .1 or under

User-Friendly Sites

User-friendly sites are websites that optimize for the user experience first. This doesn’t mean you neglect or disregard what search engines require; it just means that you understand that people come first (Something even Google agrees with!).

There are several ways to have a user-friendly site, and we’ll talk about a few next.

Mobile-First Indexing

As the name suggests,Mobile-first indexingis when search engines (and therefore web developers) prioritize indexing mobile versions of sites for indexing.

This means that you should also consider putting a heavy emphasis on the experience and structure of your mobile site.

You can check if your site is on mobile-first indexing by going to theGoogle Search Consoleand reviewing the recent log of crawls to a recently added page to your site.

If you see “Googlebot smartphone” has crawled your page first, you know you’re all set. You might have already received a pop-up that your site has been switched over.

Accelerated Mobile Pages

Accelerated Mobile Pages(AMP) is a type of open-source, HTML framework that Google has created in order to help web builders make web content friendly to mobile users.

This type of code allows you to prioritize mobile user experience first, which is something you should consider if you haven’t already Mobile internet browsing has boomed in the last decade, with over50 percent of web traffic coming from a mobile device.

So, you must build the kind of web content that is easily accessible from a mobile device or tablet. And, you might already have these types of pages on your website.

You can check by going to our Site Audit tool and navigating to the “Statistics” tab. From there, you can see how many of your web pages are AMP links.

Google is almost certainly giving preferential ranking to those who utilize this framework to build their web content. Google recognizes that most users will be coming from a mobile device, and therefore you’ll want to prioritize their type of experience.

Some other benefits of building web content with this open-source HTML framework known as AMP include:

• AMP load almost instantaneously
• Much easier to build than other types of frameworks
• Loads of major platforms support AMP
• Developers can still implement CSS in AMP (though the code won’t be as complex)
• The groundwork components of AMP are already there — you just have to build on them

Thin/Duplicate Content

Two dangers web content developers can encounter are thin orduplicate content.

Thin contentrefers to blogs, articles, or web pages that don’t give Googlebot crawlers much to work with. Maybe there is no internal linking on the page to help direct crawlers to other parts of your site. It’s also possible that the page’s content doesn’t correctly target users’ search intent.

An example of thin content would be a service page that doesn’t link to any other page on your site and doesn’t actually talk about the services you offer. Instead, it references your employee names and extension numbers.

Duplicate contentrefers to blogs, articles, or web pages with identical copy somewhere else on your site. Don’t let the name fool you, though; near-identical content (like swapping out just the brand name for a product description) can also get swept up under the designation “duplicate content.”

An example of duplicate content might be that you have two pages devoted to dry dog food that don’t deviate from one another in language or page appearance.

Tips:

• If you catch another website copying your content without credit, reach out to the webmaster to ask them to either accredit your work or remove it
• Use canonical tags (more on these in a second) on brand new content to identify that it is the original source of the information

Canonical Tags

You may have heard of canonical tags or have even seen canonical tags referred to as rel=”canonical.” If you aren’t familiar with the term,canonical tagsare markers that indicate to search engines that the URL you specified is the original and true copy of a page.

Canonical tags appear in the

Tips:

• Don’t canonicalize (or point) to a URL that has a301-redirect(i.e., a page set to redirect to another page)
• Make sure the content you are canonicalizing to is relevant
• Use a tool likePageImproveto make make on-page changes to canonical tags and other elements directly from your browser

Hreflang

Let’s say you’ve built your site that’s ranking well in Google’s SERPs. You’re proud of the work you’ve done, and you would like for people who speak and read other languages to access your site and content. How do you go about that? With theHreflang attribute/tag.

Hreflang is an HTML tag that notifies search engines of the language you are using on a specific page. This allows you to illustrate the relationship between web pages written in different languages.

This is especially important if you plan to target specific audiences by location. For example, let’s say you own a German business opening a service branch in France. You want to make sure that someone visiting your site from France can read all about your newest location.

The Hreflang tag “hreflang=fr” will tell Google that, should someone visit your site with an IP address that is likely originating from France, they should receive the French version of the page.

Hreflang improves not only the user experience but also accessibility. This is helpful for users, traffic, and business in general.

The Site Audit also includes an International SEO report that lets you know if your site has any hreflang issues.

Learn More About Technical SEO

We’ve highlighted a few individual checks and reports found in the Site Audit tool, but Site Auditchecks for over 140 issues.

If you’re just getting started with tech SEO, you can audit 100 pages on a site once per month with a free account. This is a great way to familiarize yourself with potential technical SEO issues.

Final Thoughts

Technical SEO isn’t something you can master in a day or two—it requires lots of dedicated research and some trial and error.

However, there is good news; you don’t have to go it alone. Our Semrush Academy offers free courses and certifications in many different SEO elements,including technical SEO.

You can start chipping away at the technical side of SEO today, risk-free.

Source: https://www.semrush.com/blog/learning-technical-seo/