Technical SEO

Go behind the scenes to optimise your site for Google and attract new customers
blog header

Table of Contents

Chapter #5: Technical SEO

Your website is only as strong as it’s visibility.
If no one can find your high-quality, keyword-driven content then everything you’ve done up until now has been wasted energy. The most eye-catching website can’t drive a single sale if no one finds it.
In this chapter we’ll pull back the curtain on technical SEO and teach you how to optimise the technical side of your site so that Google can find you, and so people will love you.
Best of all, you don’t need to be a web developer or tech whiz to get these skills right. So cancel those technical SEO night classes and strap in for a crash course that will have you speaking the language of developers the next time your website needs a little fine-tuning.
“Am I going to need web developers?”
Not necessarily.
But as your website matures and your SEO strategies take effect, it’s 100% natural for small problems to pop up. Think of your website as a car. The more miles you put on it, the more likely you’ll need a service down the line. By learning how technical SEO works you’ll be able to find a developer who understands your site, without being tricked into “upgrades” and “oil changes” you never needed.
To keep things super simple for you, this chapter is divided into three parts:
  • How websites work
  • How Google understands websites
  • How people interact with websites
Let’s get started.

How Websites Work

You wouldn’t build a house if you didn’t know how each wall connected together. In the same way, your SEO strategies will be stronger once you learn how each part of a website works.
When you click on your favourite website it can feel like a simple journey. You asked Google for a result and with one click you were on a website. Behind the scenes, that website has gone through a long technical process starting with the purchase of its domain name before ever resembling the finished version you get to enjoy.
The reason we’re reaching so far back in a website’s history is because the way a site is set up can have a significant impact on its SEO success. For example, missteps in a website’s build can slow down load times, and speed is one of Google’s ranking factors.
To make this easy, let’s assume you want to set up a website for your new business selling gumboots in Wellington, called ‘Wellingtons Wellies’.
Before you can start selling your quality, all-weather boots online you’ll need to set up a website – starting with your domain name.

How New Websites Are Setup and Attract Visitors

Step #1 – Purchase a domain name
Domain names like digitalestate.co.nz or wellingtonswellies.com are bought from a domain name registrar like OnlyDomains, HostGator or GoDaddy. These registrars reserve and manage domain names so that each domain is 100% unique.
Once you’ve secured your domain name and found a website hosting service, you’ll need to build your website. As this chapter is focused on technical SEO we won’t get into the website building process, but with templates readily available you can stand up a winning site in no time at all.
Looking to build a website but unsure how? Check out our WordPress websites for your own fast and professional branding.
Step #2 – Link your domain name to an IP address
Domain names like digitalestate.co.nz or wellingtonswellies.com are for people to read, but the internet needs domain name servers (DNS) to help understand each domain. This is done using a series of numbers known as an Internet protocol (IP) address. For example 14.200.53.40. To you that number means nothing, but to the internet your website just became identifiable.
If you ever need to find your own IP address, use a free online tool like this one.
Step #3 – A user requests your domain
Once your domain is linked to an IP address via a DNS, people can find you by entering your URL directly into their browser,or by clicking on a link to your site. So if the word of mouth around ‘Wellingtons Wellies’ is growing, people can now find your website.
Step #4 – The browser makes a request for your website
Once a user has requested your domain the browser (Chrome, Internet Explorer, Firefox) will make a DNS lookup request to convert your domain name into its IP address. Remember, without this step your website won’t appear because the internet needs your IP address. The browser then makes a request to the server for the code your website is made with. This could be HTML, CSS or Javascript.
Step #5 – The server sends resources
Once the server receives the request from the browser it sends your website’s files to be assembled in the browser.
Step #6 – The browser assembles the web page
Now that the browser has received the resources from the server it needs to put them all together and render the web page so the user can see it in their browser. Like putting together a jigsaw puzzle, ‘Wellingtons Wellies’ needs to be put together by the browser before anyone can enjoy it. As the browser organises your web page’s resources it creates a Document Object Model (DOM).
Step #7 – The browser makes final requests

‘Wellingtons Wellies’ won’t appear properly until the browser download’s your web page’s code, analyses it, and executes it. If the browser still needs more code it will make another request to the server.
Step #8 – Your website appears in the browser
Just like that, ‘Wellingtons Wellies’ appears in front of a user. In a matter of seconds (sometimes milliseconds) your website has been transformed from the code it was built in (this is called rendering), to a professional site ready to supply gumboots to the good people of Wellington.
Simple, right?

Most Websites Are Built Using These 3 Common Codes

You understand the website journey from domain through to appearing in front of users, so now we’ll zoom in and see what websites are made of. This is known as the code, which is the programming language used to construct websites.

The 3 main types of web code are: 

  • HTML
  • CSS
  • JavaScript
Think of these 3 types of codes as having different jobs to bring a website to life. HTML is what a website says (content and titles). CSS is how a website looks (fonts and colours). And JavaScript is how a website acts (interactive and dynamic elements). Let’s learn a little more about each code.
HTML
HTML, standing for Hypertext Markup Language, has been around since the 1990’s and is the backbone of most websites. The simplest of all web codes, HTML can define your site’s features like headings, content, coloured text, lists and paragraphs.

You won’t need to learn how to write your web pages using HTML. Most CMS platforms, like WordPress websites, allow you to upload content and make changes in simple, user-friendly formats. The changes to your site’s HTML will automatically happen behind the scenes. For example, creating an H1 headline won’t require you to modify your HTML and add the coding tag of – 

Heading 1

Just because you can’t see the HTML doesn’t mean it’s invisible. Google crawls your HTML elements so it’s crucial you’re using your CMS to assign SEO features like headers and not just increasing the size of your text. Larger text may look like a header for your site visitors, but Google won’t be able to see where your headers are, which can cost you relevance and harm your rankings.
CSS
CSS, standing for cascading style sheets, is the second most recognised code after HTML. If you want a stylish, customised website that stands out from your competition, you’ll need CSS. While HTML was designed to describe content, CSS was designed to style it. CSS will allow you to beautify your website and add unique features that showcase your professionalism AND keep people on site (which is great for your SEO). It’s worth noting you can customise a site using HTML, but it takes time and skill (especially for larger sites) making CSS a game-changer.
If you want to optimise your website, there are a few aspects of CSS you’ll need to care about:
  • CSS files can house style directives, keeping them out of your page’s HTML. This makes your website less code-heavy, reduces file transfer size, and can make your website load faster.
  • CSS files are still downloaded by browsers. By compressing these files your website can load faster, giving Google another reason to rank you over your competition.
  • CSS files can take the pressure off your site’s code. This can lead to better indexing of your site’s content.
JavaScript
If HTML and CSS are the two foundational layers of web technology, then Javascript is the icing on the cake. When a website is more than a static display of information – think interactive elements, timely content, animated 2D/3D graphics, and scrolling videos, then JavaScript is likely involved. JavaScript allows for dynamic content that brings your web pages to life.
If you’ve been browsing your favourite eCommerce store and seen an exit pop up with an exciting flash sale, this is an example of JavaScript. In fact you’ve seen JavaScript in action many times before but likely not noticed. Although JavaScript is widely used, it does pose some problems for SEO. This comes down to client-side rendering vs server-side rendering.
Most JavaScript is executed in a user’s browser, but with server-side rendering the files are executed at the server before being sent to a user’s browser fully rendered. This can cause Google to miss certain ranking features like links and text. We’ll save the super technical stuff, but the bottom line is that JavaScript can cause problems for your SEO campaign if you’re not careful.

How Google Understands Websites

Imagine you were reading a 5,000 word article on baking the perfect pavlova.
How would you quickly find out the most important information, like the recipe, the ingredients, the author and reviews from others who baked their own pav?
Google has that same issue. Enter schema markup.

Get More Clicks With Schema Markup

Schema markup is code you put on your website to help Google return more informative and specific results to search engine users. You can explicitly tell Google what type of information your content includes, which can make your results on the SERPs stand out.
Here’s how it works…
Schema markup provides structure to your data, which is why schema is often called ‘structured data’. By adding schema markup to your own web pages – in the form of code – you may be able to highlight unique aspects of your business including articles, events, products, people, organisations, reviews and recipes. These all have the potential to appear alongside your SERP results which can increase your click-through-rate (CTR) and make your business stand out. These are known as rich snippets.
Rich snippets are not guaranteed through the use of schema markup, but there’s no chance of securing a rich snippet without schema markup. If you’re getting your SEO campaign off the ground schema markup shouldn’t be your focus, but for more advanced campaigns there is an upside.
For example, here is the result for a page implementing schema markup for Events. You can see the website’s page title and meta description (which you mastered in Chapter #4: Onsite Optimisation) as well as rich snippet in the form of upcoming dates for events in Christchurch.
If you were looking for something to do in Christchurch, this result would be more enticing to click on than a SERP result without schema markup. That’s the power of schema.
There are many different languages of code that can be added to your site’s HTML to embed schema, though JSON-LD is Google’s preferred schema markup. If you’d like to learn more about the full list of available schema markups, check out Schema.org or the Google Developers Introduction to Structured Data for more information.
A few quick tips on schema markup:
  • You can use multiple types of schema markup on the same page to trigger multiple rich snippets. However, if you mark up one element on a page, e.g. a product, you must mark up all products on the same page.
  • Provide original and up-to-date content on your structured data pages.
  • Marked up reviews should be written by real, 100% genuine customers, not your own business.
  • Use schema markup on duplicate pages, not just the canonical version.

What to Tell Google When You Have Duplicate Pages

Having the same content on multiple pages isn’t going to set off alarms at Google headquarters – but it does impact your SEO.
When Google crawls the same content on two different pages it needs to choose which version to index. Google is able to see that the pages are the same (or a close variation) and will choose one page as the original (canonical) and crawl that. The duplicate pages are crawled less often.
This could lead to your best pages being made invisible because they share content with a page you didn’t want to rank, for example your own content published on another website; or the difference between a mobile and a desktop version.
To make sure Google indexes the right page you’ll need to use a rel=”canonical” tag. This tag is placed on duplicate content and used to help Google find original pages and avoid indexing the duplicate content. It’s your way of saying “Kia Ora Google! Don’t index this page, index the original page instead!”. So, if you’ve got a piece of content that’s exactly the same, or a modified version of existing content, the canonical tag can stop your SEO from suffering.
Here’s what your canonical tag will look like:
Canonicalisation ensures each piece of original content on your site only has one URL. That way Google won’t inadvertently index multiple copies of the same page. Google recommends having a self-referencing canonical tag on every page on your site, so it’s worth getting this SEO optimisation strategy right.
Google loves original content that helps users solve their problems. If your content has been copied from another source, it’s highly unlikely your copied version will appear on the SERPs. Instead, the canonicalised version will take priority, so skip the entire duplicate content problem and stay on top of your canonical tags.

How People Interact With Websites

Digital Estate’s ‘Introduction to SEO’ was created on one guiding principle – SEO is about people as much as it is search engines.
Kiwi business owners who focus on technical SEO and ignore the needs of users end up shooting themselves in the foot because search engines exist to serve searchers. Google promotes and prefers sites that offer the best user experience (UX).
When people find relevant content, and are served fast and professional websites, they’ll come back and use Google again, and that’s great for Google’s bottom line. This is also why some sites with excellent backlink portfolios end up ranking poorly.
Webmasters who saw that backlinks were a major ranking signal might have seen dollar signs and ignored their users while they built guest posts, diversity links and niche edit links. But unless their sites offer quality content and an easy browsing experience, those links aren’t enough to drive rankings.
If you can optimise your website to deliver a superior user experience, you’ll be giving people what they want and maximising your search engine results.
Here’s how you turn your website into the hottest digital destination.

Keep Your Mobile Visitors in Mind

Think back to the last few Google searches you made. Were they on a laptop? Or, were you out and about and used your mobile phone to find info on the go?
More than half of all web traffic comes from mobile, so keeping your mobile site visitors in mind should underpin every decision you make. In 2015 Google rolled out an algorithm update that promoted mobile-friendly websites over non-mobile-friendly websites. This is a black and white issue too, your site is either mobile-friendly…or it’s not.
Let’s use your own favourite websites as examples. Do the sites you browse using your phone have easy to read text? Obvious menu buttons? And a simple design that makes browsing fun?
These are examples of well optimised mobile websites. To get your own mobile optimisation underway, let’s start with a little history.

Mobile-First Indexing Has Arrived

With the majority of people using their mobile phones for search, Google made an algorithm change that has the potential to ruin your rankings if you don’t optimise for mobile.
As of 2018, the mobile-version of a website was predominantly used for indexing and ranking. This means a site without a mobile-friendly experience is likely to lose rankings when competing with a site that has a better mobile experience.
In the SEO world this caused some confusion between mobile-friendliness and mobile-first. So we’ll break each definition down for you now.
Mobile-first: This means Google is crawling and indexing the mobile version of your website. This happens whether your website is mobile-friendly or not. As a result Google can crawl your site, realise it’s not optimised for mobile, and your rankings suffer.
Mobile-friendly: This means your website functions the same way regardless of device. It shrinks to fit a smaller screen, but the elements don’t change to create a better user experience. Nothing changes other than scale, and though mobile-friendly sounds like a positive term, many of your site features will be limited.
If you want your website to be truly optimised for mobile, you’ll need to opt for responsive design.

What Is Responsive Design?

Websites designed for desktop can become a nightmare on the smaller mobile phone screen. To solve this frustrating problem, the best mobile-friendly websites use responsive design.
Responsive websites are designed to fit the screen of each device they appear on. If a user finds these sites on their desktop, tablet or phone, the website responds based on the screen. This is Google’s preferred web design type, with CSS able to modify the appearance and ‘respond’ to each device. This could turn your site into a single column on a smartphone, or two columns on an iPad. That means no annoying pinching or zooming needed, just a uniform browsing experience wherever people find you.
If you’re unsure whether your website is mobile friendly, use Google’s FREE Mobile-Friendly Test to find out.
Click here to use Google’s Mobile-Friendly Test

AMP Websites Explained

The speed your site loads has a direct impact on your SEO results. You can deliver fast loading times by opting for Accelerated Mobile Pages (AMP). AMP pages are essentially stripped down HTML copies of your existing page that load faster than your actual web pages.
By delivering your content from its cache serves, as opposed to your website, AMP can reduce the need for CSS requests and eliminate some on-page features that take time to load.
Curious to learn more about AMP? Find out how AMP works in depth here.

How to Improve Your Mobile Site Page Speed

How long would you wait for a website to load before you look for a faster site?
37% of people will bounce if your site takes 5 seconds to load, with that number going up significantly for every additional second. Google wants to avoid frustrating people, so websites that load quickly on mobile devices get a rankings advantage.
To save you time we’ve hunted down some speed optimisation tools you can use to improve your load times as part of a conversion rate optimisation strategy.
  • ✘ Google’s PageSpeed Insights Tool
  • ✘ Google’s Page Speed Best Practices Guide
  • ✘ Google’s Mobile Website Speed & Performance Tester
  • ✘ Google Lighthouse

Are Your Images Slowing down Your Page Speed?

Images are vital on a website to break up text and create an engaging user experience. At the same time, too many images can cause a site to load slowly and drive people away in frustration.
In Chapter #4: On-Site Optimisation, we learned of some quick wins to boost your image load speed, including:
  • Image compression
  • Optimising image alt text
  • Choosing the right image format
  • Submitting image sitemaps to Google
If you want to go a step further to optimise the speed of your page when loading images, here’s a few tips from the Digital Estate vault:
#1 – Use an SRCSET attribute
The attribute lets you have multiple versions of your images and choose which version should be used in different situations. You add this code to the tag, which is where your image is located in the HTML, to deliver size-specific images to each device. Don’t stress if this sounds overly technical, just think of the SRCSET attribute as a type of responsive design for images.
#2 – Use lazy loading
If you’ve ever been to a website where images start off as blurry, lightweight pics before crystallising into the finished image, you’ve seen an example of lazy loading. Essentially, a low resolution version loads until the high resolution image is fully rendered.
This low-res teaser can stop users from feeling frustrated while images load fully. Instead of a blank space that reflects poorly on your site, your images arrive without upsetting users.
#3 – Condense and bundle your files
If you’ve ever Googled ‘page speed optimisation’ you might have come across a recommendation to ‘minify your resources’. This refers to condensing a code file by removing things like spaces and line breaks, and abbreviating code where possible.
‘Bundling’ is another common image optimisation term which combines the same coding language files into one single file. This could involve placing JavaScript files into one larger file to reduce the total number of JavaScript files.

Technical SEO Tips for International SEO

If your website targets people from multiple countries you’ll need unique international SEO strategies.
Without using these broader SEO tactics it will be tough for customers in Australia and beyond to find your website. To keep things simple, here are the two main audiences to optimise for to generate international SEO success.
  • 1). Language
  • 2). Country
Let’s start with language.
Websites that target customers speaking foreign languages are known as multilingual websites. If your site is multilingual you’ll need to add an HTML attribute known as a hreflang tag. Your hreflang tag lets Google know your site has a version for another language.
OK, Moving onto countries.
Websites that target audiences in multiple countries are known as multi-regional websites. If your site is multi-regional it’s recommended to use a URL structure that makes it easier to target your domain to multiple countries. This might include a country code top level domain (ccTLD) like “.nz” for New Zealand. Or, a generic top-level domain (gTLD) with a country-specific subfolder like “example.com/nz” for New Zealand.

Another Chapter Down and Another SEO Skill Unlocked

In a few short chapters you’ve gone from SEO beginner to SEO pro.
Right now you could find the most valuable keywords, create irresistible content, and optimise your website so it appeals to Google and people.
But none of that will matter…unless you can build a backlink portfolio that takes what you’ve learned and supercharges your rankings and traffic.
In the next chapter we’ll teach you about the value of links, how to build high-quality links, and the link building mistakes to avoid at all costs.
Ready for the missing link in your SEO puzzle?
Let’s get right into it.
Chapter #6: Link Building 101
×
Please select your product