This post is a recap of a Ladies that UX presentation, given by Michael Ramsey (tbk Creative’s VP Digital), at tbk Creative’s office on October 25th, 2016. The presentation covered both basic and complex Search Engine Optimization (SEO) information that User Experience (UX) professionals should be familiar with.

If you’re not familiar with UX, please read the following definition:

“User experience’ encompasses all aspects of the end-user’s interaction with the company, its services and its products.”
Nielsen Norman Group

In the context of this article, UX is specifically related to the design, development, operation, and improvement of websites on the Internet.

1. Introduction to SEO: Why SEO Matters to UX Designers

For someone who works on a website’s UX, there are two broad pillars of SEO.

1.1 UX: Every Page is an Entry Point

When you’re designing web pages, it’s important to understand that virtually any page could be an entry point, and when you’re designing the structure of a website, it’s important to consider your users’ expectations for moving from one page (or topic) to another. Similarly, it is important to consider how people might enter a given page, particularly if they’re entering from a search result.

If you’re designing a web page’s UX, ask yourself the following questions (remember to consider the relationship between search queries and website traffic):

  • How will people find and enter your website? (Which queries are sending traffic?)
  • What will they expect? (How is your content being communicated in search results?)
  • What will they want to do? (Are you giving them what they’re looking for? Are you giving them what they’ll be looking to do next?)
  • What do you want them to do? (Does your website have an overarching goal, such as selling product, signing up for a service, or offering consumable content, and are you providing strong calls to action?)

1.2 Tech: Keep it Google Friendly

As you’re setting up your website and web pages, it’s important to keep things as simple as possible so it’s easier for search engine crawlers to navigate search results and find your website.

To keep your website Google-friendly, make sure to

  • research tech choices before building your website;
  • include text content (as search engines generally don’t know how to understand images or videos);
  • test your website thoroughly before and after it launches; and
  • check Google Search Console data to understand how your website is being handled.

2. SEO Basics & Universal Entry Points

This section provides more details about section 1.1 UX: Every Page is an Entry Point. Recommendations and more specific areas of concern are outlined below.

2.1 Break Out Topics

Avoid grouping multiple, distinct topics onto a single page. Pages with narrowly defined themes are better for obtaining high rankings in search engine results; of course, depending on how granular the page breakout is, this will need to be balanced against general UX concerns around having too many pages.

Conducting keyword and competitor research will help guide decisions around creating individual pages. Not every topic needs its own web page and, in terms of search engine ranking, some pages won’t be associated with important keywords. Identify the closely grouped keywords your website is (or should be) being ranked for and structure your page layout around them.

2.2 How Pages Appear in Search

There are three elements that control the snippet of information that appears in a search result. To successfully draw in traffic, it is important for UX professionals to know what they are and how they function.

 Ladies that UX London Ontario Google search results.

2.2.1 Page title

In most browsers, the <title> tag has three purposes: (1) to be used as text in a browser’s tab, (2) to be used as bookmark text, and (3) to provide the text for a search result link. The <title> tag is one of the most critical places for core keywords that match targeted search queries.

The ideal length for a <title> tag is between 50-78 characters as any text beyond this range may be truncated (desktop and mobile results differ in terms of the amount of characters that can be used). If the title is significantly longer than 50-78 characters, it is likely to be ignored and Google will generate the text itself.

2.2.2 Meta Description

Because meta descriptions are meta data specifically designed to be revealed as additional text in a search snippet, they don’t actually appear anywhere on a web page. If keywords are used in a meta description, they will not function as a ranking signal, but since search results embolden keywords, it is still a good idea to use them.

A meta description’s two most important tasks is (1) communicating to the user why your result is the one they want to click on and (2) setting the user’s expectations for the content you provide. For Google, the maximum meta description length is 155 characters and, similarly to <title> tags, going over this limit risks having the description be truncated or ignored by search engines.

2.2.3 Schema.org (Structured Data) Markup

Search result snippets often include features such as images, ratings, review count, breadcrumbs (in place of the URL), and event information, which is a result of structured data (as defined by http://schema.org). For most websites, these are nice-to-have features (as breadcrumbs are the only universal rich snippet extension); however, if your website provides recipes, event listings, product listings, reviews, or any other special feature, then implementing this markup is strongly recommended.

2.3 On-Page Content

For almost every search topic, the most critical on-page element is text content (there are some topics where this is not the case). It is important to maintain strong thematic consistency throughout the web page and to be mindful of structural elements. For an example, see the following model:

  • H1: There should be only one H1, and it should be phrased as similarly as possible to your page title. *
  • H2-H6: Sub-headings are important but less so than an H1. They can be used multiple times.
  • Paragraphs: The body text needs to be a reasonable length—you can gauge this by comparing competitive web pages that share your queries. Contrary to what some SEO professionals believe, there isn’t one correct length for every scenario.
  • Images: It’s important to include relevant keywords and alt attributes that properly describe image content.

2.4 Links and Calls to Action

MailChimp home page.

It’s important to keep UX simple, even more so in terms of links and calls to action. For content that encourages a user to jump to another page, include intuitive contextual links and make sure the website’s primary call to action stands out (MailChimp’s home page (as seen above) is an excellent example of this). Beyond that, make sure to include navigation across all of your pages (unless there is a very specific reason not to do so such as a squeeze page for a marketing campaign).

2.5 Measuring SEO and Engagement

If you want to measure your SEO results or the UX aspects of the search entries interacting with your website, there are two primary tools: Google Analytics and Google Search Console. The former has various alternatives you can consider, the latter does not. **

2.5.1 Google Analytics

Will answer questions like:

  • Where do users land after a search?
  • What do they do next?
  • Are they converting?
  • How do they interact with pages? (This is only applicable if you set up proper event tracking.)

2.5.2 Google Search Console

Will answer questions like:

  • Which search queries send users to my website?
  • What is my click-through-rate and search query ranking?
  • How is my website being indexed?
  • Does Google think my website has problems?

2.6 Understanding Bounce Rate

Bounce rate is not necessarily a negative statistic. Most people believe that a bounce happens when a user enters a page and then leaves shortly thereafter; however, bounce rate is actually calculated by the percentage of sessions that only have one interaction, regardless of the time spent on that first page view. For example, if someone searches for information, finds an article on your website, lands on it, and reads the entire article and leaves, that person would still be a bounce, but they would have found exactly what they wanted and left satisfied.

You can improve your bounce metric by implementing a more advanced tracking system that uses events (an event is a non-pageview interaction that’s measured with Google Analytics). To collect a better bounce rate statistic, you can track when a user

  • stayed 30+ seconds on a page;
  • scrolled through content; and/or
  • interacted with a page (e.g., watched a video).

2.7 Advanced Tracking & User Testing

There are many ways to further your understanding of how users use your website and how changes to your website will impact their behaviour, or even how the website will perform before it’s actually built. The list below contains tools I have personally used and have my personal recommendation.

  • Google Analytics 360 Suite: Are you an enterprise brand with additional disposable money for marketing software? If so, you should consider the Google Analytics 360 Suite (however, for most brands, Google Analytics will work just as well). GA 360 offers features such as fully accurate un-sampled reports for high traffic websites, robust testing tools, and a report builder akin to Tableau.
  • Adobe Analytics (formerly Omniture): If you want a higher level of web analytics reporting, Adobe Analytics is another marketing option (again, if you don’t have a very large budget, Google Analytics is a great alternative). Adobe Analytics provides features such as extensive customization, cross-domain tracking (which are, arguably, beyond GA’s capabilities), and it can add on a variety of additional tools as needed.
  • Optimizely: One of the leaders in terms of split and multivariate testing. Also has a robust personalization tool. Fairly expensive.
  • Visual Website Optimizer (VWO): Similar to Optimizely but not as expensive.
  • Crazy Egg: Advanced heat mapping, click mapping, and other page engagement analysis.
  • Clicktale: Similar to Crazy Egg but also offers video recordings of user interactions.
  • User Testing: A fantastic tool that provides direct feedback on your designs, staging, and live website. Offers programmable website testing (people will not only record themselves performing the tasks your requested, but will also talk you through their thought process).
  • Piwik: A competitor to Google Analytics. Pretty great UI and features, and is likely used by people who are not partial to Google products; however, it lacks the direct integration features that Google Analytics, AdWords, and Search Console (as well as some third-party platforms) provide.

3. Common Mistakes that Destroy SEO

When you’re building a website, the technology and design approaches you choose can make or break your website’s search optimization. This section leans more towards the technical side of building a website, but there are still plenty of UX/UI elements to discuss.

3.1 JavaScript: Use it Wisely

For the past couple of years, Google has been rendering JavaScript, however, the process has not been perfected. Crawlers can’t be expected to actually interact with page elements, so script-based changes that are triggered by user interaction probably won’t be indexed.

Avoid fetching core page content with AJAX; it can work, but it requires thorough testing to verify that search engine crawlers are actually seeing your content. The safest option is to deliver content directly from the server and to not rely on client side scripts at all (Google Search Console’s Fetch and Render tool is a blessing in this regard).

3.2 Dangers of JS Frameworks

It’s possible to build a SEO-friendly website using Angular, React, or any of the other popular JavaScript frameworks, but you need to make sure that you carefully test how crawlers render the pages and that you (or your developer) are confident that you can understand any forthcoming challenges.

When reviewing how your content shows up in search results or the search engine’s page cache, you need to watch for content references. For example, when your pages are returned in search results, you’ll see something like “{{ pageTitle }}” instead of the page title you set. This indicates that the search engine is not rendering page content successfully.

If you are dealing with a website that already has a problem with search engine rendering, there are tools like prerender.io that will perform client side rendering, cache the result, and then return the cached page to search crawlers. This process bypasses the issue, but it’s more of a palliative fix than an elimination of the underlying problem.

3.3 Template to Content Ratio

At one point in time, there was a significant issue with low value pages clogging up search results. Google had a hard time finding quality content amongst the thousands of pages that were either vehicles for ads and affiliate sales, or were bait and switch experiences.

After Google applied the Panda updates to its search algorithm, Google was able to remove or devalue the many low-value pages that were showing up and ensure that its search results were dominated by better websites that promised quality content and user experience.

To avoid being cut, pages should avoid excessive template content (e.g., large top navigation, huge sidebars, long footers, and large amounts of ads). Excessive template content is an ongoing problem for product and service websites, where listed items share aspects. For instance, a window manufacturer might offer a dozen different window styles that share the same colour, energy efficiency, installation, and additional features.

3.4 Don’t Hide What You Want Found

At the Ladies that UX session, we discussed how content that’s hidden by design approaches (such as accordions, tabs, pop-ups, and overlays) is often de-prioritized or ignored by Google.

Since the session, Google has reversed their position on hidden content as part of the upcoming mobile-first index. Because there is a notable lack of details, there will be quite a lot of testing and learning before we understand what is and is not acceptable.

Regardless, it’s still a good idea to prominently feature content a user will most likely enter a page for. Use your own UX experience and instincts to decide when it’s appropriate to hide content (which means the user will have to interact with the page to find it).

3.5 Long-Scroll / Single Page SEO

It’s possible to build a long-scroll page that enables search engines to both index and serve it as a series of individual pages. Without going into a lot of technical detail, the basic approach to building this kind of long-scroll page is to break the page into sections and then assign each section a URL. The history.pushState() method is a critical part of this approach. If you are determined to use a long-scroll or single-page approach for your website, it’s important to research SEO-friendly methods.

3.6 Staging and Going Live

While your website is in the staging process, you need to block it from search engines. This is quite important if you don’t want a client or boss to ask why staging is showing up in search results.

The robots.txt document (which is placed in your website’s public root folder) controls what a search engine can and cannot access. There are many approaches to ensuring that nothing on your server can be indexed, two of which are (1) setting a disallow all rule and (2) hiding the website behind a login.

You also need to make sure you don’t launch the website while the search engine blocking is still in place. Having a client or boss ask why there’s been zero organic search traffic for 6 months is much worse than having staging appear in search results.

3.7 Rebuilding Websites Properly

When you’re rebuilding an existing website, you want a seamless transition from the old website to the new website. There are numerous factors to consider if you want to minimize the disruption of your website’s organic search rankings; for example, you should

  • investigate which pages gather organic search traffic. For important entry points, ensure that you keep the older content as intact as possible.
  • redirect all of your old URLs to their new locations. It’s absolutely essential to fully test new URLS and have them in place before going live (or, at the very least, immediately after). If there isn’t a direct correlating page to redirect to, choose the best possible match, because redirects that go to poorly matched pages are treated like 404s and your associated search engine rankings will likely drop.
  • avoid drastic changes and be prepared to roll back the website as a worst-case scenario. The more drastic the change, the more risk of a drop in rankings. This is why very large, high-traffic websites (that rely on organic searches) will usually choose to make small, iterative changes instead of infrequent overhauls.

4. Conclusion

SEO and UX go hand-in-hand; as such, no matter which area you work in, it’s important to have knowledge of both. It doesn’t matter how well-optimized your site is or how well it ranks, a poor user experience wastes all of your effort. Similarly, an extremely usable and beautiful website does little good if it can’t be found on major search engines.

When you’re designing and developing websites, it’s critical to use a holistic approach, which means merging organic search optimization, user-centric design elements, striking creative, and the unique concerns of other traffic channels together.

Hopefully this article has helped build a better understanding of where SEO and UX intersect. Going forward, you should have a good idea of what questions to ask and where to direct your research efforts in order to make UX go the extra mile and attract more search engine entries.

5. Addendum

* HTML5 offers certain semantic elements that allow for more freedom in the types of markup you can use, particularly the H1 element.

** Bing also has an equivalent tool, but it only tells you where you show up on Bing. It has some great features but, in terms of search statistics, Bing only sends a fraction of the traffic Google would for the same service.