{"id":23982,"date":"2008-05-09T00:00:00","date_gmt":"2008-05-09T00:00:00","guid":{"rendered":"https:\/\/alienroad.com\/google-bilgi-bankasi\/design-patterns-for-accessible-crawlable-and-indexable-content\/"},"modified":"2008-05-09T00:00:00","modified_gmt":"2008-05-09T00:00:00","slug":"design-patterns-for-accessible-crawlable-and-indexable-content","status":"publish","type":"ar_kb","link":"https:\/\/alienroad.com\/google-bilgi-bankasi\/design-patterns-for-accessible-crawlable-and-indexable-content\/","title":{"rendered":"Design patterns for accessible, crawlable and indexable content"},"content":{"rendered":"

Friday, May 09, 2008<\/p>\n

\n As a follow-up to my
\n previous posts<\/a>
\n on accessibility, here are some design recommendations for creating web content that remains
\n usable by the widest possible audience while helping ensure that the content gets indexed and
\n crawled.\n<\/p>\n

Avoid spurious XMLHttpRequest<\/code> calls<\/h2>\n

\n Pages that enable users to look up information often use XMLHttpRequest<\/code> calls to
\n populate the page with additional information after the page has loaded. When using this pattern,
\n ensure that your initial page has useful information on it—otherwise Googlebot as well as
\n those users who have disabled scripting in their browser may believe that your site contains only
\n the message “loading…”\n<\/p>\n

CSS sprites and navigation links<\/h2>\n

\n Having meaningful text to go with navigational links is equally important for Googlebot as well as
\n users who cannot perceive the meaning of an image. While designing the look and feel of
\n navigational links on your site, you may have chosen to go with images that function as links,
\n for example, by placing <img \/><\/code> tags within <a><\/code> elements.
\n That design enables you to place the descriptive text as an
\n alt attribute<\/a>
\n on the<img \/><\/code>tag.\n<\/p>\n

\n But what if you’ve switched to using
\n CSS sprites<\/span><\/a>
\n to optimize page loading? It’s still possible to include that all-important descriptive text when
\n applying CSS sprites; for a possible solution, see how the Google logo and the various nav-links
\n at the bottom of the Google Results page are coded. In brief, we placed the descriptive text right
\n under the CSS-sprited image.\n<\/p>\n

\"Google<\/p>\n

\"Google<\/p>\n

Use unobtrusive JavaScript<\/h2>\n

\n We’ve talked about the concept of
\n progressive enhancement<\/a>
\n when creating a rich, interactive site. As you add features, also use
\n unobtrusive JavaScript<\/span><\/a>
\n techniques for creating JavaScript-powered web pages that degrade gracefully. These techniques
\n ensure that your content remains accessible by the widest possible user base without the need to
\n sacrifice the more interactive features of Web 2.0 applications.\n<\/p>\n

Make printer-friendly versions easily available<\/h2>\n

\n Web sites with highly interactive visual designs often provide all of the content for a given
\n story as a printer-friendly<\/i> version. Generated from the same content as the interactive
\n version, these are an excellent source of high-quality content for both the Googlebot as well as
\n visually impaired users unable to experience all of the interactive features of a web site. But
\n all too often, these printer-friendly versions remain hidden behind scripted links of the form:\n<\/p>\n

<\/div>\n

\n Creating actual URLs for these printer-friendly versions and linking to them via plain HTML
\n anchors will vastly improve the quality of content that gets crawled.\n<\/p>\n

<\/div>\n

\n If you’re especially worried about
\n duplicate content<\/a>
\n from the interactive and printer-friendly version, then you may want to pick a preferred version
\n of the content and submit a Sitemap containing the preferred URL as well as try to internally
\n link to this version. This can help Google disambiguate if we see pieces of the article show up
\n on different URLs.\n<\/p>\n

Create URLs for your useful content<\/h2>\n

\n As a webmaster, you have the power to mint<\/i> URLs for all of the useful content that you are
\n publishing. Exercising this power is what makes the web spin. Creating URLs for every valuable
\n nugget you publish, and linking to them via plain old HTML hyperlinks will ensure that:\n<\/p>\n