SEO Web Design: A Guide For Designers

SEO is an important part of web site design which helps web designers to create websites with higher ranking on SERP.
Using correct web page structure, adding HTML tags in the right order, with recommended number of symbols and many other things that web designer could do are highly appreciated by search engines.

Unless your clients invest in a lot of paid advertising, organic search will likely be their biggest and most sustainable source of traffic. The quality of the website you produce will determine rankings and have a big impact on the SEO and content work that will go on after you.

As a web designer, it's important to have a solid grasp of how search engines actually work if you want to get the best results for your clients. Your decisions have an impact. When you know how they work, you can do your best to build a website that'll be easy for search engines to understand.

Search engines must be able to 'read' a website to understand the content and rank it accordingly. Presenting a website in the most SEO-friendly way takes some planning – it requires a structured approach that makes sense for the business and its products or services.

The way that you set up the website from an architectural point of view will impact how well the website database and content can behave from a search perspective.

You need to implement a website design that's:

Additionally, factors like speed and mobile-friendliness have an important role to play. The best websites satisfy users and search engines equally and don't let web design get in the way of usability or speed.

Let's begin by looking at what web designers frequently miss or get wrong, so you can be sure you're not making the same mistakes with your web designs.

Headings – I'm talking about H1s, H2s, and H3s. It's quite common to see a web page with several H1s – or none at all. Designers often come at headings from an aesthetic point of view: if the headings look nice as H1s, does that matter? As a rule, there should only be one H1 per page, with the rest of the headings broken down into H2s, H3s, H4s and so on.

Flash – Flash was once very popular, but it's a disaster for search engines. If you must use Flash, limit its use to small, inconsequential web design elements. Important, keyword-rich content should never be shrouded in Flash – or search engines simply won't see it.

Javascript menus – Javascript navigation menus are cool, sure. But search engines can't read them, which means it's harder for them to make sense of the website's structure. Remember, the easier you make it for search engines to do their job, the better.

Lack of competitor research – Look at the top sites ranking in your client's niche — what design choices have they gone for, and why? Knowing that written copy is important for search engine rankings — how much space have they left for content? It's common to see very paired-back sites that look nice, but that ultimately fail to make an impact in search engine results. Make sure your design allows your client to be competitive. It will also ensure that there will be no expensive 'SEO fixes' that go on after your web design has been launched.

Poor migrations or design upgrades – You might have just made the site look better, but you could have just as easily decimated the site's SEO rankings. An old website may enjoy really great search rankings, and taking away content, changing the URL structure, or botching the migration could see all that traffic disappear overnight. Always ensure that a design upgrade improves the current SEO standing and change the content as little as possible.

Subdomains, frames, AJAX – These are just some of the ways that designers build sites that aren't search-friendly. If possible, try to stick to HTML as much as you can and don't take too many shortcuts with your coding. A clever plugin may save you some time, but be sure that it checks out from an SEO perspective.

Search engines are in the business of constantly updating their algorithms to provide the best results for users. Not only the most relevant results, but also those that provide a good user experience. Websites with poor user experience tend to have a higher bounce rate, telling Google (or whichever search engine) that the website didn't meet users' expectations.

In this way, usability has an indirect but noteworthy effect on how search engines determine quality. All this means that you can't craft a website around search principles alone – you must also consider how it'll be perceived by users and make the experience as easy and pleasant as possible. A great user experience also encourages sharing, bookmarking and more inbound links, which is always a good thing.

So how can you ensure a website appeals to visitors and create SEO friendly web design? Just a few things to consider are ease of navigation and internal search functions, high-quality imagery, fast page load times, a simple, consistent page layout, and mobile display.

Some tips to help make your designs user-friendly:

• User testing and A/B testing can help test out design features before the full web the design is launched

• Form entry or design is where usability can easily break down, so make sure you test yours. Make it as simple as possible

• Think about accessibility too — font size and colors can have a big impact on website engagement figures

• Streamline. Don't ask too many questions from the user — think about the commercial journey and don't make them think too much!
  

A website's menu structure has the power to improve your search rankings, leads, and conversions – and conversely, to hike up bounce rate and frustrate users if handled poorly. Web designers should dutifully abide by best practices for website navigation design wherever possible, such as using descriptive labels, limiting menu options, and avoiding drop-down menus where possible. Navigation design is where you can have a big impact, so take this part of the design seriously.

Dropdown menus are bad for users and bad for SEO — but if you do resort to one, make sure it's in HTML and that it's designed based on user experience and usability, not just aesthetics.

This complex submenu and menu overlay on Boots.com makes navigation complex for the user, and potentially confusing for search engines as well. Not a very user-friendly menu design at all.

Amazon has a huge product catalog, but they have managed to create a more user-friendly (but still text-heavy navigation system):

The real strength of Amazon is its stellar search function that allows users to quickly follow breadcrumbs and find nested categories based on search results.

Focus on the universal navigation, but allow for multiple menus as well. This example from Book Depository is a good example of how curated lists can make for good secondary menus:

On the other end of the design spectrum, Hootsuite have opted for a clean and simple main navigation that highlights the commercial call-to-action:

It's a very clear, non-obtrusive menu that keeps the core focus on the user's next steps.

Think about your web design in the same way — you want the main navigation to work in conjunction with the header image, CTA, and user journey. It's like the skeleton holding everything together, so spend time testing and tweaking it.

From a site structure perspective, try to map out all the website sublevels and folder directories from day one so that you have all the essential website building blocks to hand. These will massively influence the site's URL structure, which has a big impact on SEO. Don't let the way you've designed the site create unnecessary subfolders and complexity.

Remember, the fewer page levels you have, the better, so where possible, consider condensing multiple pages into fewer pages, and don't be afraid to create standalone landing pages for social or promotional purposes.

It's best to map out your designs in an incremental way, starting from the homepage and landing page, cascading to category and blog pages. This means that logic will be very strongly built into your designs.

As a web designer, you hardly need to be told about the importance of mobile-friendly design, but it bears repeating on occasion, as many websites still get it wrong. Again, this all comes back to usability. Brands that offer an exceptional mobile experience will have a considerable advantage as user behavior shifts en masse towards mobile devices.

There are three approaches to mobile web design: separate URLs, dynamic content, and responsive design. Google helpfully offers a number of tools you can use to test a website's mobile usability, Search Console being one of them. Speed is critical on mobile too – most users will leave a mobile website if it takes more than three seconds to load. Bear in mind that mobile data networks are not always as swift as Wi-Fi.

Website builders like Shopify and Squarespace come with templates that are already mobile-responsive. It's now even easier for users – and clients – to do this for themselves. As a web designer, it's up to you to match and build on what out-of-the-box solutions are offering. A mobile-first design might make sense for your client and niche.

Google has stated on various occasions that responsive design is their preferred mobile configuration, which is worth bearing in mind if you're just starting out on a new design project. Some speculate that responsiveness is a ranking factor in itself.

If you're a web designer looking to improve the SEO value of the websites you design for your clients (and if you're not aiming to do that, why?) then here are some tools you may find useful.

• BROWSEO – a web app that allows you to view any web page without distractions caused by styles. Essentially, how a search engine sees your website

• GTmetrix – gives you insight on how well your site loads and provides actionable recommendations on how to optimize it

• Website Responsive Test – use this to test your website's responsiveness across multiple devices with different screen sizes instantly

• ScreamingFrog - crawl an existing site like a search engine spider and get a feel for the site's indexation and structure. Will help with planning a re-design and talking to developers and content teams.

Join us on Facebook and Twitter to follow our service updates and new blog posts :)