SEO is important to any business that operates online,
and many don't realize it needs to be built into the web design process -- not
added in later. Here, columnist Marcus Miller has provided a comprehensive
guide to SEO and web design.
Your
website is the center of your digital marketing world — the place that
all digital rivers run toward. And of course, the largest of its traffic
sources is generally organic search.
Yet
all too often, businesses don’t think about SEO until after having a
website designed (or redesigned), and these sites are often sadly
lacking on the SEO and digital marketing front. They may look shiny, but
if the marketing smarts are not cooked in at design time, then you will
be running the marketing race with a wooden leg. Or at the very least,
faced with going back to the drawing board and wasting a whole load of
time and money.
We have been thinking about the SEO and web design connection a lot recently at Bowler Hat and have just published a website design planning guide to
help in what can be a complicated process. This is a companion piece to
that guide that really covers the SEO considerations in far more
granular detail.
In
this post, I have a look at how SEO should be an integral part of your
website design (or redesign) process. We are going to look at what you
need to consider to have a site that is built for search marketing and
lead generation — and how focusing on happy users keeps the Google gods
on your side.
We
will also take a look at some of the common pitfalls that can befall
businesses looking to build a new website that is central to your
digital marketing efforts.
In brief, I am going to help you ensure your next site is a lean, mean SEO and digital marketing machine.
What usually happens…
A phone rings at Bowler Hat HQ.
Marcus: “Hey, Bowler Hat here. How can we help?”
Caller: “Hi
there. We have just had a website built and… we seem to have lost a
considerable amount of traffic.” OR “… we don’t rank for the keywords we
used to be visible for.” OR “… we are just not getting any inquiries.”
OR “… we want to look at what we can do to improve our SEO.”
Marcus: “Ah, okay. If you can let me know your URL and a number to call you back on, I can take a look and make some suggestions.”
There
is a problem here. SEO is not some band-aid you can just plaster onto
an existing site. Website SEO is fundamental to succeeding online for
the majority of businesses. And the same concepts that fuel solid SEO
help with paid search, social and any other inbound marketing efforts.
Get this wrong and you will certainly fail to hit your digital marketing
goals.
Developing an SEO-friendly website
At
a fundamental level, an SEO-friendly site is one that allows a search
engine to explore and read pages across the site. Ensuring a search
engine can easily crawl and understand your content is the first step to
ensuring your visibility in the search engine result pages.
A
search engine utilizes a web crawler for this task, and we are trying
to work with the search engines rather than against them. Unfortunately,
there are many ways to make a website, and not all technologies are
built with search engine optimization in mind.
Building
an SEO-friendly site requires careful planning and a structured
approach to representing your business and the services you provide. For
many businesses, this can be complicated — it’s not always easy to
document exactly what you do.
As a marketing tool, your website should be built upon a solid digital marketing plan with a clear business model and value proposition. If that’s unclear, then you need to revisit that first.
Assuming you have all that good stuff in place, let’s dive in.
Fundamentals
There are a few core elements that set the stage for a well-optimized website design process.
Domains
Your
business may use example.com as the primary domain. But you may have
others. Ensuring your domain makes sense and relates to what you do is
super-important. Ensuring that all variations and subdomains correctly
point at the main site and redirect to a single canonical version of the
site is important.
Our
business is called Bowler Hat. We operate in the UK. We are a web-based
business. It naturally follows that our domain is www.bowlerhat.co.uk.
All subdomains 301 redirect back to the main URL www.bowlerhat.co.uk. We have few domain variations that 301 redirect back to the main URL. This all makes sense.
Don’t
be fooled into thinking that having-my-keywords-in-my-domain.com helps.
It just looks daft. It can help a little for local businesses, but
ensure you are mapping to the real world. Be sensible.
Hosting
Your
hosting is also important. A slow site makes for unhappy users. Your
hosting should follow common-sense rules. Be situated where your
audience is situated. Be fast. Be platform-specific, if necessary. WP
Engine is a great example, as it provides a platform tailored to
WordPress websites.
CMS
The
CMS (content management system) you choose for your business can hugely
influence how successful you are. WordPress is a great option in many
situations, but it’s not the only one. It certainly is wired up at a
basic level in a way that Google can understand. This is not to say it
is the best choice for all situations, but certainly, it’s a good
starting point for most businesses. Just be sure that the CMS you choose
is the right one for your situation, rather than the one your chosen
web company prefers to work with.
Crawling & accessibility
The first step is ensuring a search engine can crawl your site and understand what it is that you do (and where you do it).
Indexation
To
understand your site, they have to be able to read the content of the
page. This means that the main content of your site should be text-based
behind the scenes. Not images. Not flash or video. Even in this
ever-advancing world, your main content should still be text-based.
There are some great tools, like web fonts, that mean you can still look
the part, and your images have a place, but be sure to talk in clear
language about what it is you do so the search engine can read and
understand your offering.
Images,
videos, PDFs and content are also important and can be a source of
search engine traffic. Again, these need to be discoverable and
indexable.
Link structure
To
index your content beyond the home page, you need internal links that
the search engine can crawl. Your primary navigation, search engine
directives and tools like XML sitemaps all help the search engine crawl
your site and discover new pages. Tools like Screaming Frog can help you
ensure that your site can be easily crawled by a search engine.
Information architecture and structuring your site
I
have always like the filing cabinet analogy for website structure. Your
site is the filing cabinet. The major categories are the drawers. The
subcategories are the folders in the drawers. The pages are documents in
the folders.
- Cabinet: your website
- Drawer: high-level category
- Folder: subcategory
- File: individual document/page
Context
is indicated not only by the site it exists on but also by the position
within that site. Our own site has a drawer for services, and each
service has sub-services in folders. Your site will be largely the same.
If we consider the following structure of the Bowler Hat site as an example:
Home
– Services
– – Service Area
– – – Individual Service
Home
– Services
– – SEO
– – – SEO Audits
So, there is a page in this information architecture that is simply /audits/.
The
/audits/ page exists in the SEO folder in the services drawer. Nice and
organized. This can follow through with other SEO elements to clearly
indicate context far beyond that which can be indicated by the document
alone.
This
is relevant to blog posts, articles, FAQ content, services, locations
and just about anything else that is an entity within your business. You
are looking to structure the information about your business in a way
that makes it understandable.
Some
sites may take a deep approach to structuring content. Others may take a
wide approach. The important takeaway here is that things should be
organized in a way that makes sense and simplifies navigation and
discovery.
A
three- to four-level approach like this ensures that most content can
be easily navigated to within four clicks and tends to work better than a
deeper approach to site navigation (for users and search engines).
URLs
Context
is further indicated by the URL. A sensible naming convention helps
provide yet more context for humans and search engines.
Following are
two hypothetical sets of URLs that could map to the Services > SEO
> SEO Audit path laid out above — yet one makes sense, and the other
does nothing to help.
www.example.com
www.example.com/services/
www.example.com/services/seo/
www.example.com/services/seo/audits/
www.example.com
www.example.com/s123/
www.example.com/s123/s1/
www.example.com/s123/s1/75/
Of
course, the second set of URLs is a purposely daft example, but it
serves a point — the first URL naming convention helps both search
engines and users, and the second one hinders.
Navigation
Your
navigation is equally important. When a site is well-structured, the
navigation works with the structure, the URLs and other components, like
XML sitemaps, to help solidify what each page or piece of content is
about.
Navigation
is more than just the menu at the top of your website. It is how you
signpost users to the most relevant part of your site. Navigation can be
a tool to raise awareness of additional services and includes not just
text links but content on all pages and in the templated design elements
of your site.
I
have always liked the signpost analogy. I walk into a supermarket and
look for the signs to find what I need. Your website is no different. If
a user is referred and searches for your brand name, then they will
land on your home page. They then need a signpost to get them to the
relevant service. And it had better be easy to find!
It is very easy to get this wrong, and careful thought must be applied — before you
build the site — regarding the needs and wants of your users. A website
is a digital component that should execute the strategy from your
marketing plan. Understanding users here is crucial so you can ensure
you are meeting their needs.
Navigation
should not need any real cognition — it should not make the user have
to think. The following image is a sign from my local home improvement
store. Which direction takes you to the car park and which direction
takes you to the deliveries entrance?
My
brain follows the “customer car park” line from left to right, so I of
course turn right. However, the customer car park is to the left. There
is nothing there to clearly illustrate which is right or wrong.
I
have to think. Or in practice, I go in the wrong direction a few times
before I learn. However, if users don’t find what they are looking for
on a website, they will return to the great ocean of competition that
Google search results represent.
Ensure your navigation is crystal-clear — if one user can make a mistake, many others can, too.
Common problems
There
are many potential issues with content that can’t be found or can’t be
understood by the search engine that can work against you. For example:
- Orphaned content that can’t be found
- Content only available via site search
- Flash files, Java programs, audio files, video files
- AJAX* and flashy site effects
- Frames — Content embedded from another site can be problematic.
- Subdomains — content split into subdomains rather than sub-folders
Be
sure that important content is easily discoverable, understandable and
sits in the overall structure of the site in a way that makes sense.
Summary
If
everything is done well, a human and a search engine should have a
pretty good idea what a page is about before they even look at it. Your
typical SEO then just builds on this solid foundation that is laid out
by your information architecture and site structure.
Mobile-friendly design
The most popular device used to conduct internet searches and
to browse websites is the mobile phone. We live in a mobile-first age.
Sites optimized for search engines should give equal consideration to
the mobile layouts of their websites (rather than just bolting on simple
responsive website design).
Yet, in 2017, responsive design is not enough. We were talking about the importance of responsive website design in 2012.
Five years later, with massive technological progress and greatly
improved mobile data networks, your future customers are using mobile as
the first, and often only, device to interact with your business.
To
create a truly mobile-friendly design and maximize results from mobile
search, you must think of the needs and wants of mobile users. What a
user will do on a phone is often far different from what they will do on
a computer. And even if your conversions tend to be on a desktop, that
crucial first touch may well be on mobile.
From
an SEO perspective, it is worth noting that mobile-friendliness is a
confirmed ranking factor for mobile search, and it is the mobile version of your site that will be used by the search engine to
review and rank your site. However, far more important, mobile is how
your prospective customers are searching for and browsing your site.
Work
hard on optimizing the user experience for mobile users and you will
reap the rewards for your efforts in terms of traffic and user
engagement.
Page speed
Another
key consideration in the mobile era is page speed. Users may be
impatient, or they may not always have a great mobile data connection.
Ensuring your pages are lean and mean is a key consideration in modern
SEO-friendly website design.
A great starting point is Google’s mobile-friendly test. This
tool will give you feedback on mobile-friendliness, mobile speed and
desktop speed. It also wraps everything up into a handy little report
detailing what exactly you can do to speed things up.
I went into a little more detail on how to optimize for speed in a recent column on mobile optimization.
Suffice it to say, page speed is yet another important consideration
that spans how your site is built and the quality and suitability of the
hosting you use.
Usability
Web
usability is a combination of other factors: device-specific design,
page speed, design conventions and an intuitive approach to putting the
site together with the end user in mind.
Key factors to consider include:
- Page layout. Important elements should have more prominence.
- Visual hierarchy. Make more important elements bigger!
- Home page and site navigation. Clearly signpost directions for users.
- Site search. Large sites need a sensibly positioned search option.
- Form entry. Make forms as lightweight and easy to fill as possible.
- Design. Great design makes everything easier.
This
is just scratching the surface here, and usability really has to be
customized to the individual site. A couple of resources I would check
out would be the book, “Don’t Make Me Think: A Common Sense Approach to Web Usability,
“ by Steve Krug and my mobile optimization checklist.
The content marketing funnel
Your
website has a hell of a job to do: it must help your business get in
front of prospective customers on search engines, and then it has to
engage and convert those customers.
Your
site needs content to help with all of these stages of the customer
journey. Content and SEO is an important combination here, as you may
get in front of a customer as they look for similar services from
another company they are already considering.
A structured way to consider the content you need here is a typical marketing funnel:
Awareness — top of the funnel
Awareness
content will typically be your blog and informational articles. We are
helping your prospective customer understand the problems they face and
illustrating your experience and credibility in solving them.
- Blog posts
- Informational articles
- Webinars
- Comprehensive guides
- FAQs
Consideration — middle of the funnel
The
content at the consideration stage helps your prospect compare you
against the other offerings out there. This tends to be practical
content that helps the customer make a decision.
- Case studies
- Product or service information
- Product demonstration videos
- User guides
Conversion — bottom of the funnel
Bottom-of-the-funnel content drives conversions and should gently encourage a sale or lead.
- Reviews
- Testimonials
- Free trial
- Free consultation
Remember
that customers will search across this entire spectrum of content
types. Therefore, ensuring all of these areas are covered aids discovery
via search engines, consideration and conversion.
SEO nuts & bolts
As
you can see, there is a lot to consider before we even look at the more
familiar elements of optimizing your site and pages. We should only
really start to think about keywords and basic on-page optimization once
we have this solid foundation in place. And hopefully, if we have
structured everything correctly, then the actual optimization of the
pages becomes far easier.
Keyword targeting
Nailing
your keyword strategy is so much easier once you have a solid structure
without internal duplication. If we look at our previous examples for
site hierarchy and structure, then adding keywords is relatively
straightforward (and is something we would often do in a spreadsheet
pre-design).
– Services
– – SEO
– – – SEO Audits
www.example.com/services/
www.example.com/services/seo/
www.example.com/services/seo/audits/
If
I use these pages as an example, we have a natural progression from
broad keywords to more refined search terms. We can even consider basic
modifiers such as location if we are a local business.
Home
– digital marketing agency
– digital marketing company
+ Birmingham
+ UK
Services
– marketing services
– digital marketing services
+ Birmingham
+ UK
SEO
– SEO
– Search Engine Optimization
+ Company
+ Agency
+ Birmingham
+ UK
SEO Audits
– SEO Audits
– Technical SEO Audits
+ Agency
+ Company
+ Birmingham
The
point here is that a well-structured site gets you a good way toward
determining your keyword strategy. You still have to do the research and
copywriting, but you can be sure you have a solid strategy to target
broad and more detailed terms.
HTML title tags
The
<title> tag is the primary behind-the-scenes tag that can
influence your search engine results. In fact, it is the only meta tag
that actually influences position directly.
Best practice for title tags are as follows:
- Place keywords at the beginning of the tag.
- Keep length around 50 to 60 characters.
- Use keywords and key phrases in a natural manner.
- Use dividers to separate elements like category and brand.
- Focus on click-through and the end user.
- Have a consistent approach across the site.
Even
in 2017, we still see a lot of overoptimized page titles. We want our
keywords in the title tag, but not at the expense of click-through and
human readability. A search engine may rank your content, but a human
clicks on it, so keep that in mind.
Meta description tags
Meta
descriptions don’t directly influence rankings. We all know that,
right? But of course, that is completely missing the point here. Your
meta description is the content of your advertisement for that page in a
set of search engine results. Your meta description is what wins you
the click. And winning those clicks can help improve visibility and is
absolutely vital in driving more users to your pages.
Meta descriptions must:
- truthfully describe the page content.
- advertise the page and improve click-through rates.
- consider the user’s thought process and why they will click on this page.
- include keywords where relevant and natural to do so.
The
search engine will highlight search terms in your page title and meta
description which help a user scan the page. Don’t use this as an excuse
to spam the meta description, though, or else Google likely will ignore
it, and it won’t lead to that all-important click!
There
are also situations where it can make sense not to create a meta
description and let the search engine pull content from the page to form
a description that more accurately maps to a user’s search. Your brief
meta description can’t always cover all the options for a longer-form
piece of content, so keep this in mind.
Heading tags
Heading
tags help structure the page and indicate hierarchy in a document: H1,
H2, H3 and so on. Text in heading tags correlates with improved rankings
(albeit slightly), but what really matters is that alignment between
the structure of the site, behind the scenes optimization like page
titles and meta descriptions and the content itself. Line everything up,
and things make more sense for users, and we help search engines
categorize our content while eking out every last bit of simple, on-page
optimization we can.
Remember
to align header tags with the visual hierarchy. Meaning the most
important header on the page (typically the <h1>) should also be
the biggest text element on the page. You are making the document
visually easy to understand here and further ensuring that design and
content are working together for the best end result.
Page content
The
content should generally be the most important part of the page.
However, we still see archaic SEO practices like overt keyword density
and search terms with a lack of connective words used in the copy. This
does not work. It certainly does not help with your SEO. And it makes
for a poor user experience.
We
want to make sure the context of our page is clear. Our navigation,
URLs, page titles, headers and so on should all help here. Yet we want
to write naturally, using synonyms and natural language.
Focus on creating great content that engages the user. Be mindful of keywords, but certainly don’t overdo it.
Considerations for page content:
- Keywords in content (but don’t overdo it)
- Structure of the page
- Position of keywords in the content — earlier can be better
- Synonyms and alternatives
- Co-occurrence of keywords — what else would other high-quality documents include?
Rich snippets
Rich
snippets are a powerful tool to increase click-through rates. We are
naturally attracted to listings that stand out in the search engine
results. Anything you can do to improve the click-through rate drives
more users and makes your search engine listings work harder. Factor in
possible ranking improvements from increased engagement, and you can
have a low-input, high-output SEO tactic.
Image optimization
Image
SEO can drive a substantial amount of traffic in the right
circumstances. And again, our thoughts regarding context are important
here. Google does not (yet) use the content of images, so context within
the site and the page and basic optimization are crucial here.
As an example, I am looking for a hobbit hole playhouse for my five-year-old, and the search brings up image results:
I
can dive right into those image results and find a multitude of
options, then use the image to drive me to the site that sells the
playhouse. Optimizing your images increases the chance of improving
prominence in the image search results.
Image optimization is technically straightforward:
- Image name — provide a name that clearly describes what the image is.
- Alt text — use descriptive alt text to help those who can’t see the images to reinforce the image content.
- Add OpenGraph and Twitter Cards so the image is used in social shares.
- Use the image at the right physical size to ensure fast downloads.
- Optimize the image’s file size to improve loading times.
- Consider adding images to your XML sitemap.
Image
optimization is relatively simple. Keep the images relevant. Don’t spam
the filenames and alt text with keywords. Be descriptive.
Common problems
SEO
projects at Bowler Hat often include an SEO audit as the first port of
call. We can’t cover every eventuality here, but the following are the
usual suspects that crop up and that web designers should be mindful of.
Duplicate content
There
tend to be two kinds of duplicate content: true duplicates and
near-duplicates. True duplicates are where the content exists in
multiple places (different pages, sites, subdomains and so on).
Near-duplicates can be thin content or substantially similar content —
think of a business with multiple locations or shoes listed on a unique
page in different sizes.
Keyword cannibalization
Keyword
cannibalization refers to the situation where multiple pages target the
same keywords. This can impact the ability of your site to have one
page that strongly targets a given term.
Where
the site architecture and hierarchy has been carefully planned, you
should eliminate this during the planning and design stages.
Domains, subdomains and protocols
Another potential issue where duplication crops up is where the site is available on multiple domains, subdomains and protocols.
Consider a business with two domains:
- Example.com
- Example.co.uk
With www and non-www versions:
- Example.com
- Example.co.uk
- www.example.com
- www.example.co.uk
And the site runs on HTTP and HTTPS:
- http://example.com
- http://example.co.uk
- http://www.example.com
- http://www.example.co.uk
- https://example.com
- https://example.co.uk
- https://www.example.com
- https://www.example.co.uk
Before too long, we can get to a situation where the site has eight potential variations. Factor
in the site resolving on any subdomain and a few duff internal links
and we can often add things like “ww.example.com” to the list above.
These kinds of issues are simply resolved with URL redirections,
but again, they deserve consideration by any web design agency that
takes care of hosting and is serious about the SEO of their customers’
websites.
Botched canonical URLs
Another
common issue we see is an incorrect implementation of canonical URLs.
What typically happens here is that the person building the site looks
at canonical URLs as an SEO checklist kind of job. They are implemented
by dynamically inserting the URL in the address bar into the canonical
URL.
This
is fundamentally flawed in that we can end up with the site running on
multiple URLs, each with a canonical URL claiming that they are the
authoritative version. So the canonical implementation exacerbates
rather than resolves the issue.
Questions or comments?
There
are a lot of moving parts with website design and SEO. But to be
forewarned is to be forearmed. My goal here was to furnish you with the
key SEO elements to consider before, during and after a website design
project.
"Source: - http://searchengineland.com/seo-website-design-everything-need-know-272899"
