Link Roundup: Balancing User Experience and SEO

There are a lot of articles out there that feature phrases like “UX vs. SEO”, as if user experience and search engine optimization are Batman and Superman, engaging in an epic battle to determine who should have greater influence over web design. In reality, UX and SEO strategies are both incredibly important to incorporate when designing a website. If you don’t believe me, take it from the 12 articles featured below.

New to SEO and/or Web Design? Start Here

What Everyone Ought to Know about User Experience Design

What makes for a good user experience? There are a lot of factors involved, including visual design and layout, page load speed, tone of content, and calls-to-action. These are all factors that indirectly matter to SEO, too, because when users have a positive experience on your site, you’ll get more traffic, shares, and links, which leads to higher search rankings. You can learn more about the benefits of a great user experience– and some brands that are nailing it– in this article.

The Anatomy of an Optimized Web Page [Infographic]

Visual learners should check out this infographic, which nicely breaks down all the major SEO and design elements that go into a well-optimized web page.

How Site Usability and User Experience Affect SEO

Think site usability and user experience are the same thing? The author of this article argues that there’s an important difference– site usability is about ease-of-use, while UX is about how a user feels– but that both can indirectly impact SEO. Check out the full article to get tips on how to improve your website’s UX and general usability.

Be Sure to Balance SEO and User Experience in Your Web Page Design

SEO and user experience don’t have to be at odds in a web design project. However, there are certain UX-related trends that can negatively affect search engines’ abilities to crawl a website. This post goes over some of the things to avoid– and some of the things you can do to create a site that provides a great user experience without sacrificing SEO value.

Let’s Dig a Little Deeper

The Crucial Connection between SEO and User Experience

Google frequently updates their search algorithm to “think” more like a human web user. Put another way, Google’s goal is to identify user intent in order to serve the most relevant/helpful web pages at the top of the search results page. This means that user experience is now intertwined with SEO, and SEO specialists need to think beyond keywords.

User Behavior Data as a Ranking Signal

No, search engines can’t understand human emotions, but they can use behavioral data (such as click-through-rate, navigational paths, and dwell time) to get a pretty good sense of a user’s experience with a website. This article examines the ways major search engines look at these different signals, and how it affects your search engine rankings.

Four Benefits of Aligning SEO and UX When Building Your Website

This post discusses why it pays to have web designers and SEO specialists team up. One major advantage is that SEO specialists can provide concrete search data to help designers make informed UX-related decisions. To read about some of the other benefits, check out the full post.

5 Experts Explain Why Sweet UX is Vital for Search Marketing

Still not convinced that UX and SEO go hand-in-hand? Maybe several search marketing thought leaders, including Moz’s Rand Fishkin and SEO 2.0’s Tad Chef, can change your mind. As an added bonus, this post includes links to additional educational resources recommended by the experts.

Tips for a Better User Experience and SEO Strategy

10 Tips That Can Drastically Improve Your Website’s User Experience

It’s easy to see how many of the tips in this guide– including using well-written headlines and catching your 404 errors– tie in nicely to SEO best practices.

Optimize Your Images and Make Them SEO Rockstars in 4 Steps

Images can be an important UX factor to consider (after all, most people prefer viewing a web page with eye-catching images and small chunks of text rather than a solid wall of words). Search engine bots can’t crawl images the same way they crawl text– but there are steps you can take to ensure you’re getting SEO benefits from the pictures on your site.

Site Design & Migration Tips to Avoid SEO & UX Disasters

This is a must-read for anyone who is considering overhauling and migrating their company’s website. It offers some great tips about how SEO and UX team members can work together to head off potentially costly mistakes in the early stages of development.

How to Rank Better with User Experience Marketing

This is a pretty long read, but it’s worth it–who doesn’t want to know the key to providing a delightful user experience and ranking higher in the search engine results. The article does a particularly good job at explaining how businesses can increase their web page shares–and in turn increase their rankings– by providing visitors with a fun, useful, or educational experience.

Takeaways

If there’s a through line in all the link roundup posts above, it’s this: when you design web pages that successfully educate, entertain, or help site visitors, you’ll see search engine ranking benefits. Because search engine algorithms are designed to serve the best possible results based on user search intent, UX and SEO are now closely connected.

If you’re planning a site update and need help implementing UX and SEO strategies, contact Leverage Marketing. We’d love to help you delight your site visitors and rank higher in the search engine results pages.

4 Ways to Track Conversions When Your URL Does Not Change

If you perform Internet marketing functions for enough clients, you’re bound to run across this problem at one point or another.  What do you do when you are trying to track a goal or conversion but the URL does not change after action is taken?  This happens most often when people submit lead forms–you hit “Submit” and the form posts but the entire page does not refresh.  Far too many people just end up giving up, and then, are unable to track their campaign performance.  Others will set that form page as a goal / conversion so anyone who sees the lead form counts as a win whether they complete the form or not. There has to be a better way, right?  Well there is, or actually, there are.  Below are several ways to track these conversions along with examples.  I’ll do my best to break this down for the novice developer but some basic HTML / Javascript skills are required.


Call to action text in case your image doesn't load.

For Analytics-based tracking, these tips are for Universal Analytics and calls to analytics.js.  If your implementation still calls ga.js, we will provide links to Google’s Developer resources for legacy implementations (though you should strongly consider upgrading your implementation to analytics.js)

1. Analytics Event Tracking

Event Tracking is a fairly powerful and very underutilized function in Google Analytics that allows you to track things like button clicks, video plays, or file downloads.  Event tracking makes a call to ga.js in order to notate non-pageview items on your website.  The results will show up in the “Events” reports under the “Content” section of Google Analytics.  You can also define an event as a goal.  For our purposes, we want to track people who press the “Submit” button on the lead form.

In this example, we only need to focus on the “Submit” button in the code.  Below is a generic example of such a button.

<input type=”button” id=”subbtn” value=”Submit;” />

To add event tracking to this button, we’ll need a minimum of 3 basic elements:

  • Call the ga() function to send an event
  • An event category (a grouping that you determine for the event, i.e. “lead forms”)
  • An event action (what the user is doing to trigger the event, i.e. “submit”)

Labels (additional information you want to provide about the event) and values (similar to a goal value) can also be added but are not required.  We’ll omit them for simplicity.

After adding that information, here is how our new code should look:

<input type=”button” id=”subbtn” value=”Submit” onClick=”ga(‘send’, ‘event’, ‘Form’, ‘Submit’);” />

Click here to visit the Google Developer resources for ga.js implementations.

Please note that this is not a perfect solution.  If a user clicks the “Submit” button more than once, the event may be duplicated.  Also, if somebody does not fill out the form in its entirety and receives an error upon submitting, it will still track as an event even if they do not go back and complete the form.  If you have some sort of form validation in place, you can modify the code to only run if the submission was successful but that will vary by the type of form you’re using.

2. Analytics On-Click Virtual Pageviews

The _trackPageview function is another call to ga.js that allows you to artificially generate a pageview when an actual pageview does not take place.  This is quite useful for many of the same reasons as Event Tracking, and has the added benefit of showing up as a pageview in your content reports.  For example, if you have an AJAX shopping cart, you can use this function to tell which step of the checkout a user abandons.  This is also common if you have PDFs on your site for sales info, forms, restaurant menus, etc. Virtual pageviews can also be turned into goals, just like a standard pageview goal.

For this tracking function, let’s assume your checkout is all on one page but requires users to click “continue” to reach separate sections.  Below is the existing code example:

<button type=”button” id=”continueCheckout” onclick=”billing.save()”></button>

(user clicks that button, and then, the following div loads)

<div id=”checkout-step-payment”>

With virtual pageviews, we only need to create the call to ga() function to send a pageview and provide the naming convention for the virtual URL.  There are numerous ways to call these actions but we’ll use an onclick event to do so here.  Below is the modified example:

<button type=”button” id=”continueCheckout” onclick=”billing.save(); javascript: ga(‘send’, ‘pageview’, ‘/checkout/payment/’);“></button>

Click here to visit the Google Developer resources for ga.js implementations.

In this example, the semi-colon at the end of the existing onclick event is important so the browser knows to look for additional items when the button is clicked.

3. Conversion Code in a div that Loads after Submission.

In many forms, the user is greeted with a “thank you” message that appears on the page upon hitting submit but the URL does not change.  Generally, this type of response is called by PHP and the specifics of it can vary by the type of form you’re using.  However, if your site is developed in PHP, there’s a good chance your form page will have a section like the one below:

<?php if ( $success ) echo “<p>Thanks for sending your message! We’ll get back to you shortly.</p>” ?>

This is your opportunity to add your AdWords / AdCenter tracking code.  Simply paste the code you get from the PPC channel into the response message and it will appear after a user successfully submits your form.  Even though this is pretty straightforward, I have an example below (please substitute with your own PPC conversion code or this won’t work).

<?php if ( $success ) echo “<p>Thanks for sending your message! We’ll get back to you shortly.  <!– Google Code for Conversion Page –>

<script type=”text/javascript”>

/* <![CDATA[ */

var google_conversion_id = XXXXXXXXX;

var google_conversion_language = “en”;

var google_conversion_format = “3”;

var google_conversion_color = “ffffff”;

var google_conversion_label = “XXXXXXXXXXXXXXXXXXX”;

var google_conversion_value = 0.00;

var google_conversion_currency = “USD”;

var google_remarketing_only = false;

/* ]]> */

</script>

<script type=”text/javascript” src=”//www.googleadservices.com/pagead/conversion.js”>

</script>

<noscript>

<div style=”display:inline;”>

<img height=”1″ width=”1″ style=”border-style:none;” alt=”” src=”//www.googleadservices.com/pagead/conversion/XXXXXXXXX/?value=0.00&amp;currency_code=USD&amp;label=XXXXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0″/>

</div>

</noscript>

</p>” ?>


Call to action text in case your image doesn't load.

4. On-Click Conversions with Call Tracking

This fairly new feature of AdWords allows you to track click-to-call actions on your website as conversions.  This is great for mobile traffic or desktop users that have Skype (or a similar VOIP solution) installed.  AdWords will also report conversions for visitors who manually dial the phone number displayed on the web page.  When you create a new conversion in AdWords, you’ll now see an option to track Phone Calls.

The conversion code is below, and has a few key differences from a standard conversion.

<script type=”text/javascript”>

(function(a,e,c,f,g,b,d){var h={ak:”XXXXXXXXX”,cl:”XXXXXXXXXXXXXXXXXXX”};a[c]=a[c]||function(){(a[c].q=a[c].q||[]).push(arguments)};a[f]||(a[f]=h.ak);b=e.createElement(g);b.async=1;b.src=”//www.gstatic.com/wcm/loader.js”;d=e.getElementsByTagName(g)[0];d.parentNode.insertBefore(b,d);a._googWcmGet=function(b,d,e){a[c](2,b,h,d,null,new Date,e)}})(window,document,”_googWcmImpl”,”_googWcmAk”,”script”);

</script>

For one, it’s all javascript.  Due to the nature of this conversion type, there is no way a script-free pixel can fire so users must have javascript enabled.

Beyond that, you need to have some extra code to make this conversion type work.  The code above goes on any page with your phone number listed.  To activate the conversion, you need to add a second piece of code to call the _googWcmGet() function and replace your phone number with a Google forwarding number when someone visits your site through an AdWords ad.  There are a few different options for implementing this piece, but the most straightforward is to create a “number” class and place your number in appropriate spans.  Here is an example:

<body onload=”_googWcmGet(‘number’,’555-555-1234’)”>

<span class=”number”>555-555-1234</span>

</body>

Now every time an AdWords visitor calls you from your site, a conversion will be triggered in AdWords. You can also define conversions based on the length of the call. It’s quite simple to implement and very valuable for companies that receive a lot of phone leads.