When Google announced its preference for user-friendly responsive websites in June 2012, I immediately saw an influx of posts that equated responsive design with search engine optimization. This is unfortunate because, while responsive websites can be SEO-friendly, some responsive websites are not.
Iâ€™ve detailed some of the common errors that give responsive websites problems in search results in anÂ article on Search Engine LandÂ earlier this year, so itâ€™s nice to be able to do a more in-depth SEO audit of a responsive website here on Smashing Magazine.
I knowÂ not everyoneâ€™s definition of SEO is the same, so for those of you who donâ€™t know my work, it should be emphasized that fixing all of these issues with SEO will improve the user experience in general; and likeÂ most credible SEOs these days, I donâ€™t believe in manipulating search engine algorithms for short term ranking benefits.
The website Iâ€™d like to audit today is the US version ofÂ Disney Junior. Iâ€™ve chosen this website for three reasons: itâ€™s not run by a client or a partner; it exhibits a lot of the SEO issues of many responsive websites; and my two and four year olds are huge fans of the brand and often use my smartphone or our family iPad to visit it. Hopefully, Disney can use this free advice to make its website better for my kids and kids like them who search.
Itâ€™s worth noting that because Disney Junior is not a client or partner, there may be information about business requirements that I am not privy to. In these cases the recommendations might not be helpful to Disney Junior, but should at least be valuable as SEO best practices for responsive sites.
This audit of Disneyâ€™s beautiful but often frustrating website shows thatÂ mobile SEO doesnâ€™t end once youâ€™ve made a website responsive, and it gives Disney a framework to make its website more usable and findable on search engines.
Is The Website Indexed?
Disney Junior doesnâ€™t seem to have any real issues with indexing; many of its pages have been indexed by Google. See for yourself with a simple
site:domain.comÂ search, or verify it in Googleâ€™s Webmaster Tools if you use it.
Google has indexed approximatelyÂ 1,630Â pagesÂ of Disney Junior. However, the descriptions indicate that we might have problems with content parity.
ObviouslyÂ a website that isnâ€™t in a search engineâ€™s index will be invisiblewhen people search for it. This is true for responsive websites as well as for websites that use dynamic serving or dedicated mobile URLs. That being said, this tends to be more of a problem with mobile URLs because of the common practice of intentionallyÂ
nofollowâ€™ing mobile websites in theÂ
robots.txtÂ file in order to prevent the mobile pages from competing with the â€œcanonicalâ€ pages for link equity.
This practice is misguided because bidirectional annotations (orÂ switchboard tags) can harness that link equity and bring mobile URLs into search results, but thatâ€™s neither here nor there when it comes to responsive websites.
While Disney Junior is indexed, some responsive websites, such asÂ IdisÂ are not so lucky. Idis is responsive and innovative, yet only one page of the website has been indexed by Google. Because the website is dynamic and because
_escaped_fragment_Â hasnâ€™t been used, the URL does not change when a user clicks on different website elements, thus depriving search engines of deep links to include in their indices. If anyone searches for text on any of these pages, they wonâ€™t find this interactive, award-winning website.
This could happen to any website that doesnâ€™t have static URLs, of course, but mobile SEO isnâ€™t done once the developer has decided whether to make their website responsive or use dynamic serving or use dedicated mobile URLs.
Is The Website Crawlable?
In order for any website, responsive or not, to be indexed, Google must be able to crawl the website â€” that is, to follow a link to every unique piece of content and then store that new URL.
To check this, run any website crawler, such asÂ XenuÂ orÂ Screaming Frog. I prefer Rob Hammondâ€™sÂ SEO CrawlerÂ for mobile SEO audits because it allows you to set the smartphone Googlebot as your preferred crawler. The number of URLs is limited but enough to give you a pretty good idea of any crawlability issues. If you own the website, verifying itÂ with GoogleÂ andÂ with BingÂ is imperative. Both search engines have tools for developers that specify the crawl errors they encounter, and Google even lets you tell it to ignore certain parameters that might be causing problems. If you donâ€™t own the website or canâ€™t verify it, you can still identify most problems by crawling the website as described above.
When I crawled Disney Junior, it quickly became apparent that theÂ content is hosted on several URLs:Â
Disney.Go.com/DisneyJunior. This could hinder a search engine from assigning page authority, because a search engineâ€™s spider has aÂ limited crawl budget for every website, based on that websiteâ€™s PageRank, so if youâ€™re splitting your PageRank between four URLs and three domains, then youâ€™re possibly presenting to Google a website architecture that is less than optimal. More on this later in the section about duplicate content.
Disneyâ€™s URLs themselves donâ€™t seem to have any major issues with crawlability because they are mainly static URLs, which search engines have an easier time with. However, the site map could certainly be improved upon. Search engines jointly announcedÂ SitemapsÂ a few years ago as the convention for finding content on websites to index.Â
DisneyJunior.Disney.comÂ does have a site map, but there are a few problems with it, the biggest being that itâ€™s a video site map that contains more than just videos.
Site maps are a way for site owners to communicate directly with search engines, so making the information as accurate as possible and not confusing search engines are imperative. Google hasÂ site maps for the many different kinds of contentÂ included on Disney Junior, so presenting separate maps for images, videos, HTML documents and so on would be best.
Crawlability is not a mobile-specific problem, but getting it wrong can harm a website intended for mobile users just as easily as it can harm a traditional website, and it needs to be done right regardless.
- Disney should consider hosting all content on a single subdomain to ensure that search engines can properly identify page authority and to ensure that all relevant URLs are crawled efficiently.
- Disney should also consider breaking down its single video site map, which contains all types of content, into individual site maps for HTML content, image content, video content, etc.
A search engine cannot factor what it canâ€™t see into the overall relevance of a page. And while Google can do some amazing things with optical character recognition in Google Glass, Google Drive and Google Goggles, it stillÂ only reads textÂ for Google Search. As it says in its â€œWebmaster Guidelinesâ€:
- Create a useful, information-rich website, and write pages that clearly and accurately describe your content.
- Think about the words users would type to find your pages, and make sure that your website actually includes those words within it.
- Try toÂ use text instead of imagesÂ to display important names, content, or links. The Google crawler doesnâ€™t recognize text contained in images. If you must use images for textual content, consider using the â€œALTâ€ attribute to include a few words of descriptive text.
Is Disneyâ€™s responsive website text-based and information-rich, and does it include terms that people would actually use when searching? Not really. If we look at the website through a simple text browser, likeÂ SEO-Browser.com, to get a better sense of how a search engine sees the website, then we get a much different picture than accessing it in a browser:
Unlike websites that embed keywords in images or in Flash, search engines arenâ€™t blocked from seeing relevant content here â€” thereâ€™s just not a lot of relevant content to see. The website isnâ€™t readable in this case because there are no words to read.
If we look at a deeper-level page, weâ€™d see some graphic text that search engines would have a hard time accurately processing.
The text beginning with â€œWatch Sam Sandwichâ€¦â€ is accessible, but the words in the logo â€œThe Bite-Sized Adventures of Sam Sandwichâ€ are not because they are embedded as a graphic.
- At the very least, Disney should make embedded text accessible asÂ
- When the text is substantial, the developer should consider making it accessible in a Web font, rather than as an embedded graphic.
- Furthermore, the volume of relevant keywords, such as â€œgames for kidsâ€ and other non-brand words, should be increased. This could be done by slightly expanding the text block on each page or, ideally, by designing the page to include some scannable text, keeping progressive enhancement in mind.
Is The Website Easy To Link To And Share?
Many websites, both responsive and not, have URLs that donâ€™t seem to be intended for human consumption. This is detrimental to SEO, of course, mostly because the URLs arenâ€™t memorable and are difficult to share. Given how important search engines view sharing and linking when ranking pages, the more we can do to facilitate linking and sharing, the better off weâ€™ll be in search results.
The print and video URLs for Disney Junior fall into this category, adding random characters to otherwise memorable paths (
http://disneyjunior.com/print/stethoscope-4e4e43e2e8368d71cf2086da). For the most part, though, the URLs include keywords and are easy for users and search engines to understand.
The website could go one step further and include social bookmarklets toenable users to share content on social networks. Disney Junior has an active presence on Facebook, Twitter and YouTube, so its creators must understand the value of social media. But they might not understand that leveraging social media is becoming important to organic discovery and search. And given thatÂ 78% of Facebookâ€™s user base is mobileÂ and thatÂ mobile users spend more timeÂ on social networks than PC users, then helping mobile searchers share content whenever theyâ€™d like makes sense. Of course, the Childrenâ€™s Online Privacy Protection Act (COPPA) prohibits this for sites intended for children, butÂ Disney Junior for Grown-UpsÂ is fair game.
This isnâ€™t a tutorial on how to make social buttons work on a responsive website, butÂ Facebookâ€™s mobile â€œLikeâ€ button works on responsive websites. However, for performance considerations, itâ€™s a good idea to useÂ social sharing buttonsÂ orÂ SocialCountÂ that use lazy loading to load the actual social scripts on click. If you use a third-party plugin, such as AddThis,Â there are waysÂ to make those compatible with a responsive website as well.
To increase referrals from social networks and to facilitate content discovery, Disney Junior for Grown-Ups should incorporate social-sharing buttons that are responsive, that add to the overall experience but that donâ€™t significantly increase page-loading time.
Does The Website Display Content For Usersâ€™ Needs, Regardless Of The Device Used?
Those who champion â€œcontent parityâ€ have a worthy cause in making websites accessible to everyone, regardless of device. Unfortunately, the issue is aÂ little complicated. Making content available on all platforms is sometimes good for users, other times not.
Disney Junior is fairly representative. It deprives users of relevant content, fails to connect relevant content to users who need it, and gives users content that they have no chance in the world of ever using. Unfortunately, in my experience this is fairly typical of responsive websites, many of which donâ€™t go far enough to make all content accessible, regardless of device, and which provide content thatâ€™s unusable on mobile devices.
Google sees one weakness so often on mobile websites that it has threatened to penalize for it in smartphone search results: unplayable videos. In June 2013,Google saidÂ this:
â€œWe recommend using HTML5 standard tags to include videos and avoid content in formats, such as Flash, that are not supported by all mobile devices. Regardless, try your best to offer smartphone users the best experience possible to make sure that the videos are playable on as many devices as possible.â€
So, when I encounter many screens like the following when trying to play Disney Junior videos, I get a little concerned:
In some cases, though,Â Disney Junior goes too far with content parity. The four main sections of the website are games, videos, printables and a live feed. The problem is that unless a user is not only aware ofÂ Google Cloud PrintÂ but is one of the handful of people who has it installed on their device, they wonâ€™t have any way to print the coloring pages or other printables.