Taught by Tina May
How your overall website and each page rank in the search engine depends not just on the content itself, but lots of other factors that Google uses to understand how valuable a website is.
This means you need to pay attention to optimizing your website in a way that Google properly understands what the content is about and whether people are going to have a positive experience with what they find.
Optimizing website speed is an important topic because people don’t like waiting. An increase in load time means an increase in bounce rate (the proportion of people who come to your site and then leave again right away), which is a sign of a bad user experience.
Since Google cares a lot about user experience, a slow website also has a negative impact on your SEO. It will drop back in search results, and even if people do find that website, they are more likely to go back without even waiting for it to load. And even if they do stick around, they are less likely to have a great user experience because everything takes too long to load.
To be honest, performance optimization is a topic that can be a rabbit hole. I spent days researching this lesson, seeing what had changed and what the latest recommendations from Google and other experts were. At the end of the day, there is just almost no end in how far you can take it. But it’s definitely a case of diminishing returns. At some point, you might spend hours of work optimizing only to save a fraction of a second.
So rather than diving into really advanced and time-consuming tactics, I’ll focus on the actual steps I take for myself and most of my clients. How you do each of these steps will vary depending on your website platform, but the important thing is to understand the overall process, then look at the documentation for how to do it specifically on your platform like ‘how to add metadata on Squarespace’ or ‘adding alt-tags on WordPress.’
With a big proportion of traffic these days on mobile phones, this is a critical factor, so much that I would say it’s not really worth building out an SEO strategy unless your website is mobile-friendly.
The most obvious but overlooked way to check this is to actually browse your website on mobile and see what the experience is like. Is it easy to navigate? Is the text readable? Is anything hanging over the edge of the page or hard to scroll past?
Grab a phone, or even better, grab two different phones (ideally one iPhone and one Android), and just navigate through each page of your website. Fill out any forms, play with any interactive content (like a gallery) and make notes of what works well and what doesn’t.
Another way of testing is to use the responsive mode in your browser. This isn’t always a perfect match because it’s only simulating the size, but it’s pretty convenient so it’s worth checking.
As you go through, make some notes for what you want to change, and then you can either change them yourself or pass along your notes to your developer.
The next tool we can use to test if a site is responsive is Google’s own mobile-friendly test. It’s a simple tool that tells you Google’s interpretation of whether a website is mobile-friendly. But I wouldn’t substitute your own research for this yes/no test because you’re not just optimizing for Google’s bots, but for your actual readers as well.
A website load speed is primarily based on a number of factors:
This is a balancing act because almost every cool thing you add to a website is going to slow it down a little. On the flip side, the fastest website ever would be just a plain text site with no images, but that would go against the purpose of providing great user experience.
There are a few different tools you can use to test the speed & performance of this, but my favorites are Google’s Web.Dev Insights, Pagespeed Insights Tool and a company called GTmetrix.
Each tool is going to give you a grade with similar insights, although with slightly different criteria for how it calculates scores. What’s surprising is that the results can also vary each time you run the test. I tested the same website consistently over an hour on Google Pagespeed Insights and the score varied from 75 to 86 without touching the code.
Google’s official response to why you get different scores each time is that “variability in performance measurement is introduced via a number of channels with different levels of impact. Several common sources of metric variability are local network availability, client hardware availability, and client resource connection.”
It basically means that websites are dynamic, so loading external resources (Google Fonts for example) might take more or less time each time the speed test runs.
It’s easy for you or your clients to get caught up in the website speed tests and overthink small improvements, but the grades are meant to be taken with a grain of salt. Don’t be disheartened if it increases just a little after you’ve worked to speed it up, but instead use these tests to identify opportunities for improvement rather than a holy grail of validation.
Optimizing your image size
One of the easiest ways to speed up your website is to optimize all the images for your website. If you take images straight out of your camera, they might be 5000px wide and 50MB in size, which is unnecessarily high for most web applications. But once I’ve resized it and optimized it, it can be as little as 0.5MB - or almost 1/100 of the size!
Tip: if this is your only copy of the image make sure you make a backup of the original high-quality version first.
Once I use the Mac Finder to shrink it down to an appropriate size, I’ll upload the image to tinypng.com to optimize them. The cool thing about TinyPNG is that it can often make a big impact on the file size without any visual difference.
And we can see that it’s taken our image from 606KB to 107KB. So this one minute task has made this file so much smaller and faster to load!
While there are more technical methods for Google to crawl your site and index all pages, the easiest way is to make everything accessible from the homepage, or from a page linked from the homepage.
This is generally something you will have already done with most blogs. First, you would provide a link to the blog page from the primary navigation on the homepage. Then from there you would link to all the individual blog pages.
In case you’ve put together lots of pages that aren’t related with the home page, you will want to link them in the footer (we call this secondary navigation) or through another page (for example, sitemap page) to get the most SEO value from them.
Website metadata is largely about meta tags. Meta tags are a type of HTML tag that provides search engines with information about a website page. Whenever you find a website through Google search and then click through to it, you likely did so because of the metadata.
Let’s deconstruct the main elements:
URL folder structure
You can see that for the article we’ve clicked on - moz.com, the page is located in a folder called “The Moz Blog.” While for the searchenginewatch.com, it’s in a folder based on the date.
Title tag
This is the obvious thing you’ll see in a search result and you get to tell Google what this title should be. The character limits for title tags in Google search results are 78 on mobile devices and 70 on a desktop, and I would say for most websites you can keep it short and snappy at under 60 characters.
Date
This will only show if the page has a meta tag for a date, which is not necessarily used by all websites.
Description
While you can explicitly write a meta description just like you do with the title tag, this could change depending on the search terms. Google will either pull what it thinks is the most relevant part of your article (the part containing that search terms) or it will fall back on your written meta description.
To set the metadata of each page, you can either write it in the code, or through your content management system if you’re on platforms like WordPress or Squarespace.
The code looks like this:
<title>The Best Title Example I Could Come Up With</title>
<meta name= "description" content="This is an example of the text that will show up in search results. Read on to learn more about description tags.">
If you want to preview what it will look like on a search result, you can use the website metatags.io
When you create headings in your blog posts, you want to make sure they are relevant to the keywords you’re optimizing for and that they are structured correctly. Headings aren’t just ‘big text’ they’re actual HTML elements that determine the structure of your page.
Your h1 heading is similar to the title, which defines the content of the page. Then you have sub headings throughout the page, you would start with h2s, and if you need sub-sub headings those would be h3s and so forth.
For example:
<h1> The ultimate guide to making homemade donuts </h1>
<h2> Why should you make homemade donuts </h2>
<h2> Homemade donut recipe </h2>
<h3> Homemade Donut Ingredients </h3>
<h3> Homemade donut step-by-step-process </h3>
<h2> Get creative with this unique donut ideas </h2>
<h3> Homemade Cinnamon donut recipe </h3>
<h3> Homemade Chocolate donut recipe </h3>
<h3> Homemade Nutella donut recipe </h3>
The heading structure isn’t about which headings are the biggest in size, but rather about the structure of the site. Then, under each heading, you would have the relevant text and images for each topic.
If you’re on a content management system like Wordpress or Squarespace, you won’t write these in code so you want to look for the section of your content editor that says “Heading 1” “Heading 2” or “h1” “h2.”
Beyond optimizing the size of our images, we also want to make sure that Google understands what they are actually about. The easiest way to do that is to make sure the metadata associated with each image is accurate.
The alt-tag tells the browser what the image is, whereas the title is a tooltip that shows up when you hover over an image. For best practice, you want to use both most of the time.
Alt-tags should match the content of the actual image, not just the keywords you’re trying to rank for. For example, if you’re showing an image of a woman sitting on a beach with her laptop, you want to explicitly mention that. This will benefit not only the search engine but also visually impaired users who rely on screen readers to access a website.
That’s a wrap for everything you need to do from a technical optimization perspective to get your website ready for SEO!
I cannot wait to see the improvement you’re going to make, both from the perspective of Google and your actual users. Because at the end of the day, none of this matters if we aren’t creating content that people love and resonate with them. All of these things that will have a positive impact on your SEO, will also have a positive impact on your user experience. Good luck!