SEO Wireframe Design Playbook
Page-By-Page Advanced SEO Wireframe Design Layouts
SEO features are rarely the most important elements of web design wireframes. Frontend web developers and designers tend to receive basic Search Engine Optimisation (SEO) design features from either templates, themes, the CMS, or additional plugins. SEO within web design can be therefore like roulette.This Wireframe Design SEO playbook, from Matt, is based on ten years worth of SEO wireframe web design experience. It's a chance to update web designers and developers that are in a position where they need to advance their design SEO techniques - whatever the journey or landing page. Hopefully this guide also works towards inspiring more SEOs themselves to push the boundaries of what SEO they can recommend (tastefully!) within ultra design focused wireframe design stages. Here's what's contained:
- General SEO Ranking Factors ▾
- Overall Content Structural Suggestions ▾
- Navigation SEO Design ▾
- Homepage SEO Essentials ▾
- Article SEO Framework ▾
- Product Page SEO ▾
- eCommerce Category SEO layout ▾
- Content Category/Hub SEO layout ▾
- FAQ Page SEO Structure ▾
- Local SEO Page Design ▾
- Service Page SEO ▾
- App/SAAS Page SEO ▾
- Video Page SEO ▾
- Footer Design SEO ▾
General Ranking Factors
Before we begin, SEO isn't just an SEO plugin and metas
Whenever I have spoke with web designers in the past I have found that some (not all!!) have said to me that they already do SEO, and that is true to a certain extent. You are doing SEO if you download and install an SEO plugin, and if you open the SEO metas to make them available in the code. But - it's fair to say that doing SEO doesn't really give SEO as a process the thought that it needs, there's more to it - and in many ways more doesn't mean further changes to a web design, because a lot of SEO is behind the scenes.
Figure 1: Here's a very general graph to show broader SEO factors
Overall Structural Suggestions
It is not enough to leave content merely to a bloated blog
Bloated low quality blogs literally bury ranks. It's not enough anymore to leave content merely to a bloated blog, or just 200 words. Content is way too big an item in SEO to leave merely to a single corner of a website, or hidden side containers.
Figure 2: A website should be designed around many content formats and templating
Today, Google demands endless 100 word answers to questions for it's featured snippets. Equally, tools such as calculators go a long way to prove your expertise and usefulness online. These are key elements in modern content SEO, and so-far-as structuring a website - it is essential to think about the many variations of content journeys that Google needs beyond articles.
Figure 3: Content for the sake of content lacks the proper SEO steps
Articles are of course essential as a form of content, but writing and publishing article content (at scale!) before some crucial SEO steps (see above) have been conceived, will more often than not make it a challenge to succeed in search. For instance, keyword content search research is vital, as is getting your technical SEO in place, and making 100% sure that your targeting on product/service pages are able to benefit fully from content e.g. internal link sculpturing.
Homepage SEO Layout
You won't always be able to bank on a homepage for SEO, CRO is more important
Sure, add a few Headers for SEO where you can, and add as much relevant/unique html copy as possible. But make sure that users don't bounce, and give them as much access to the proof they need to trust you - and, most importantly, be convinced to buy from you. This is way-way more important.
Figure 4: You can't always bank on your homepage for ranks, especially when product lines grow
Conversions Rate Optimisation (CRO) is key just as much to Google as it is to users. Protecting yourself from bounces back to Google, sending users out to the product pages that they need fast, and solving key sector/customer issues fast with links to cornerstone content will stand you well for ranks, topicalities and conversions.
Navigation SEO Design
It is important not to overload main website navigations
Main website navigations should push users quickly out to relevant categories, they should not take a morning to digest. It is important not to overload main website navigations, this is to aid the flow of authority given by Googlebot to major category pages and their 'fat-head' keyword targeting. It is these major category pages that then sequence a lower distribution of authority to tier-3 long-tail subcategory pages.
Figure 5: Menus should not be overloaded, and feature only major pages for SEO
Too many links in navigations can flatten the hierarchy of internal linking page authorities across a website - and this can starve priority (top category) journeys benefiting from top linking signals, and therefore better chances of key ranks. Priority pages deeper in the site should also be supported within navigation breakouts, or boxouts in the main navigation. This is to benefit pages that do well in search for conversion or the creation of major/beneficial search traffic volumes.
Article SEO Wireframe
Well performing articles are no longer one-dimensional
Simple bodies of words and a header do not do well for ranks typically any longer. Well performing articles are no longer one-dimensional. Both from an SEO and design perspective - it is no longer just about copy, headers and bylines alone (if you're lucky!).
Figure 6: Articles don't rank easily without a depth of SEO additions that also improve engagement
Today it is wise to push beyond one thousand words, but to do that you need to improve the navigation features of articles, e.g. Html anchors. Sales language in content is not only a turn-off for users - it is also algorithmically detected by search engines today, and can therefore reduce ranks. So keep the bulk of call-to-actions or sales chat out of articles.
Product Page SEO
Take advantage of an SEO's ability source popular unknown product variations
Often the true demand and desire of a product is never fully satisfied unless the product searches are fully understood and researched by an SEO. Sizes, colours, styles, and language alternatives make for compelling reasons to stretch your product listings, and take advantage of an SEO's ability to identify these patterns - then respond to these insights within the product pages.
Figure 7: It is important to add further detailing to compete on trust with the likes of Amazon
It is today, fundamental to apply product schemas, as many multimedia items as you can scale. Cleverly formed trust signals such as publisher logos and supportive content (e.g. FAQs) also reduce exits back to search engines which is something detected by Google and used as a ranking factor.
eCommerce Category Page SEO Design
A long list of products and some text at the bottom doesn't cut it in SEO anymore
The competition is stiffer in eCommerce than ever before, so a long list of products and some text at the bottom doesn't cut it in SEO anymore. Especially seeing as though category pages allow eCommerce retailers to often target way-way bigger search phrases than maybe understood. Using category pages as gateway pages to other sub-categories is wise too. This is to improve internal link sculpturing.
Figure 8: Straightforward product listings with small bodies of text rarely provide SEO competitive advantages
It is advised to provide (then manage) faceted navigation options as well, if only to improve the very revenues you obtain from search traffic. It is no use doing SEO for the sake of search engines alone!
Content Category Page SEO Design
You want all priority articles 2-3 clicks from the homepage
Content marketing is an art, you want to satisfy that of search, as well as that of social shares and most importantly paying customers! Equally, you want to speed up your conversions, and so to do this you need a central hub (e.g. resource center, topic/guide hub) that makes sure key content hubs of grouped evergreen content are never more than three clicks from the homepage. This allows crawlers and audiences alike to discover the body of content that applies to them more regularly. This fulfils their needs as well as for Googlebot (to see a priority in the site architecture) that no jumbled-up blog with ugly pagination could ever provide. Especially after a typical four plus months of additional blogs burying what evergreen essential articles are require 2-3 clicks away.
Figure 9: A blog is never the place to publish your commercially lucrative (hero) articles
FAQ Content SEO Design
Answering questions has become a key traffic driver in search
Questions are today a big area in search, both for users performing research, and search engines (namely Google) understanding how much your website is an expert on a topic. Answering questions has become a key functionality of modern search engines.
Figure 10: Desirable short-form content formats such as sector FAQs require fresh template themes
One hundred word answers to FAQs or five row bulletpoint answers have therefore become very popular within Google search results, otherwise known as the boxed featured snippets at the top of search results. Making space for answering wider sector FAQs is very much worth doing to increase the traffic volumes that you are targeting. It is very wise to deploy schemas such as the FAQ-schema to increase your search result size and visibility.
Local SEO Page Design
Local landing pages need to deliver unique experiences for each local area
Local SEO gives a vital chance for businesses to scale their SEO geographically, but so many fail to vary their local landing pages in order to deliver unique experiences for each local area. As a result Google often ignores local pages that duplicate or are rolled out too fast. So make sure that local landing pages do not duplicate, both from a content and template point of view. As well as this - make content interesting and very specific to the region and commonalities between that and your keyword (this is not easy I know!).
Figure 11: Local search is hugely beneficial, but local areas differ in information - so duplication is not wise
Service Page SEO Design
Trust signals are a hidden optimisation that counts
Being uber topical and trustworthy is key to converting an audience on service pages, one audience member that is particularly important of course is a search engine bot: So look for ways to improve content quality and diversity to improve the success of a service page in Google. One way of doing this is to make more room for unique [to that page] service elaborations and customer reviews.
Figure 12: Commercial pages such as these benefit SEO wise from greater space for quality and unique content
SAAS/App Landing Page
Give the breathing space needed to target keywords properly
With an app or indeed a SAAS landing page - you want lots of breakout sections. This is to provide breathing space for the main secondary keywords to be targeted fully through further (tasteful!) SEO headers and additional copy. What's more, this often slows the user down and increases engagement by reducing the bounces back to Google (a ranking factor).
Figure 13: Creating many varied sections is a key aim, both for SEO and UX
Video Page SEO Design
Make the most of your transcripts, and use embed CTAs
For maximum video SEO, you can't get away without adding videos to YouTube. This is the most video focused SEO. However, if you do need to create landing pages for video then here is the best layout.
Figure 14: Making sure your video embed is surrounded by unique/relevant SEO assets is key
The video should feature high up, a transcript of the video should be a major (appealing!) part of the page, and making the video embed available with a link back to your video landing page is very wise. As is including the full video schema, along with your basic SEO metas and page markups.
Footer SEO Design
Google especially tends to pay less attention to high volumes of duplicate links
You can't today rely on sitewide links from a footer to help with your SEO. Google tends now to pay less attention to high volumes of duplications in links. Footer links do however provide a signal, and are still important UX features too - so continue to link to key pages, but don't expect any benefit from tweaks to this for SEO.
Figure 15: Footers do not need to be overwhelmed by SEO items
For More Information
This SEO for web design playbook is just a summary of some key design SEO items that should be considered by web developers. It is not meant to get into too much detail. However, if you would like more detail then Matt is available for web design SEO commentary, speaker slots, team training, agency consultancy, or merely a free chinwag over the phone. Here is how to get in touch with Matt below:Get In Touch!