Everyone has been telling you to “go responsive” for the past few years, and you’ve finally made the switch.
I know how painful it can be. We recently redesigned The Daily Egg, and we’re still not done fixing things (we started in January!). Mobile is a pain in the behind!
I still do a little web development work for friends and family, and I know how much extra work goes into building sites these days. It’s basically a matter of building two sites now. Good news for people in the web development business!
If you’re lucky, nothing happened to your SEO and everything is just dandy. Some of you may have seen a lift in your SEO performance since Google gives responsive sites a bump.
However, some of you may have seen a drop in organic traffic after switching to mobile.
In this post, I’m going to go over some of the hidden SEO dangers of switching to a responsive design. There are a few things you need to look out for to make sure you keep your site out of harm’s way.
1. Reduction of Content on the Home Page
The “monkey see, monkey do” design approach right now is to really minimize the amount of text and clutter on your home page.
I get it.
From a conversion optimization perspective and user experience perspective, it makes a lot of sense. Why clutter your home page when you can make it easy for people to get to the goal?
This is especially true when designing for mobile. Real estate is extremely sacred because of the lack of screen space.
From an SEO perspective, removing home page textual content is self-inflicted destruction.
The most SEO optimal home page is a highly descriptive, long-winded, text-filled page with strategic internal links designed to create and optimize site architecture.
And yet, that’s exactly the opposite of today’s responsive web design thought leadership.
So what do we do?
I say strategize depending on what stage you’re in.
If you’re just starting out, maybe it’s a good idea to get your SEO power pumping so you can attract the traffic and eyeballs you need to launch.
In that case, be long-winded on your home page. Talk at length about what your product or service does. Link to a few of your most important webpages directly from the home page.
The search engines will “munch” on all your home page text and get a really good idea of what your site is about. They will also get right to all your important content since you’re linking to pretty much everything straight from the homepage (instead of having to crawl through hundreds of paginated links).
What If You Are Way Past Launch?
If you’re further along than launch and your SEO is pretty solid, then you might want to consider your CRO strategy a bit more. In this case, test removing content and see if your conversion rates go up.
But!
Be sure to look beyond superficial conversion rates, such as the first step from your home page to a sign-up page. Notice the effect on your conversion rates through your entire funnel. Check on actual sign-ups and real sales. Use a tool like Kissmetrics to track an A/B test through your entire conversion funnel.
If you’re still stuck on deciding what to do – there is a bit of a hack.
Consider putting the majority of your long-winded textual content below your “mobile fold.”
That way, when mobile visitors come to your site, they will see the important CTA immediately and hopefully act on it. The search engines can travel through the rest of the page and eat up all your yummy textual content.
Of course, you should test this as a home page variation and see how it does.
2. Re-Scrambling of Text Links
One of the biggest SEO dangers when a site design goes responsive is the changing, removing, and adding of text links. Generally, this is because of a design decision to keep the site looking uncluttered and minimal.
Here’s a typical before and after transition:
Your site’s internal link make-up is crucial to how well your site can perform SEO-wise. The number of links, the link text, and the pages they are pointing to all determine how your site does in the search engines. Let’s go over everything you can do to your internal links that may change your site’s SEO:
Changing Links
You can change the actual text that makes up the text link AND/OR the location of where the link points to. Here’s a closer look:
<a href=http://whiskercare3000.com/care>Whisker Care</a>
<a href=http://whiskercare3000.com/care>Guides</a>
In this case, we changed only the text in the link. What happens here is the search engine now places importance on the keyword “Guides” instead of “Whisker Care” on the URL /care. The text is an important keyword association for that webpage. In this specific case, we took a keyword that we probably want to rank for, “Whisker Care,” and changed it to an ultra-broad and unspecific word, “Guide.”
Perhaps the designer thought the words “Whisker Care” took up too much space (a common hack with mobile navigation) and decided to change the word to “Guides.” Something as simple as this change can have a site-wide effect on your site’s SEO.
The other possible link change would be to change the physical location of where the link is pointing to. There are many reasons one would do this, just be aware that the site’s SEO will change because the link structure has changed.
Removing Links
Removing links can be a blessing in disguise if done right. A good web designer will categorize your site content in a logical way that can usually flow “link juice” in an even and powerful current of pure SEO zap!
Below is a simple diagram by Moz.com that shows how to do just that:
By channeling your internal links to point to content in a logical and categorized way, each piece of deep content gets an equal amount of link juice. Now if you want to give certain content more link juice, you can simply link to it directly from the home page as well. Beware, the rest of the site’s link juice will shift accordingly. Think of it as ballast.
Of course, if the new site design haphazardly removes links from the home page or around the site, everything is going to change from an SEO perspective. That’s why it’s best to sit down with your site designer beforehand and plan a logical site architecture based on how your internal link navigation will be structured.
Adding Links
As with removing links, adding links changes your site’s SEO. Your site architecture will be different and link juice will flow differently. Adding links is fine. If it improves the site’s user experience, then definitely do it. That’s what Google wants you to do.
A Word about Your Home Page
Think of your home page as the most powerful influencer you’ve got. A link from your home page to an important article or landing page delivers a lot of votes/power. So when you’re designing your site, use the home page as the greatest source of power of link juice. You can direct link juice directly to the most important areas of your site if you feel it will improve the experience and importance of those sections.
3. Hidden Text
Hiding text is something that most people wouldn’t intentionally do. Really, the only people who ever did this were SEO spammers of the late 1990s / early 2000s.
At first, when search engines were really DUMB, all an SEO spammer had to do was insert text in the webpage source as an HTML comment (so it wouldn’t get displayed by the web browser), and the search engine spider would come along and gobble up all the text. This was a sneaky method to increase keyword count and long-tail search terms without making your page appear to be pure spam to a human visitor.
Later on (after Google launched), the next terrible trick SEO spammers employed was to hide text by making it the same color as the background or some other on-page element. Of course, Google got wise to this trick and began flagging sites that did this.
These days, Google sniffs around your CSS and JavaScript to see if you’re website is up to these ancient SEO spam hacks. It seems almost ridiculous to think that anyone would even try to do this anymore, and it’s just as ridiculous to think that Google might still be flagging this kind of stuff. Regardless, it’s probably a best practice to avoid doing this at all.
Mobile Is Making This Happen Again
I’ve been involved in quite a few site redesigns this year and I see this issue rearing its ugly head once in a while. And, unfortunately, what I’m seeing is the direct result of mobile redesigns.
The most common issue is when collapsing elements of your webpage cover text unintentionally.
One way to inspect for this potential issue is to drag your browser window to a smaller width when viewing your site on a desktop or laptop computer. Don’t try comparing your phone to your desktop computer because you won’t see the transitional changes and it will be too hard to detect.
Take some time to review several URLs on your site. Make sure to first identify which URLs use which design templates. What I mean by design templates is this: different types of pages may have different layouts depending on their purpose. For instance, landing pages probably have a different overall layout design than, say, a blog post.
It’s probably best to make an inventory of URLs in a spreadsheet and identify which design template they are using in another column. Then go through as many URLs as you can, resizing the pages to check for any hidden text issues. Check off the pages you’ve covered and make notes if you find any problems. This is actually a good way to look for other design “yuckies” you may run into.
If you have hundreds or thousands of URLs, knowing which URLs use which design templates will help because you can test samples of each template to make sure there is no funny business going on.
Give Your Designers a Heads Up
Hidden text can also happen unintentionally if your designer decides to use the good old “display: none;” statement in the website’s CSS stylesheet. This is an easy way to hide text, colors, and decorations without having to do any serious redesigning.
As a matter of fact, in a lot of WordPress help forums, this suggestion is widely communicated to solve typical WordPress design tweaks. Do not get into the habit of using this technique to remove text.
Additionally, designers will specify “media queries” to use “display: none;” for specific screen sizes. For instance, say you want to remove a bunch of sidebar text when someone looks at your site on a phone. Well, “display: none;” is an amazingly easy fix for this. Again, try to avoid this at all costs.
Hold On, Does Google Even Care about Hidden Text Any Longer?
What scares an old SEO like me is that hidden text is one of the old Google penalties that was a big no-no back in the day. And with the rise of responsive and the fact that no one would really do this intentionally any longer, it begs the question: Does it even matter any longer?
I actually asked Rand over at Moz about this a while back. Here is his response:
With that said, it’s just best to avoid it just in case…
Finding these hidden text instances can be really difficult to pinpoint. I usually notice them by accident. Luckily, there is a tool out there that should help you.
4. Improper Use of H1
Improper use of H1 is a real pet peeve of mine.
When I SEO a website, I really like to get the on-page SEO licked from the get-go. And one of the most basic things to do is make sure there is one unique H1 heading on each URL.
What’s an H1 heading?
In your source code, it’s common to use HTML headings for your webpages.
H1, H2, H3 heading tags used for different types of page headings
You should use one <h1> heading tag for your main page heading. It should be unique to that webpage (URL). It’s common for the H1 heading to match the webpage’s title tag, but it’s not necessary.
Other heading tags, like H2 and H3, don’t really need to be unique, and you can use them multiple times throughout a webpage. H2’s are usually reserved for subheadings and H3s are sub-subheadings. You use them as if you were writing an article or term paper. Your H1 might be 18pt and be the title of your article, and your H2 would be 16pt and be the heading of a subsection. It’s pretty simple really.
Now back to how all this gets jumbled when sites go mobile…
Some early mobile templates (and for some reason HTML5 guides too) have multiple H1 headings on each page. It turns out that this isn’t a big deal. It’s not a Google penalty and it has little effect on your SEO in the grand scheme of things.
However, if you’re optimizing, well then you’re going to want to optimize, right? Work with your developers to structure your website stylesheet and HTML framework to use only one H1 heading per URL.
It’s not terribly difficult to set up, and it could make the difference in out-positioning a competitor on a search results page.
Conclusion
The last thing you might want to watch out for is a reduction in the number of images your site is using. A redesign can mean a lot of images get thrown out. There is nothing inherently wrong with this, except sometimes images can bring in traffic. Usually it will be infographics, charts, and images of value. Your typical home page hero image won’t deliver much value to search engine users.
From my experience, a lot of website redesigns fail to go through a proper SEO sanity check. Instead, the redesigns are usually just implemented and then the SEOs are called in after the traffic drops. So do yourself a favor and get prepared beforehand!
