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.
For someone who works on a website’s UX, there are two broad pillars of SEO.
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):
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
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.
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.
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.
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.
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.
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.
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:
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).
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. **
Will answer questions like:
Will answer questions like:
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
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.
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.
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).
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.
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.
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).
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.
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.
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
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.
* 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.