Whether you've already decided to go responsive or you're still considering a responsive site redesign, there are some things you'll need to look out for from an SEO standpoint.
Above the fold issues, content strategy, internal links, and mobile specifics can trip you up.
Before we begin, there's an important distinction between cosmetic and full redesigns. This distinction primarily comes down to one thing: are URLs on your site changing? Changing URLs is a game changer and adds a number of steps that you need to take in order to have a successful transition from an old site to a shiny new one.
The following analysis focuses on common issues with cosmetic redesigns, moving from a non-responsive site to a responsive website design
1. Above the Fold ConsiderationsHomepage Above The Fold Area (Desktop)
This is where it starts to get awkward with the web designers. The thing to keep in mind as project owner broadly, and as a SEO specifically, is to make your wishes known to the designers early in the process, prior to and during the wireframe process.
Responsive design, kind of like the blow out, has it's own style and look, which may at times conflict with some best practices for SEO. One area of conflict is use of above the fold real estate.
Responsive design is visually very much about whitespace and letting different elements breathe. However, elements that are critical to internal linking and user accessibility from the homepage tend to get pushed down under giant banners.
Large banners and sliders, which are so common on responsive sites that come back from web designers, often result in visitors having to scroll down to see links in menus that were easily crawlable before the redesign.
Make sure your main categories are somewhere above the fold on your homepage template. This is critical – especially for an ecommerce site going responsive.
One simple way to fix the issue: find savings to push linked content up. This can be done a number of ways, but some strategies include reducing the size of banners, reducing white space, and adjusting fonts.
Above The Fold Content Issues
Another big responsive issue is getting some non-linked text above the fold. Responsive design is very visual, and content strategy is often set aside (more on this in a moment).
One really big issue at the homepage and category level templates is that there is almost no content above the fold, when you look at the desktop view.
Search engines may be evaluating placement of content on the page. Having content above the fold versus a big block of SEO content just above the footer may be assigned a different value by search engines.
If you have little or no non-linked text above the fold and your prior site did have text above the fold, this is something to note and work on adjusting with your designers.
2. Content Strategy ConsiderationsThere are a number of considerations for content strategy when converting to a responsive design. Beyond the loss of non-linked text that is common in responsive design, keyword density for specific phrases in non-linked text and links is often lost. Spot test for this on each of your major templates during your redesign.
One helpful keyword density testing tool is the Side by Side SEO Comparision Tool. The cool thing to note about this tool is that it does a count of one-word, two-word, and three-word keyword phrases on a given page.
Ideally, any given page you analyze should have a balance of the following elements, like a fine wine:
Short-tail and longer-tail phrases, including relevant variations and modifiers that are relevant to the page.A keyword density that isn't disproportionately weighted to any one particular phrase.Keywords appearing as linked or non-linked text on the page.At each level of your site, there should be a nice balance of the above elements for the number of words you have on a given page, on average. During redesigns, and especially during responsive redesigns, some of this tends to often be stripped out.
To test for this, enter your existing site URL and the staging URL for that page on the new site, and compare. Doing this comparison lets you know if your keyword density balance has been thrown off or if it was poor to begin with and ought to be improved with the redesign.
3. Internal Linking ConsiderationsInternal linking is a huge consideration during any redesign. Often times, especially with ecommerce responsive redesigns, poor internal linking strategy gets passed on from the old site or beneficial internal linking and menus are removed.
One thing you will notice about old sites is that they are naturally very well internally linked. However, as design practices have changed, now it's all about minimalism. Your naturally good internal linking may be lost.
With responsive sites, often the categories are internally linked OK, but go a level deeper, to the product level for example, and the internal linking tends to drop drastically. Also, beyond just for upselling and cross selling purposes, having good internal linking here is very important for SEO.
One super simple way to do a check for this is, again, using the Side-by-Side SEO Comparison Tool. When you're running sample pages for all given template types, make sure to check how many outbound links are on the page for all given template types.
Make sure pages higher in the information architecture are well linked internally. Also make sure lower level pages in the information architecture are well linked to from higher level pages and are well cross linked – this bit is especially important for ecommerce sites.
4. Mobile ConsiderationsThere are fewer mobile considerations for responsive sites, than when supporting a second codebase for a mobile site – which is something like having a mobile version of your site on m.example.com. However, the considerations that do exist are almost never followed.
For Google, it is recommended that you use vary server headers in cases where you are serving different HTML on the same URL. Doing this will tell crawlers that the HTML being served on that URL may vary depending on user agent, such a googlebot or googlebot-mobile.
Making this change will help Google serve the proper cache of the page and it will help Google find mobile optimized content on your site faster. Here's an example:
GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)
Site redesigns are generally one of the more stressful times for any SEO professional. Depending on if the scope of your redesign is full or just cosmetic, and depending on how many other stakeholders are in on the project, what you can get done will vary.
The responsive design specific issues identified above can be usually taken care of in a good requirements gathering phase of the project and wireframe/mockup part of the project. I've had instances where it gets a little tough to marry aesthetic, brand, and SEO requirements using responsive design but by really working closely with the designers and other key stakeholders, you can get what everyone needs in without compromising the great aesthetic appeal that a responsive design offers.
The key, like with any redesign, is to make sure that there are clear SEO requirements at the onset of the project and that you work closely with the team on the project throughout the life cycle of the redesign.
Here are a few additional resources on responsive site redesigns:
Responsive site redesign...any benefits - This is a pretty interesting thread discussing potential SEO benefits from site redesigns.The SEO of Responsive Web Design - Kristina Kledzik, If you're curious about how responsive design works, this article is a great explanation that shows how responsive web design can create a great experience no matter what device you're using.When Responsive Web Design Is Bad For SEO - Bryson Meunier, This article covers some instances where a responsive website redesign may not be a good idea. This article also provides a neat decision tree to help you make the decision if the move is a good idea for your business. Learn More: Responsive Design & Mobile SEOResponsive Web Design: Introduction & Impact3 Reasons Why Responsive Web Design is the Best Option For Your Mobile SEO StrategyMobile Sites: Choosing an Implementation Process & StrategiesMobile & Tablet Optimization: The Next Enterprise Search FrontierThe SEW Annual Feedback Survey
Complete our survey and be entered to win a Platinum Pass to an SES Conference of your choice + 3 runner-up prizes of a $50 Amazon Gift Card. Your feedback is important. Please submit your responses by Friday, April 26. Complete the survey at http://sewat.ch/12t5ZPl.
No comments:
Post a Comment