"Sam worked over a number of weeks to tidy up my website, to improve both SEO and UX. He is incredibly knowledgeable in what he does and communicated consistently throughout the project. Highly recommended!"

Emma - Website Owner / Blogger

Face2Face Direct - face2facedirect.com

f2fd hero image

Summary

On this project, the client was looking for help with reorganising their site-structure. They wanted to make several changes to the site without affecting their SEO. And they also wanted help tidying up old posts / links.

downloading sitemap.xml
Setup

I began by doing a quick site audit. First of all, I checked if client was set up on Google Search Console. Then I had a look their current performance so I could make a note of the high traffic pages. It also allowed me time to fix any search errors before the restructure. Next, I downloaded the ‘Redirection’ plugin to the client’s site.  Enabling me to create redirects without accessing the server. And last of all, I created a planning document that we could plan the restructure with.  I did this by downloaded their site-map and imported it into excel. I then removed any unnecessary data and organised the links by type.

The first section that needed work were the many of out-of-date/dead links from old content. I dealt with these by redirecting them back to the homepage/blog (if a blog post). This meant we could salvage any traffic going through these links. Secondly, tags had been overused throughout the site. This was creating lots of thin content and making it hard for pages to rank. We decided to remove all tags and simplify the site structure with a category-only hierarchy.

planning blog changes
Blog Planning

The site has two main sections ‘What’s Happening’ (Blog) and a ‘Directory’ (Business Listings). These sections had been built out of a single blog and had not been categorised properly. Again, this was making it hard to manage and difficult to rank on Google. My first priority was to create ‘What’s Happening’ + ‘Directory’ parent categories and then use these categories to organise all of the content under.

In the ‘What’s Happening’ section there were multiple posts about a broad range of topics. Some were evergreen, some seasonal and some timely posts. To better manage this, I subdivided the blog by topic using the following child categories (‘Monthly Events’, ‘Things To do’, ‘Family Activities’ + ‘Gigs and Music’).

I also moved all the timely content to a single child category (‘Monthly Events’). I then subdivided the category again according to the life-span of the content. (‘Upcoming’ = weekly, ‘Summaries’ = monthly, ‘Seasonal’ = every few months). This was a more manageable system for the client. It also provided better UX and SEO since there are now clearer sections with more relevant content in. Additionally, any changes to the timely content should only affect that category and not the rest of the blog.

category structure
Directory Planning

The ‘Directory’ had lots different businesses categorised under many different categories. This made it hard to manage and created lots of thin archive pages with only 1 business in.  Businesses were also coming and going quite frequently, making it hard to promote the directory.

We agreed to slim it down to 14 main directory categories, with potential to add subcategories if needed. This way the client just could focus on promoting the main categories. It also meant that businesses grouped together would benefit from the category promotion.  And even if a business left the directory, the client would still have the main categories ranking on Google. (Instead of losing ranking every time a business left due to thin archives).

using regex to bulk edit
Local Testing

Before I made changes to the client’s site, I created a local test version on XAMPP. This was so I could create/test redirects + page layouts. It also meant I could show the client the new site structure without affecting their SEO. After agreeing on the site structure, I also used the local site to help create/test redirections in bulk. This method enabled me to set up 100’s of redirects quickly and without errors (which could have affected SEO).

To bulk-create links, I copied them from the sitemap and pasted the links in a html file. Then using REGEX, I was able to  turn the URLs into working links.  I did this by capturing the URLS in a group and then replacing them with the original URL wrapped in an anchor tag. Then I  changed the original domain to my local one so that I could test the redirects on my local site. Lastly, I copied this file and inserted it into a WordPress page.

To test the redirections, I created one redirect for every unique destination. I then exported these as a .csv file and quickly duplicated the rest of the redirects in excel. I then imported this file back into the plugin to test it on the WordPress page. Once happy with it, I exported the final list and used REGEX again (this time in excel), to change the domain to the client’s site. Finally, I uploaded this file to the live site.

editing blog
Blog Restructure

I created a ‘What’s Happening’ landing page to replace the standard archive page. This page was styled to match the original but allowed for more customization. Allowing me to add extra links for the new subcategories so that visitors could easily choose a category. Additionally, I also created a custom archive page for the ‘monthly events’.  Using multiple Divi blog modules I was able to pull through posts for each of the subcategories. This provides visitors with a preview of the subcategories, which they can click-through if they want to see more.  Lastly, these pages can also be modified again if the blog structure changes.

Also the new blog landing pages were created as parent/child pages to replicate the category structure and provide a logical URL.  And I using redirects I was able to send traffic to these custom pages instead of the original archives .  Last of all, the site’s post permalink structure uses the post title only. This means that posts can be easily moved to a new section by simply recategorizing it. This does not break the existing post link since there are no categories in the post URL.

custom directory grid layout
Directory Restructure

I followed a similar process again and created landing/archive pages for all the directory subcategories. However, on the main directory landing page I had problems with a custom category grid layout. I wanted the grid organised a-z and when the screen size got smaller, I wanted the categories to peel off into extra rows. Unfortunately, Divi’s default responsive code didn’t preserve this order. So my solution was to put each category into  separate rows (stacking all the categories in a single column). I then added css to make the parent container a flex box (causing the vertical rows to stack horizontally). And then I added a flex-wrap value (causing the single row to wrap into several rows, fitting to the screen size).

Another issue I had, was adding the a-z section below this. The purpose of the section was to improve UX and give visitors different options for finding listings. Unfortunately, it was made using the WP Gutenberg query-block on the local test site and I was unable to recreate it using Divi on the live site. To fix this, I used the ‘Reusable Blocks Extended’ plugin  (which adds extra options for managing Gutenberg blocks, including creating a reusable block short-code). I created the a-z section as a reusable block, copied the short-code and then added it to a Divi text module (which runs short-codes).

google search console
Monitoring Links

I used Google Search Console to monitor changes during the site restructure. I divided the restructure in 3 phases (‘Deleted/old links’, ‘Blog’ + ‘Directory’).  The goal was to check that changes were successfully showing up on search console before moving on to the next phase. At each phase I made sure the original structure was visible on search console. I then made my change to the site and resubmitted an updated sitemap (created by ‘Yoast SEO’ ). And lastly, I submitted index requests for any significant links that I wanted to monitor.

When Google looked at the new sitemap/the index requests it was able to see the new redirects and new structure. Old links were then excluded in favour of the redirected pages. And new valid pages were added for the new pages that I created. Also the new sitemap  helped show the relationship between the content and the new sections. Allowing Google could rank the new site properly.

Additionally, I also chose a few high traffic pages to monitor performance before/after each phase. This was so I could see if the changes were affecting the ranking of these pages. Most of the site’s main pages had a slight up-tick in traffic or stayed the same (meaning traffic was not lost). Importantly, the new site structure was showing up on search results and set up to perform better on Google. Meaning over time, more traffic should be able to find the page organically.

Animations / Effects

  • -Fade-in animation (using Divi)

Resources