e-Commerce SEO Surgery #1
- 1st Website: Fixing UX Issues to Drive Conversions
- 1st Website: Technical SEO Fixes
- Website #2: Tidying Up the Payment Process and Fixing the Navigation
- Website #2: Technical SEO Fixes
- Website #3: Duplicate Meta Descriptions, UX Improvements, and Shopify-specific Fixes
Paul: Hello and thank you for everyone who's joined us. We're now live. It's my great pleasure to host this webinar. I'm pleased to be here with these three experts. I'll let them introduce themselves because I'm sure they're going to do a much better job than what I will. We'll start off with Stacy.
Stacy: Hi. I am the lead website strategist for Impact Branding and design, an agency out of Connecticut here in the US. My job is pretty much to tell people why their websites suck or help them make them not suck. My area of expertise is really user experience and strategy. I'm going to leave it to the rest of the very talented humans on this call to talk about some of the more technical side of things.
Luke: In the UK here. I am an independent E-Commerce consultant. I fix people's E-Commerce websites, help them make more money and bits and pieces like that. As far as discipline is concerned, I park my butt right in the middle between technical SEO and CRO. Depending on how I'm feeling, depends on what side of the coin I decide to sit on.
Franco: Hello. Franco Valentino from Narrative SEO in Nashville, Tennessee. All I do is throw a fuel on what these guys do. We're the plumbers. When things get clogged, we clear those clogs. Very technical, we're server-ologists and watch for the digital interconnections between your website and Google. And make sure that things are flowing correctly.
Paul: Who wants to take the floor first with the sites that you've been looking at?
Franco: Ladies first I would say.
1st Website: Fixing UX Issues to Drive Conversions
Stacy: I'll go ahead and share the screen. One of the sites that was submitted was Exodus Travel. They have a global site, so you right now might be looking at a slightly different version than what you might see because this is the US version of it.
Overall, I was really impressed with the site. There's just a few really specific things I was going to hit on from UX perspective and then Franco and Luke, feel free to jump in whenever you guys have anything else you'd like to add. The first and foremost that I struggled with was the way your menu works. It's definitely not a typical menu experience. I have to do a lot of clicking and waiting to get something that I want.
Typically, if you don't do a hover effect on the menu and just allow the menu to open on hover, people think that it's just a single click, as opposed to all of these items that drop down and you can then choose the next one. You want to just make sure that you have hover ability on your menu because that's what people expect.
The other thing that we don't really have is a really specific call to action anywhere in our menu. From eye-tracking studies, we know that that top right corner is really what we want to reserve for that very noticeable button-style call to action. I think you guys have a really interesting opportunity after playing around with your site to almost give somebody a "help me build my vacation" type of call to action; it guides them through the process. Because there's a lot of information and it can be a little bit overwhelming as we dive into the site.
When I pick a specific place or a destination area, I'm taken to this landing page, which requires me to then take one more step to really dive into the vacations. If I go to "see all trips", this is where the beauty of this website lives. It is this magical, filterable, searchable place where all of the vacations are housed.
We're taking a lot of steps to get someone to this, which is the money of the site, if you will. It allows me to really easily say, "oh okay, I want this to be five days. And I want to search multiple destinations, so maybe I'm not sure where I want to go”.
The trouble about getting here is I have to pick one place first. But if I have three vacations I'm interested in, I don't even know that this exists. Whatever you can do in the user experience and user journey to get people here faster is what needs to happen. We're hiding this, and this is the best part of your entire site if you ask me.
The other thing that's great is how many filter options that you guys have. You can really narrow down what you want to be able to do. I love that it's really clear and easy to figure out when and how to turn these filters off. But it just takes me way too long to get here.
Really when we're thinking about that call to action that you can use in this top corner, you're using it for the phone number right now, which I understand. You can still keep a phone number in your menu by all means. But a button here that's like, "help me plan my perfect vacation", is exactly what I would click on when I came here instead of trying to navigate through all of the potential choices on your site.
Even ask me a few questions. Pop up, take over the whole screen and say, “what locations are you interested in” and let me check off three or four. Just guide me through it and bring me here. You're going to get a ton of conversions from doing just that.
I would even make this search bar more prominent too because it's actually a really cool search experience. It actually allows you to start your filtering from here. I would just make this a little bit more prominent. It's hidden as it is today. Franco, Luke, do you guys have anything to weigh in on from a technical perspective?
Luke: Just taking a look at their filters real quick, just to see whether they're indexed or not. From the look of it, having a real quick look, they don’t seem to be. They're missing out on some of these long-tail, super high converting opportunities right here. You've got filters applied with certain destinations, with regions, with certain activities, lifestyles. There's a fine balance between allowing Google and the search engines to go absolutely crazy and try and find what's going on.
I think search and E-Commerce go hand in hand. Over a third of overall conversions that go through typically an E-Commerce site are driven by internal search. I also have a bit of an association between I guess the design of the search, almost versus how much you want the customer to use it. The smaller your search is, you typically assume that the search is just going to be boxed under or inferior in some way. As you said, it's a pretty cool experience. They should definitely highlight and make that more prominent for sure.
Stacy: As an aside, just because I'm all for showing real examples. Look at what Amazon does, which I think we know they're probably the leader in E-Commerce. Their entire menu is the search. Everything else is secondary. The search is almost all of what you see. That's honestly what you guys should be going for because your menu is complex.
1st Website: Technical SEO Fixes
Franco: That's a great point. Other travel sites you go to as well, that search bar and the navigation or the primary search bar on the left is the most prominent thing so you can immediately get to what you're looking for essentially.
From a technical's perspective, the platform is sitting on Drupal, which is a wonderful platform for a CMS. They do have cloud flare as a content delivery network on top of it, but the DOM load times, the page load times, the complete load times are at 15 seconds for some pages.
DOM should be six seconds maximum. For E-Commerce, it should really be one to two seconds. The lowest hanging fruit is optimizing the database. Sometimes just re-indexing the database tables within PHP myadmin can solve a lot of problems.
Time to first byte issues, document load times, and then you move up the stack towards image optimization for example. That was the biggest thing for me was again, optimizing the database and then running a global image optimization. The other thing is, and I want to get Paul's thoughts on this. I didn't find any schema at all on the website, zero. There's some organizational schema, there's no travel schema. There's zero templates, which is a great opportunity for them.
Paul: The other thing they've got as well is they're trying to index pages. Obviously they're an international site and they have got many, many pages. If we take a look at the Hreflang tool here. As you come down, we've got .com, we've got .co.uk and we've got .eu. We've got .co.uk for India, which I think they're going to have a bit of a trouble trying to rank a .co.uk domain name in India to start off with. They should be piggybacking out off the back of the .com. You're going to find it quite hard to index in the wrong country.
On your point Luke, the search there is no index as well. They've got noindex tag on there. Like you're saying, for certain queries they should remove that to allow them to get ranked for certain activities or places.
Stacy: I wanted to just touch on before we finish, the actual final product page. Essentially the “Buy” page. One of the biggest things that I noticed on this page too is that we have our breadcrumbs that look almost exactly the same as our sub-menu in terms of the font size, style, how big they are on the page, which is a little bit strange from a user experience perspective that you're going to probably have people accidentally be clicking on this when they don't mean to be. We probably need to find a way to create some visual difference between those.
The breadcrumbs I think are super valuable from an SEO perspective, but may not be as useful from a user experience perspective. We're really putting them front and center.
Franco: We did have a question and I think this was for Luke when he was talking about the filters. Why would you want the filters crawled for long-tail search visibility instead of targeting the long tail searches on the product page itself?
Luke: I think typically, especially when you've got a broad taxonomy of products, or in this case listings, you have a fine balance between choosing one item to run for, versus a category page or a listing page that satisfies that query for multiple options. For example, if someone searched for let's say holidays to Canada under a certain price range, there might be a case where you actually have a category for that, that is better than one specific destination holiday.
It really is a really fine road to walk because you go one way and you can open up your website to millions of URLs. But if you get it just right, you can find yourself in a situation where you're ranking for keywords that your competitors aren't, or you're ranking for keywords that might be easier to index for. Rather than those big, high-traffic, really high competition keywords.
Typically, if you have products listings or items that satisfy more than one of those, then it actually makes sense to use a category template to rank rather than a specific individual listing page. It depends on the site of your operation. There is a perfect sweet spot to getting that right.
Franco: The fact that you're talking about optimizing a category page versus a product page. To Google, a web page is a web page. They don't rank websites, they rank individual pages. When you're talking about optimizing a content category page, it's no different than optimizing a regular blog post that you want to rank. You want your category pages to have the appropriate terms, and subheadings, and H tags, and so forth to rank by itself with all the listed categories or products on the page.
Website #2: Tidying Up the Payment Process and Fixing the Navigation
Paul: That's sound advice there from you guys. Luke, let's jump back across to this side of the pond again.
Luke: Everyone see my screen? Juicy Details. I am a huge petrol head, so as soon as I seen this website I was like, “yes”.
You've got a PayPal button here, which leaves the assumption that maybe PayPal is the only way you can pay. When you see PayPal without any other sort of payment options at the checkout, it does almost leave a feel as if it's a smaller operation.
Having the ability for people to pay by Visa or MasterCard, or other formats as well is a great way of one, increasing your conversion because not everybody has a PayPal account. Or not everybody wants to pay via PayPal. Two, just adds a bit more of a trusted more than just PayPal alone.
You can see that I've got a finger pointer on the PayPal button. When I hit that, it's immediately taking me away from the site. I haven't actually done anything. I haven't added anything to my basket, but I'm allowed to click that button. What happens is here is I then get a very random message, which might then concern customers about whether it's safe, secure, or whether they've done the right thing.
Jumping into the product pages for a second, you've got the same thing again here where you've got a number of PayPal buttons just everywhere. Now, these are great if you want to go away and buy individual products, but at the end of the day, every E-Commerce business wants to increase average order value. Allowing people to purchase on a one to one level or encouraging that isn’t going to help your profits because you're going to have to pay more for shipping versus the amount of items.
One thing I guess I do like is the fact that it's nice, and clean, and simple. It's typical cliché commerce. There's nothing really eccentric here, but at the same time there's nothing that's a really big deal either.I think we're all in agreement here on this call that search is hugely important. Having a search functionality, I don't think they've got any auto predict on here or an autosuggest.
But when you bring up the search, you actually lose the entire mega menu. As navigation is principle to one website, you don't want to be in a situation where you have one or the other for sure. They should both be showcased in equal proportion.
When you think about customer perception, you've got your PayPal buttons that don't work. You've only got PayPal as an option. You've got misaligned buttons here and your categories on thin. It kind of screams of a business that just doesn't necessarily have the kudos and I guess the expertise if you like, to really go against the big guys.
Stacy: I would definitely agree on that search function. Make it its own section. Don't use it to remove your navigation by any stretch. But when you go to the listing pages, there's not really any filterability, there's not a way for me to narrow my choices or figure out which one is the best.
What you're really doing is you're forcing what we call the Easter Egg hunt. You're making people click on each product and then go learn about it, and then click back and click on the next product to try and figure out enough to figure out which one is the right one for them. People get frustrated really, really fast with that. Kids like Easter Egg hunts, but adults not so much. Anything that you can do to remove some of the effort. Adding filters and things like that so they can narrow down their products.
Website #2: Technical SEO Fixes
Luke: I think just to add a little bit of I guess a technical as well. These default sorting options are great, but they can be an absolutely nightmare for SEO. Mainly because you're just creating a lot of duplicate URLs, especially when you combine this with Stacy's point about navigation. You've got maybe hundreds, if not thousands of versions of the same URL. If these are indexable, what you're doing is making it more difficult for Google or any other search engine to work out which page to choose. You're wasting your crawl quota and you're making it more difficult for the more important pages to be discovered.
When you combine that with the point that Stacy just made with links like this, with lack of canonicals and so on, it starts to get quite broad and quite technically challenging relatively quickly. In a lot of E-Commerce, as you stay with your business, so as you add more products, add more categories, add more items, then these problems just get worse. They can be a massive problem, especially when you don't think about migrating to a new site and a whole nother problem. Getting it technically sound at this stage while it's a relatively small site, is definitely worthwhile.
Franco: If I could take your screen real quick, I've got a lot to say about Juicy. I'm a car guy too. We don't call them petrol heads here in the States. Let's take a look at the normal testing tool that we typically fall back on. We go to weppagetest.org for example. You add your domain, we're testing from the UK to make sure it's an analogous test.
And on a Chrome connection, let's say on a phone because E-Commerce is primarily mobile. When we look at it, it looks really good. They're checking all the boxes from the metrics. However, when we actually dig into it, first byte time is at 1.4 seconds.
Our benchmarks for mobile, especially for E-Commerce is 200 milliseconds. Two-tenths of a second. We're way out of line here from that standpoint. Meaning there's a lot of opportunity to be had from a conversion standpoint because big data tells us that for every second of slowdown that you have on your website, that's about a 7% drop in conversions.
If your website goes from one second to three-second slow down, that's about a 64% visitor loss. This is why we focus deeply on speed. I'd ask the question, why is the first bite time so low? We start looking at what server are they on, what's the platform?
This website happens to be WordPress and it's sitting on Soft Layer. Immediately we know that we can do a couple of things. Optimize the WordPress database. I bet that hasn't been done in a while.
When we actually test it in Lighthouse, which is one of Google's testing tools, and look at the waterfall, we see the speed index is 7.6 seconds. Again, we're testing with some pretty critical metrics like emulating a phone. Again, optimizing WordPress database number one, and then going into WordPress and saying, okay where's my lowest hanging fruit?
The tool is telling us that there's two and a third seconds for render blocking resources. That points us to adding some type of caching plugin like WP Rocket, or Auto Optimize. Then inlining the critical CSS, which can get the above the fold content on the screen almost immediately or as fast as possible.
Then let everything else load in the background or lazy load. Set lazy loading on the resources of the images. Any image that the user doesn't see on the screen doesn't have to load until the user scrolls down on that screen. That's a great opportunity and they're fairly simple fixes.
Another thing that we're noticing on the speed test is that the tools reporting they have a CDN. They're using WPMU CDN. There are many CDNs available content delivery networks. We typically recommend Cloud Flare to sit on top of the website because you can tune it.
Part of the optimization is checking your PHP version levels. If they're on PHP 7.2, 7.3 is about 30% faster. 7.4 just came out. Again, it provides incremental speed because the website can process faster. The core files can go to the database and they can deliver and process the theme files quicker. That's another opportunity.
Also, when we look at the Hreflang language tester, there's nothing. Again, the UK site, it would help to solidify their Google footprint within the UK Google database. I'll let Paul maybe expand a little bit more about that, but they don't have that available right now.
Luke: I want to jump in real quick on this speed point that you made here Franco because one of the things in E-Commerce that typically doesn't show up on speed audits...is almost the macro events, which is how long does it take to add an item to the basket? The page can be really fast or the page could be really slow. But if it takes five seconds to add an item to the basket, then you're frustrated. Really the point is, how long does it take to complete the conversion?
When you're actually at the checkout and you hit pay now or checkout now, whatever it is, how long does it take to give you a confirmation page? I've seen sites that take plus 30 seconds. But these are the things that you can't measure necessarily with the page speed tools.
Franco: That's a wonderful point. The good news is that there's medicine that you can take that fixes the entire organism so to speak when you do optimize these databases. Typically all of the speed metrics get better.
The one that you're talking about adding the input delay to a shopping cart, this is the particular metric within Lighthouse that points to that, which is the potential first input delay from the user is 850 milliseconds. Almost a second of input delay and potentially depending on the mobile device and the network, et cetera. It could take up to 13 seconds total for the user to be able to do something on the screen.
Paul: I can see we've got some questions. Peg has asked, "I want to know the importance for meta descriptions being fewer than 155 characters."
Stacy: I'll talk about it from the non-technical side. I'm sure there's plenty of technical answers to this too. Essentially what a meta description does for you on the non-technical side is it is your advertisement for your page in search results essentially. It is the thing that you use to convince someone to click through to your page instead of clicking on a search result that's right above or right below. It's essentially almost more valuable from a user perspective than a technical perspective in a lot of cases.
Franco: There was a recent study that came out last week and I apologize for not knowing the source. I'll post it in the comment notes later. 62% of people click on a website or click off of Google or search on the website because the meta description compelled them to. This was ranked by actual users. It's a 62% opportunity for you if you haven't optimized your meta descriptions or they're missing. We'll get into that more later.
Stacy: The other thing that's really interesting if you include the keyword that's being searched for that's valuable, is it'll bold the keyword in your meta description.
Luke: I think that's all really fair. If you were in a situation where you're I guess concerned about the length of your meta description as a core concern, I'd say you're in a pretty damn good space.
Website #3: Duplicate Meta Descriptions, UX Improvements, and Shopify-specific Fixes
Paul: Franco, I know you've been looking at one site in particular.
Franco: Fantastic. All right. Let me share screen and this is a wonderful segue to our meta description discussion a moment ago. We'll start with the on-page first. This is the site: it's Amigo Skate Shop. They're a Spanish E-Commerce site that does clothing and skate wear.
85 percent of their URLs are duplicate meta descriptions. That's a massive, massive, massive, massive opportunity to compel more clicks. When meta descriptions are unique, Google and other search engines can pick up those keywords and rank them thusly. Then we also had duplicate titles on the pages to the tune of about 84% as well.
It's not WordPress so you can't just go grab a developer. You need a specific Shopify developer for this. For some reason, Google tag manager embed code is 404-ing, which signals...the ordering or the positioning of the tag on the page may be incorrect.
We see the first-byte time is also at the one-second mark on mobile. While we're getting good scores, we see that the document complete time is at ten seconds. High water benchmark is six seconds, so they're using the Shopify CDN as well. It's a good CDN, but before you upload an image to the server, that image should be pre-optimized as much as possible to let the CDN do a better job.
One thing that I would challenge them to do as well is to put their menu a little bit higher above the fold, which gives them a lot more screen real estate for where the user wants to get to and potentially the categories. So skates, clothing, shoes, which they do have on the page, but you have to scroll down to find them. Just the relevant links a little bit higher within the above the fold.
Stacy: We're going to be a broken record about search today. That search, it took me forever to even know it was there. For the longest time, I didn't think you had a search. Way more prominent.
Your logo is huge. It's cool. I recognize it, but it doesn't do me any good to have your logo be that big and take up that much space in the hero section of your page. Just under the menu, there's just pictures there. They're nice pictures, but there's not something for me to do from it.
We are taking up a whole lot of screen real estate with no next step. To add to that, similar to what we said about Exodus, if you look up at the menu, there's no real call to action. There's nothing that stands out as a next step in that menu. This is a minor detail but it's a pet peeve of mine when people put home on the menu. Has everyone here been using the internet for a month?
How do we get to our homepage of a website? You click on the logo. Everybody knows it. You don't need to have home and the logo as an option. Just reduce the number of choices. Make it simpler and you can use your space a little bit more wisely.
Luke: I hear you on that Stacy. It's one of those it's a really tricky one to try and identify whether you put it in there as a safety net, or whether you strip it out and just encourage people to use the logo to get back to where they need to.
I find that the middle ground is a home icon. It doesn't take up so much estate, but you've still got that concept blanket you expect to see it there. But there's never a right or wrong answer. I think typically what I find is in a B2B environment where you've got a relatively mature demographic, people are using Internet Explorer, and old machines, or whatever. Having a home icon can make all the difference.
But I hear you; in a world of consumer environments where it's FMCG or apparel, or fashion where everyone's browsing sites all the time, you can probably be a lot more blasé with it and think, hey we don't need it there. It's a tricky one. It's a contentious point in a boardroom on a lot of occasions for sure.
We've spoken about search a lot. I think there's definitely an assumption out there that integrating a properly good search is really expensive. I want it to be clear that that's not actually the case at all. We can have WordPress sites like Juicy Details or this skate shop right here where you're in a situation where maybe your budget isn't great.
There are search engines out there that offer 150 ish pounds a month, whatever that is in whatever currency that can offer a really slick search experience with very little technical input. One of those, for example, is Doofinder.
Franco: There's also a lot of specifically E-Commerce tuned WordPress themes that are light loading and very fast and responsive. One that we like to recommend is Astra and Astra pro themes. They've got one specifically built for WordPress that ticks all of those buttons where the search is prominent and the pages are super fast and light.
Getting back to our friends at Amigo Skate Shop, one other thing we noticed is there's no schema on the website except for products, which is good. That's appropriate and it's not erroring out. That's a big plus. The Lighthouse audit surfaced an issue with lazy loading. The platform is on Shopify and Shopify is a very unique environment. It's locked down. The servers are in Canada and there's certain things that you have to do.
For example, if you want additional product images to be indexed, you have to get a plugin from the Shopify app ecosystem that will actually generate another site map to give Google the CDN URLs for the products. Little specific things that have a lot to do with Shopify in its unique environment. The images themselves are ticking the box for lazy loading because the tag is within the CSS class. However, they're not actually lazy loading. There's a programmatic issue in the background as well.
Paul: Steven is asking again what speed test tools were using. I know you were using webpagetest.org. Is there any others that anyone would like to recommend to use?
Franco: The Lighthouse site at page speed insights from Google is another really good one from the mobile side. I'll just say this caveat. These are all tools and you have to take all of the data from them with a grain of salt and do your homework because they will report slightly differently. Where you're seeing an A may not really be an A. Just spend some time. It's really worth it for the website, so give yourself some permission to feel a little frustrated with the tools, but dig in.
Luke: I think this is where I like to geek out because for me, I like to run page speed insight on categories that are heavy. What I mean by that is, a lot of people just go to the home page and say let's do a speed test and see what's happening.
I like to go to search queries or queries that are really broad like “red” or “colors” and see how long it takes when you really give a hard test to your URL. If you've got a category with maybe 500 products in, go and test the speed of that, rather than one that might just be the home page, which doesn't really have that much on it. What I'm trying to say to you is, call your worst parts of your site to get the real nitty-gritty information, rather than just the home page, which is normally what happens, right?
Paul: Someone wrote a script which pulls Lighthouse by the API straight into Google Sheets. You can actually put in your best-converting pages and your worst converting pages so you can really monitor those. It'll go and crawl it weekly. I'll create a log and then you can do some fancy stuff in Data Studio with it as well. Really visualize it so then that way you can keep your tabs on it without needing to keep going to these different tools of 100 different URLs and work out what's happened in the last week.
Luke: That sounds cool man. Times up, right? Right now, right?
Stacy: Yeah. I think that's it.
Stacy: This was fun.
Franco: Thank you very much.
Luke: It was a lot of fun.
Franco: Thanks for having us.