How To Internally Link To Location Pages Without Ruining UX

Google sees pages with a high amount of internal links as important to your website, but most websites link more to their privacy policy and cookies pages than they do to the pages that actually make them money!

Location pages (pages that target location based search queries such as “SEO Colchester“) are often the most profitable pages in terms of the traffic they bring into a website, but they’re very tricky to internally link to because:

• They serve no real purpose to people once they’re on your website
• Local towns rarely come up naturally in your content, and linking to them won’t aid the reader

What you do about this will depend on the main purpose of the website you’re working on.

If you’re working on a project where the company isn’t getting many branded searches and you need leads, you don’t have to worry too much about negatively impacting the UX – as your priority is getting traffic to the website.

Remember, it goes: get traffic first, then worry about conversion rates (or UX in this scenario) – you can’t provide a great UX to someone who isn’t on your website.

In that case, you’re fine to add your location pages to the top level menu like this:

If The Website Gets Branded Traffic…

If you’re working on a website that get’s a lot of search traffic, you need prioritise funneling the traffic through to the pages that are most likely to result in a conversion – and that’s not going to be an SEO page targeting a local town.

So instead of adding them to your main menu, add your location page links to the footer, as people are more than used to ignoring all that stuff already!

The Easy Way

Originally when I was doing this for luxury dress shops, scaffolding companies and kitchen designers, I’d create a landing page at /service-area that hosted all of the location page links with some content that explained we cover the following local areas, and then linked to every location page from there like this:

There’d be about 300 words of drivel on the page, and that’d be internally linked from the footer like this:

This worked well and brought in some good leads, but it still meant the location pages were only internally linked from one page.

The Better Way

I now add every location page I build to the footer menu by making them a child of the main service area menu item and hiding them.

I then insert a small arrow icon to the right of the menu icon you can click on to open out the menu, like this:

And guess what? Google Search Console now picks up every single page having an internal link to the location pages!

Plus in terms of user experience – almost no one will ever see that there and if they do, they’ll just think it’s a small glitch (like almost every website on the internet has!)

Here’s How To Do It

If you’re in WordPress, you first need to add the class “ClickOpenSubMenuAbove” to your parent “locations”/”service area” menu item.

If you don’t have the option to add CSS Classes to your menu item, you may need to enable it by clicking on the “Screen Options” button (top right).

Then add this CSS

li.ClickOpenSubMenuAbove { 
position:relative;
padding-right: 14px !important;
display: inline-block;
}
li.ClickOpenSubMenuAbove ul { 
display: none;
position: absolute;
bottom: 23px;
padding: 0;
width: 200px;
background: #fff;
list-style: none;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
}
.ClickOpenSubMenuAbove .toggleSubMenuAbove {
  display:inline-block;
 cursor:pointer;
  position:absolute;
  right:0;
  top:2px;
  z-index: 9;
  font-size: 12px;
color:#b3bfb3;
}
li.ClickOpenSubMenuAbove ul a { 
	color: #404244;
}
li.ClickOpenSubMenuAbove ul a:hover { 
	color: #292a2b;
}
.ClickOpenSubMenuAbove ul li {
  display: block;
}

You may have to play around with this CSS if you have overwriting rules.

Then add this jQuery

  jQuery('.ClickOpenSubMenuAbove').prepend('<span class="toggleSubMenuAbove">&#9650;</span>');
  jQuery('.toggleSubMenuAbove').click(function(){
    jQuery(this).siblings('ul').slideToggle();
  });

This needs to be inside a document.ready function.

And that’s all you have to do.

You can now internally link all your location pages in your footer, without ruining the UX on your website.

Like This Guide?

Let me know by commenting below and sharing on social media.