UX Archives - The New Black

301 redirects and 404 errors – what are they, and why do they matter?

by Gemma Dixon | Oct 17, 2023

If you’ve worked with an agency before, you may have heard them refer to a 301 redirect. If you nodded along like you knew what they were talking about, but secretly had no idea, then this is the article for you!

So, what IS a 301 redirect? In a nutshell, it’s a permanent redirect from one page to another, essentially telling search engines and users that the URL (or web address) for your page/content has moved. The number refers to a code that the web page sends to the server when it loads. There are a bunch of different numbers which all mean different things – one of the others you might be familiar with is 404 – this means the page couldn’t be found or does not exist.

These 2 codes are interlinked. Ideally, you don’t want a visitor to your website to encounter a 404 error – it means they can’t find the content they’re looking for on your website, and this can be detrimental to their user experience.

There are three main reasons why someone may encounter a 404 error:

The person visiting the website has typed the URL in incorrectly.
The URL of the page has been changed for some reason (e.g. you may have noticed a spelling mistake and corrected it, or perhaps for SEO reasons you changed it to something more keyword rich).
The page was no longer relevant, so you deleted (or hid) the page.

All these scenarios would result in a 404 error, as the page could not be loaded using that particular URL. The first one you can’t do much about as you do not have control over user error. However, the second two you can control.

When to use 301 redirects

If the URL for a page is changed, or a page is removed, you can use a 301 redirect. This tells the server that the old URL doesn’t exist anymore (i.e. its web address has changed), but here is the new page that the person should visit instead. This means the visitor can still access the content they were trying to find.

There are some general rules around 301 redirects – you shouldn’t just redirect people to the home page of your website if there is content that is more relevant to the original page on your website.

Redirects also play a big role in website redesigns. If as part of the rebuild process all the URLs on your website change, you need to make sure you tell people how to find the new pages. For example, if on your old website you had a page called www.mywebsite.co.nz/about/ and on the new website you change the URL to www.mywebsite.co.nz/about-us/. If someone tries to visit the old page it would return a 404 error as that page does not exist anymore, but you still want that person to find the right content. So, you would enter in a 301 redirect that tells the server (and search engines) that a new page exists instead, and it would automatically send the visitor to the new page.

What about SEO?

This also has big implications for SEO. If you had a well-performing web page that was indexed by Google and sent a lot of traffic to your website, and you then remove that page or change the URL, you essentially lose all the SEO value (and possibly traffic!) that the page offered your website, because Google can no longer find it. But if you put in a 301 redirect to the new version of the page, or the closest equivalent, you can usually pass that SEO value to the new page. You are basically telling Google that the content you used to rank for is now located on a new page, so visit/crawl that page instead (word of warning though – you can still lose this SEO value overtime if the new page isn’t as optimised for SEO as the previous one).

If you have a URL (i.e. web page) that is indexed by Google, and you remove that page or change the URL, the old URL can still remain in Google’s index for quite a while. So, if a potential customer searched for “best organic moisturiser nz” and your old web page ranks well for this term, but the URL no longer works, when this customer clicks the link in search results they will land on a 404 error page. What are they likely to do? Hit the back button and find a new web page that actually works? Highly likely! So, you’ve potentially lost a sale. However, if you had put in a 301 redirect, instead of the customer finding a 404 error, they would have automatically been redirected to the new correct version of the page and they will have received the content they were looking for.

What about user error or if I forget?

Setting up a custom 404 page is a good catchall if you miss a redirect, or a user types your URL incorrectly. These can direct people to the right information. For example, adding a search box so they can re-search for what they were looking for, adding some highly visited links etc.

Some CMSs can also determine what the person was looking for – if they type one letter incorrectly, smart systems can determine that they were actually trying to find page XYZ and send them there anyway.

Pattern redirects and wildcards can also work well if you have URLs with a lot in common.

In summary

Think of it like Google maps. If your business used to be at address A, but then you move to address B, you need to tell your customers you have moved so they can find you, otherwise they’ll turn up at address A trying to find you (hello 404!). This is frustrating for everyone and could result in a lost sale. But if you had updated your address online to address B, when that same customer Googled you, they would find the right address and end up in the correct location (thanks 301!).

Therefore, 301 redirects are important for both SEO as well as user experience. By not paying attention to these you have the potential to lose SEO value, and also lose customers.

Four tips for optimising images on your website

by Gemma Dixon | May 15, 2023

Imagery can make up a large component of a website, so having optimised images is good not only for SEO, but also for the users’ experience.

The size, filename, and tags of an image are all factors for Search Engine Optimisation – helping search engines understand what an image is about, and keeping the size of the website small so it loads quickly.
The size and title of an image also impacts your users’ experience – large images are slow to load, and can cause the whole page to be slow (which can be very frustrating for your website visitors). Plus, your visitors are essentially downloading these images, and if they’re using mobile data this can eat away at their data.

Here are four key things that should be considered when managing the images on your website, to help improve SEO and also your users’ experience on your website.

Image Size
Every extra image or file that is on a website creates additional load that has to be downloaded to someone’s computer/device from the server the website is hosted on. The larger the image size is, the longer it will take to download and the longer it will take the web page to load. Not only is this frustrating for the person trying to load the website, website page speeds and load times are now an SEO issue, as it is one of Google’s ranking factors. So, it is important to keep websites light and fast.

Before images are loaded to the website, they should be resized. If an image on the web page will only be displayed at 520px wide, then it’s unnecessary to upload the image at 3,000px wide at 300 DPI (which is really meant for print). A good rule of thumb is to try and get smaller in-page images down under 100-200kb in size. For large banner-type images having them larger is fine, but still under 500kb, or as close to it as possible. These images are often displayed at around 1,920px – 2,000px, so will need to be larger. For banner images, it’s also important that the image is actually big enough for the space – if it is too small it will get stretched and then look blurry, which does not give a good first impression.

One final thing to consider is the orientation of your photos – try and make sure you choose an image that fits the space, or can be cropped to the correct dimensions.
Compression and file type
After resizing your images, sometimes they will still to be too large in terms of file size. Some images and photos retain a lot of unnecessary data within the image, which for web and screen purposes can be stripped out. Another thing to keep in mind is the file type. PNG images tend to be larger than JPGs, so unless there is a reason why the image needs to be a PNG (such as it needs a transparent background, it’s clearcut etc.), convert the image into a JPG or WEBP file.

After resizing your images, it is good practice to also compress the images. There are plenty of free web compression tools out there, but the one we use is tinyjpg.com. This will strip out the unnecessary stuff and get the file as small as possible. If you have Photoshop, you can also use the ”Export for web” feature which will also compress the image, and this can also change the file type if you need to as well.
Image file name and title
Naming files correctly helps search engines understand what an image is about – search engines use the file name and the alt tag (see below) to “see” an image. A file name such as DSC_495869.jpg means nothing to search engines (or users!). However, something like blue-leather-handbag.jpg has a lot more meaning and context. Try and rename image files before uploading them to the website.

WordPress also automatically takes the file name and turns it into the image title, so this is important to keep in mind as well, especially if the title is being converted into the image alt tag. Sometimes, the image title will also appear when you hover over an image on the website – so to make it look more professional, and also make sense to your visitors, having something meaningful in the WordPress image title field is good practice. Having good image titles also makes it much easier looking for images in your media library later. You can edit the titles later, but this creates more work.
Image alt tags
All images on a website should have image alt text, which should contain a keyword rich description about the image. Search engines cannot read images, so the alt attribute is what tells the search engine what the image is about – so it is an important factor for SEO. It will also appear as a text description of the image if an image does not load in a visitor’s browser and is also used for screen readers. So, it is important that the alt tag actually describes the image, in a keyword-optimised way.