Technical SEO – Introduction to the terms of Tech SEO

Technical SEO an explanation

What is technical SEO? This article will give you the basics on what it is and why it's an important part of SEO.

Technical SEO, what is it?

In short technical SEO is to ensure that your website is in part with search engine technical requirements. And the goal of course is to gain improved search engine rankings.
These are the categories of technical SEO:

  • Crawling
  • Indexing
  • Rendering
  • Website architecture

Google and other search engines can only find pages if the pages comply with the four before mentioned bullets. But that’s just the basics. It’s not a certainty that Google will index your pages just based on those basics. There are many more technical factors to ensure that Google will index and rank your pages.

Why is it important?

So we have established that unless you comply with the basics at least, search engines will not find and index your pages. So in other words. Beautiful web design and great written content will not be shown on search engines without proper technical SEO.
So what happens if and when Google finds and indexes your pages? As mentioned before, these are just the basics.
To ensure full technical SEO optimisation, your sites pages need to be secure (https), mobile friendly, no duplicate content, fast-loading and much much more.
Your site doesn’t need to meet all the requirements. However, it goes without saying that the more requirements that are being met, the better chances for a higher ranking on search engines.

So how can you improve technical SEO?

There are many things you can do to improve the technical SEO. But as it is technical, it’s likely that you’ll need some advice and help from your technical team. However, as an editor there is also stuff for you to do. For instance, ensuring that images have the right aspect that they are properly sized.
We will make a quick introduction and how-to on the items below in the list.

What is a robots.txt file?

Robots.txt is a text file webmasters create to instruct web robots (typically search engine robots) how to crawl pages on their website. In practice, robots.txt files indicate whether certain user agents (web-crawling software) can or cannot crawl parts of a website. These crawl instructions are specified by “disallowing” or “allowing” the behavior of certain (or all) user agents.

Basic format

User-agent: [user-agent name]
Disallow: [URL string not to be crawled]

How does robots.txt work?

Search engines have two main jobs:

  1. Crawling the web to discover content;
  2. Indexing that content so that it can be served up to searchers who are looking for information.

To crawl sites, search engines follow links to get from one site to another — ultimately, crawling across many billions of links and websites. This crawling behavior is sometimes known as “spidering.”After arriving at a website but before spidering it, the search crawler will look for a robots.txt file. If it finds one, the crawler will read that file first before continuing through the page.
Because the robots.txt file contains information about how the search engine should crawl, the information found there will instruct further crawler action on this particular site. If the robots.txt file does not contain any directives that disallow a user-agent’s activity (or if the site doesn’t have a robots.txt file), it will proceed to crawl other information on the site.

Technical SEO – HTTPS

All websites should be protected with HTTPS, even ones that don’t handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your site and your users. HTTPS is also a prerequisite for many new, powerful web platform features, such as taking pictures or recording audio. By definition, an app cannot qualify as a progressive web app if it does not run on HTTPS. This is because many core progressive web app technologies, such as service workers, require HTTPS.

Why it matters for SEO

Having a secure website running HTTPS matters for SEO. There are numerous analyses out there, that shows why users prefer secure sites and that they actually avoid insecure ones. In fact, users judge companies credibility based on its website design and the security of the site. Read more about why HTTPS is good for SEO
Migrate your site to HTTPS. If you’re running your own servers and need a cheap and easy way to generate certificates, check out Let’s Encrypt.

Page is crawlable

“Crawlable” means every link within your website can be discovered and fetched by search engine spiders. Spiders or web crawling bots are programs that determine which sites and how many pages of those sites are to be crawled and fetched. These are sent out by search engines to locate and re-visit content (web pages, images, video, pdf files, etc.). In case a spider is unable to follow a link, then the destination page will either not be included at all, or exist in the search engine’s database but not be included in the universe of web pages available to search results.

Spiders

Spiders are used by search engines to retrieve publicly accessible web pages for indexing, and they can also be used to check for links to web pages that no longer exist. Search engine indexes are full of words and their locations on the web pages. Now, to have good search traffic, you first need to have your web pages in that warehouse full of words and locations.

XML Sitemaps

Telling Google what pages your websites consists of is still as important today .This was confirmed recently by Google itself. Of course, Sitemaps has to be dynamic as your sites keep changing when adding and removing pages.
Upload XML Sitemaps to Googles Search console.

Technical SEO – What is a canonical tag?

A canonical tag (aka “rel canonical”) is a way of telling search engines that a specific URL represents the master copy of a page. Using the canonical tag prevents problems caused by identical or “duplicate” content appearing on multiple URLs. Practically speaking, the canonical tag tells search engines which version of a URL you want to appear in search results.

Why does canonicalization matter?

Duplicate content is a complicated subject, but when search engines crawl many URLs with identical (or very similar) content, it can cause a number of SEO problems. First, if search crawlers have to wade through too much duplicate content, they may miss some of your unique content. Second, large-scale duplication may dilute your ranking ability. Finally, even if your content does rank, search engines may pick the wrong URL as the “original.” Using canonicalization helps you control your duplicate content.

Canonical tag best practices

Duplicate content issues can be extremely tricky, but here are a few important things to consider when using the canonical tag:

  1. Canonical tags can be self-referential It’s ok if a canonical tag points to the current URL. In other words, if URLs X, Y, and Z are duplicates, and X is the canonical version, it’s ok to put the tag pointing to X on URL X. This may sound obvious, but it’s a common point of confusion.
  2. Proactively canonicalize your homepage Given that homepage duplicates are very common and that people may link to your homepage in many ways (which you can’t control), it’s usually a good idea to put a canonical tag on your homepage template to prevent unforeseen problems.
  3. Spot-check your dynamic canonical tags Sometimes bad code causes a site to write a different canonical tag for every version of the URL (completely missing the entire point of the canonical tag). Make sure to spot-check your URLs, especially on e-commerce and CMS-driven sites.

Canonical tags vs. 301 redirects

One common SEO question is whether canonical tags pass link equity (PageRank, Authority, etc.) like 301 redirects. In most cases, they seem to, but this can be a dangerous question.
Keep in mind that these two solutions create two very different results for search crawlers and site visitors.If you 301 redirect Page A–>Page B, then human visitors will be taken to Page B automatically and never see Page A. If you rel-canonical Page A–>Page B, then search engines will know that Page B is canonical, but people will be able to visit both URLs. Make sure your solution matches the desired outcome.

Technical SEO – What are hreflang tag attributes?

The hreflang attribute (also referred to as rel=”alternate” hreflang=”x”) tells Google which language you are using on a specific page, so the search engine can serve that result to users searching in that language.

Code Sample

<link rel="alternate" href="http://example.com" hreflang="en-us" />

Best Practices using the hreflang attribute

To get the most benefit out of the hreflang attribute, the following tips are important:

  • Where the Hreflang Attribute Goes The hreflang attribute can be placed in the on-page markup, the HTTP header, or the sitemap. Only use one of those locations. If you choose the sitemap, this tool can help you.
  • What the Hreflang Attribute Looks Like The hreflang attribute on each page should include a reference to itself as well as to all the pages that serve as alternates for it. If your Spanish website sells Iberian ham to customers in Spain, France, and Portugal only, the hreflang attributes for your homepage might look like this:

Hreflang’s Effect on Rankings

Hreflang attributes may not help you increase traffic; instead, the goal of using them is to serve the right content to the right users. They help search engines swap the correct version of the page into the SERP based on a user’s location and language preferences.

What are HTTP status codes?

All HTTP response status codes are separated into five classes (or categories). The first digit of the status code defines the class of response. The last two digits do not have any class or categorization role. There are five values for the first digit:

  • 1xx (Informational): The request was received, continuing process
  • 2xx (Successful): The request was successfully received, understood and accepted
  • 3xx (Redirection): Further action needs to be taken in order to complete the request
  • 4xx (Client Error): The request contains bad syntax or cannot be fulfilled
  • 5xx (Server Error): The server failed to fulfill an apparently valid request

Six HTTP status codes that are arguably most critical to SEO

404 – Not found

A 404 page not found error is perhaps the most commonly known HTTP status code, and can signal to marketers that a page is failing to deliver content to visitors. The server cannot return information because the resource or URL doesn’t exist. Landing on a 404 page is detrimental to SEO because unavailable content leads to a bad experience for both your audience and the search engine crawlers that are so critical to your SEO success. To address these errors, ensure that any 404 pages utilize a 301 redirect to reach an available and relevant page.

301 – Moved permanently

You’ll recognize this code as the prescribed solution to the 404 errors just mentioned – a 301 status code means that the requested resource or URL has been permanently redirected somewhere else. This code is a valuable tool for sending visitors to relevant content that is available on the site. Marketers can and should set up 301 redirects for pages that are no longer available so that their audience lands on useful content instead of error pages. The 301 code gives search engines the message to update their index for the page.

302 – Found

Similar to code 301, code 302 is another type of useful redirect to know. However, this one is temporary rather than permanent. A 302 code directs browsers to a new URL, ensuring that visitors reach relevant content – but stops short of instructing search engines to update the page index.

307 – Temporary redirect

This code offers a more specific redirect method than the 302 code and has the browser perform the redirect instead of the server. This is useful for sites served on HTTPS that are on an HTTP Strict-Transport-Security (HSTS) preload list. Side note: If you are running an HTTP site, it’s definitely in your best interest to migrate to HTTPS. Thus, using codes 301, 302, and 307, marketers can optimize SEO by closely controlling search engine crawlers’ understanding of what content exists, and how they ought to crawl and index that content.

503 – Service unavailable

This error indicates that the server cannot process a request due to a temporary technical issue. The 503 code informs search engines that processing was stopped on purpose and tells the search engine not to de-index the page (as it would when seeing other server errors). However, if the 503 error isn’t resolved over a long period of time, search engines can begin to view it as a permanent error that warrants deindexing. Therefore, marketers should address 503 errors as rapidly as possible to avoid deindexing of the unavailable page and the negative impact on SEO that would come hand-in-hand with that scenario.

410 – Gone

This dramatic-sounding code means that a resource or URL is unavailable because it was deleted on purpose and was not redirected. When search engines see a 410, they will remove the page from the index instead of redirecting. Marketers should be sure to properly correct any page issues or implement effective redirects so that visitors arrive at content pertinent to their search needs.By at least understanding the most relevant HTTP status codes and properly addressing website fixes that can make or break SEO success – marketers can help ensure their sites function smoothly and offer the intended experiences for both search engines and potential customers.

Technical SEO – Images

Why you should replace animated GIFs with video

Animated GIFs are popular on the web for good reason. They provide more engagement than an ordinary image, while remaining more digestible compared to a typical video. However GIFs are a terrible format for storing video and are often huge in size leading to slow page load times and high data usage. With HTML5 video, you can reduce the size of GIF content by up to 98% while still retaining the unique qualities of the GIF format in the browser.
Large GIFs are inefficient for delivering animated content. By converting large GIFs to videos, you can save big on users’ bandwidth. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.

Convert Animated GIFs To Video

The first step is to convert GIF files to a video format. MP4 is the most widely supported format in browsers with almost 94% of all browsers enjoying support, so that’s a safe default.
Another option is the WebM format which offers high quality videos, often comparable to an MP4, but usually at a reduced file size. However, at this time, browser support is not as widespread so you can’t just go replacing MP4 files with their WebM equivalents.

Use repsonsive images

Ideally, your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger than that just results in wasted bytes and slows down page load time.
The main strategy for serving appropriately-sized images is called “responsive images”. With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on. See Images in markup or Images in CSS to learn more.

Vector based images

Another strategy is to use vector-based image formats, like SVG. With a finite amount of code, an SVG image can scale to any size. Yet another strategy is called “client hints”. With client hints, the browser advertises its viewport dimensions and device pixel ratio when requesting the image, and the server takes care of serving the correctly-sized image. Note, however, that browser support is limited. See Automating Resource Selection With Client Hints to learn more.Tools like gulp-responsive can help automate the process of converting an image into multiple formats. There are also image CDNs which let you generate multiple versions, either when you upload an image, or request it from your page.

Image aspect ratio

If a rendered image has a significantly different aspect ratio from the aspect ratio in its source file (the “natural” aspect ratio), then the rendered image may look distorted, possibly creating an unpleasant user experience.
Explore different image formats
You might be able to yield significant savings just by changing image formats. For example, SVG is often the best way to store simple logos:

  • Avoiding setting the width or height of an element as a percentage of a varable-sized container.
  • Avoid setting an explicit width or height values that differ from the source image’s dimensions.
  • Consider using css-aspect-ratio or Aspect Ratio Boxes to help preserve aspect ratios.
  • When possible, it’s a good practice to specify image width and height in HTML, so that the browser can allocate space for the image, which prevents it from jumping around as the page loads. It’s more optimal to specify width and height in HTML rather than CSS, because the browser allocates space before parsing the CSS. In practice this approach can be difficult if you’re working with responsive images, because there’s no way to specify width and height until you know the viewport dimensions.

Optimized images

Optimized images load faster and consume less cellular data. Check what images below that can be optimized. Optimize each of these images in order to pass this audit. The canonical guide for image optimization is Essential Image Optimization.
Explore different image formats
You might be able to yield significant savings just by changing image formats. For example, SVG is often the best way to store simple logos:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10"
cx="50" cy="50" r="40"/>
</g>
</g>
</svg>

Informative images

Informative images should have an ALT attribute that includes a text description of the contents of that image. Screen readers enable visually-impaired users to use your site by converting text content to forms they can use, such as synthesized speech or Braille. Screen readers can’t convert images. So if your images include important information, that information is not accessible to visually-impaired users.
Add an ALT attribute to img elements. The value of the ALT attribute should be text describing the content of the image. If an image is not informative, if it’s purely a decorative element, you can tell a screen reader to ignore it using an empty alt=”” attribute.

Check also these blog posts>
SEO copywriting – How to write great quality SEO copy
SEO content tips – how to author a good read