Technical SEO

Basic technical information will help you optimize your site for search engines and build credibility with developers.

Now that you've prepared valuable content on the foundation of solid keyword research, it's important to make sure it's readable not only by users but also by search engines.

You don't need to have a deep technical understanding of these concepts, but it's important to understand what these technical entities do so that you can talk intelligently about them with developers. Speaking the language of your developers is important because you will probably need them to perform some of your optimizations. If they cannot understand or appreciate your request, they are unlikely to give priority to your requests. When you build a reputation and trust with your developers, you can begin to eliminate the bureaucracy that often prevents important work from being done.

Understanding cross-team support, technical optimization for SEO is very important if you want to make sure your web pages are structured for both users and browsers. For this purpose, this section; We divided it into three:

• How do websites work?
• How do search engines understand websites?
• How do users interact with websites?

It is very important for everyone to understand these principles, as the technical structure of a site can have a huge impact on its performance. This section of the manual It might also be a good idea to share it with your programmers, content writers and designers so all parties involved in the making of a site are on the same page.

How do websites work?

If search engine optimization is the process of optimizing a website for search, SEOs need at least a basic knowledge of what they're optimizing for!

Below, we've summarized the website's journey from domain purchase to fully rendered in a browser. An important component of the website's journey is the critical rendering path, which is a browser's process of converting a website's code into a viewable page.

Knowing these about websites is a few steps for SEOs to understand. for some reason öimportant:

• Steps in this web page build process can affect page load times, and page speed is not only important to keeping users on your site, it's also one of Google's ranking factors.
•  
• "second pass" certain resources such as Google, JavaScript works." Google first looks at the page without JavaScript, then a few more. days to a few days weeks later it renders the JavaScript, so SEO critical items added to the page using JavaScript may not be indexed.

Imagine that website loading is your commute to work. You get ready at home, collect your things to bring to the office, and then choose the fastest route from your home to your work. Wouldn't it be silly to put on just one of your shoes, take the longer route to work, drop off your stuff at the office, then head back home and get your other shoe? This is what inefficient websites do. This section will teach you how to diagnose where your website might be unproductive, what you can do to streamline it, and the positive results on your rankings and user experience as a result. p>

Before a website can be accessed, the website must be set up!

1. Domain name is purchased. Domain names like seoart.com are purchased from a domain registrar like GoDaddy or HostGator. These registrars are organizations that only manage reservations of domain names.
2. The domain name is tied to the IP address. Internet without the help of DNS (Domain Name Servers) "seoart.com"; does not understand names such as website addresses. The internet uses a series of numbers called an IP (Internet Protocol) address (eg 127.0.0.1), but we want to use names like seoart.com because these names are easier to remember for users. To associate these human-readable names with machine-readable numbers, we need to use a DNS.

How does a website get from server to browser?

1. Request user domainr
2. . Now that the name is tied to an IP address via DNS, users can request a website by typing the domain name directly into their browser or clicking the website link.
3. Browser requests
4. . For a web page, this request asks the browser to make a DNS lookup request to convert the domain name to its IP address. The browser then makes a request to the server for the code from which your web page is rendered, such as HTML, CSS, and JavaScript.
5. Server sends resources
6. . When the server receives the website request, it sends the website files to be collected in the searcher's browser.
7. Combines browser web page
8. . The browser has now taken the resources from the server but still needs to put it all together and render the web page so the user can see it in their browser. The browser creates a DOM (Document Object Model) as it parses and organizes the resources of the entire web page. The DOM appears when you right-click on a web page in your Chrome browser and "view the page source". is what you can see.
9. Browser makes final requests
10. . The browser will display a web page only after all the necessary codes of the page have been downloaded, parsed and executed, so at this point, the browser will need any additional code to display your website. If it hears it, it makes an additional request from your server.
11. The website appears in the browser
12. . wow! After all that, your website has now been transformed from code to what you see in your browser; (visualized).

How a website now looks in a browser; As you know, we will focus on what a website is made of, in other words the code (programming languages) used to create these web pages.

The most common three are:

• HTML – What a website tells (headlines, body content, etc.)
• CSS – What a website looks like (color, fonts, etc.)
• JavaScript – How it behaves (interactive, dynamic, etc.)

HTML: What a website tells

HTML (Hypertext Markup Language), bridge; stands for text markup language and serves as the backbone of a website. All of the items such as headings, paragraphs, lists, and content Defined in HTML.

Here's an example of a web page and what the corresponding HTML looks like:

 

 

HTML is important for SEOs to know, because "under the title" of any page they create or work on. it is a living thing. While your CMS probably doesn't require you to write your pages in HTML (choosing "hyperlink" lets you create a link without typing "a href=" This is what you changed. Adding content, changing the anchor text of internal links, etc. This is what you change when you do something to a web page like Google scans these HTML elements to determine how relevant your document is to a particular query. In other words, what's in your HTML plays a big role in how your webpage rank in Google organic search!

CSS: How does a website look?

CSS (Cascading Style Sheets), "cascading style sheets"; means, and this ensures that your web pages get certain fonts, colors, and layouts. HTML was built to describe content rather than format it, so when CSS entered the scene, it changed the rules of the game. With CSS, web pages can be styled without the need for manual coding of HTML for each page, which is a laborious process especially for large sites.

It was after 2014 that Google's indexing system started rendering web pages like a real browser instead of a text-only browser. "Black Hat" trying to take advantage of Google's old indexing system An SEO app tried to hide text and links via CSS in order to manipulate search engine rankings. This "hidden text and links" application violates Google's quality guidelines.

CSS components that SEOs should particularly care about:

•    
• Since style directives occur in external style sheet files (CSS files) instead of your page's HTML, your page's code load will be: reduces file transfer size and speeds up download times.
•  
• Browsers still need to download resources like your CSS file, so compressing them can make your web pages load faster, and page load speed is a ranking factor.
•    
• Having your pages more content-heavy than code-heavy ensures better indexing of your site's content.
• Using CSS to hide links and content may result in your website being manually penalized and removed from the Google index.

JavaScript: How does a website behave

In the early days of the Internet, web pages were built with HTML. When CSS emerged, web page content had the ability to gain a style. When the programming language JavaScript came onto the scene, websites could no longer just have a structure and style, but also be dynamic.

JavaScript provided many opportunities for non-static web page rendering. When a user tries to access a page developed with this programming language, that user's browser returns the JavaScript to the server; it runs against static HTML, and this results in a web page that comes to life with some kind of interaction.

You've definitely seen JavaScript in action, you might not know it! This is because JavaScript can do almost anything on a page. For example, you can create a popup window or create a third-party ad on your page. The party may request the resources to be displayed.

Client vs Server side rendering

JavaScript can create some problems for SEO as search engines don't see JavaScript the way human visitors do. This is because client side vs server side rendering. Most JavaScript is executed in a client's browser. On the other hand, with server-side rendering, files are executed on the server and the server sends them to the browser in their fully rendered form.

Seo-critical page elements such as text, links, and tags, which are loaded client-side with JavaScript instead of being displayed in your HTML, will not appear in your page's code until they are rendered. This means that search engine crawlers won't see what's in your JavaScript, at least initially.

Google says that as long as you don't prevent Googlebot from crawling your JavaScript files, they can usually visualize and understand your web pages just like a browser can. However, for client-side JavaScript this "second indexing" Because of this, Google may miss certain items that can only be used when executing JavaScript.

There are other things that can go wrong with Googlebot's rendering of your web pages and prevent Google from understanding what's going on in your JavaScript:

• You have blocked Googlebot from JavaScript sources (öas we learned in Chapter 2 with robots.txt)
• Your server cannot handle all requests to scan your content
• JavaScript is too complex or outdated for Googlebot to understand
•  
• JavaScript content will not "delay"load" into the page until the browser finishes the page and continues.

Needless to say, while JavaScript offers many possibilities to create a web page, it can also have serious consequences for your SEO if you're not careful.

Fortunately, there is a way to check if Google sees the same thing as your visitors. To view a page how Googlebot is viewing your page, use Google Search Console's "URL Inspection"; use the tool. Simply paste the URL of your page into the GSC search bar:

 

 

Here, click on "Test Live URL".

After Googlebot recrawls your URL, click "View Tested Page" to see how your page was crawled and rendered.

 

 

"Screenshot" next to "HTML" Clicking on the tab shows how the Googlebot smartphone renders your page.

 

 

In contrast, how Googlebot sees your page versus how a visitor (or you) might see the page; you will see. Google, "More Info" tab also shows a list of resources they may not have been able to obtain for the URL you entered.

Understanding how websites work is a great foundation for what we'll talk about next: technical optimizations to help Google better understand the pages on your website.

How do search engines understand websites?

Imagine you are a search engine crawler crawling a 10,000 word article on how to bake a cake. How do you identify the author, recipe, ingredients or steps required to bake a cake? This is where Scheme Markup comes into play. It allows you to add more specific classifications to search engines about what type of information is on your page.

A schema is a way to tag or organize your content so that search engines better understand what certain items are on your web pages. This code provides structure to your data, so the schema is often referred to as Structured Data. Because you mark your content with organization code, the process of structuring your data is often called Markup.

JSON-LD is Google's preferred Scheme Markup, also supported by Bing (announced in May 2016). To view the full list of thousands of Scheme Markups available, visit schema.org or for additional information on how to implement Structured Data Google Developers Introduction to Structured Data See section. After applying the most appropriate structured data to your web pages, you can test your markup with Google's Structured Data Testing Tool.

In addition to helping bots like Google understand what a certain content is about, Scheme Markup can also enable custom features to accompany your pages in the SERPs. These "special features" rich snippets" and you've probably seen them working. These are;

• Most Popular News Carousels
• Review the Stars
• Site Links Search Boxes
• Recipes

Note that using structured data can help make rich snippets available, but it doesn't guarantee it. As the use of Scheme Markup increases, other types of rich snippets will be added in the future.

Some tips for the success of the scheme:

• You can use multiple types of Scheme Markups on one page
• . However, if you mark an item, such as a product, and there are other products listed on the page, you must also mark those products.
• Do not mark content that visitors cannot see
• Comply with
• and Google's Quality Guidelines. For example, if you add review structured markup to a page, make sure those reviews are actually visible on that page.
• If you have duplicate pages, Google it
• requires you to mark each duplicate page with your structured markup, not just the standard version
• .
• In your structured datasheets
• Provide original and updated (if any) content
• .
• Structured markup should be an accurate reflection of your page
• .
• For your content
• the most specific type of schema markup; try using
• .
•  
• Marked reviews should not be written by the business
• . There should be real and free business reviews from real customers.

Tell search engines about your preferred pages with canonicalization

When Google crawls the same content on different web pages, it sometimes doesn't know which page to index in the search results. This is why search engines use the preferred version, not all copies of the content. to help it index better, rel="canonical" tag çremoved.

rel ="canonical" The tag allows you to tell search engines where the original, main version of a piece of content is located. In fact, "Hey search engine! Do not index this; index this source page instead. So if you want to republish a piece of content in full or slightly modified, but don't want to risk creating duplicate content, use the canonical tag today. It exists to save.

 

 

Proper canonicalization ensures that each unique piece of content on your website has only one URL. Multiple versions of a single page by search engines; To prevent it from indexing, Google recommends having a self-referential canonical tag on every page on your site. Without a canonical tag that tells Google which version of your web page is preferred, https://www.example.com is separate from https://example.com can be indexed and make copies.

"Avoiding duplicate content" It's an internet fact, and for good reason. Google wants to reward sites with uniquely valuable content, not content from other sources that repeats across multiple pages. Because engines want to provide the best search experience, you rarely have multiple versions of the same content; they will display, instead, only the standardized version; they will choose to show it, or if they don't have a canonical tag, they will choose to show whichever version they decide is original.

It is also very common for websites to have multiple duplicate pages due to sorting and filtering options. For example, on an e-commerce site, it's versatile, allowing visitors to narrow down products to find exactly what they're looking for; you can have what is called navigation. For example, a "sorting" that reorders the results on the product category page from the lowest to the highest price. Like the feature. This can generate a URL that looks like this:

example.com/mens-shirts?sort=price_ascending Color, size, material, brand etc. Add more sorting/filter options like and consider all variations of your page in the main product category this will generate!

 

How do users interact with websites?

In

Chapter 1, we said that while SEO stands for search engine optimization, SEO is as much about people as it is about the search engines themselves. This is because search engines exist to serve searchers. This goal is why Google's algorithm favors websites that provide the best possible experiences for searchers, and why some websites perform well in search, even though they have attributes like solid backlink profiles. It helps to explain that you may not want to.

Once we understand what makes the web browsing experience optimal, we can create those experiences for maximum search performance.

Providing a positive experience for your mobile visitor business

Because more than half of all web traffic comes from mobile devices today, it's fair to say that your website needs to be accessible and easy to navigate for mobile visitors. In April 2015, Google released an update to its algorithm to compare mobile-friendly pages to non-mobile-friendly pages. So how can you make sure your website is mobile-friendly? How to configure your website for mobile Although it is the main way, Google recommends responsive web design.

Responsive Design

The type of device your responsive website visitors are using; It is designed to fit your screen no matter what. Make the web page "respond" to the device size; You can use CSS to provide (respond) This is very useful because It eliminates the need for visitors to double-tap or magnify and zoom to view the content on your pages. Not sure if your web pages are mobile-friendly? Google's mobile-friendly test to checkYou can use the .

AMP

AMP “Accelerated Mobile Pages” (Accelerated Mobile Pages) and is used to deliver content to mobile visitors at much higher speeds than non-AMP delivery. AMP provides content from cache servers (not the original site) and is a custom AMP version for HTML and JavaScript; Because it uses it, it can deliver the content so quickly.

Mobile öpriority indexing

As of 2018, Google started to index websites with mobile priority. This change has caused some confusion between mobile compatibility and mobile priority use, so it was helpful to clear up the ambiguity. With mobile-first indexing, Google can get the mobile version of your web pages; scans and indexes. Making your website compatible with mobile screens is good for users and your search performance, but mobile-first indexing happens regardless of mobile compatibility.

This is mobile and desktop; For websites that do not have parity between their versions, different content, navigation, links, etc. raised some concerns, such as showing off. For example, a mobile site with different links will change the way Googlebot (mobile) crawls your site and send link equality to your other pages.

Increase page speed to reduce visitor frustration

Google wants to deliver content that loads at lightning speed for searchers. We've come to expect fast-loading results, and when we don't get them, we'll quickly return to the SERP to look for a better, faster page. Therefore, page speed is a very important aspect of on-site SEO. We can increase the speed of our web pages by using the tools mentioned below.

• Google's PageSpeed ​​Insights tool & best practices documentation
• How to Think About Speed ​​Tools
• GTMetrix
• Google's Mobile Website Speed ​​& Performance Tester
• Google Lighthouse
• Chrome DevTools & Tutorial

(Links are Links)

Images are one of the main perpetrators of slow pages!

As described in

Chapter 4, images are one of the number one reasons why web pages load slowly! In addition to compressing images, optimizing image alt text, choosing the right image format, and submitting image sitemaps, there are other technical ways to optimize the speed and way images are displayed to your users. Image Here are some key ways to improve distribution:

1. SRCSET: How to present the best image size for each device?

The

SRCSET feature allows you to have multiple versions of the image and then specify which version should be used in different situations. This code is added to the tag (where the image resides in HTML) to provide unique images for certain sized devices.

This is similar to the responsive design concept we discussed earlier, except for the images!

This is image only; It is a unique way to not only speed up your loading time, but also improve your on-page user experience by providing different and optimal images for different device types.

• The visit shows that the forward image upload process continues with gradual upload

Incremental loading occurs when you enter a web page, and instead of seeing a blank white space where an image will be, a blurry light version of the image or a colored box appears in its place as the text around it is loaded. a few; image after seconds uploads clearly in full resolution. Popular blogging platform Medium does this really well.

Low resolution at the beginning; version, followed by full-height resolution; the version is installed. This also helps you optimize your critical machining path! Therefore, it's low resolution that helps tell users that something is up/loaded while all your other page resources are being downloaded. a teaser imageyou are showing. For more information on how to gradually load your images, see Google's Lazy Loading Guide.

Increase speed by shrinking and grouping your files

Page speed checks often offer suggestions like minify resource, but what does that actually mean? Minification compresses a script file by removing things like line breaks and spaces, and shortening code variable names wherever possible.

"Bundling" Another common term you'll hear about increasing page speed. The bundling process combines a bundle of the same scripting language files into a single file. A group of JavaScript files can be placed in a larger file to reduce the amount of JavaScript files for a browser, for example.

You will speed up your website and reduce the number of HTTP (file) requests by both clipping and grouping the files needed to build your web page.

Improving the experience for international users

Websites targeting audiences from multiple countries should familiarize themselves with international SEO best practices to deliver the most relevant experiences. Without these optimizations, international visitors will find the version of your site that appeals to them. It may be difficult to find.

There are two main ways to make a website international:

• Language

Sites that target multilingual speakers are considered multilingual websites. These sites should add something called the hreflang tag to show Google that your page is a duplicate for another language.

• ÜCountry

Sites that target audiences in multiple countries are called multi-regional websites and should choose a URL structure that makes it easy to target domains or pages to specific countries. This is ".ca" for Canada a country code such as the parent domain (ccTLD) or "example.com/ca"; country specific like may involve the use of a generic parent domain (gTLD) with a subfolder.

You have researched, written and optimized your website for search engines and user experience. The next piece of the SEO puzzle is a pretty big one: building authority for your pages to rank high in search results. Next To Chapter 6 (Connection Creation and Authorization)

“SEO requires attention and patience. To be successful, follow the changing technological developments closely.”
– SEOART TEAM

The beginning here isç By following these seven steps with our guide, we can achieve a successful SEO: