Webmaster Central Blog
Official news on crawling and indexing sites for the Google index
Design patterns for accessible, crawlable and indexable content
금요일, 5월 09, 2008
Written by
T.V. Raman
, Research Scientist
As a follow-up to my
previous posts
on accessibility, here are some design recommendations for creating web content that remains usable by the widest possible audience while helping ensure that the content gets indexed and crawled.
Avoid spurious XMLHttpRequests
Pages that enable users to look up information often use XMLHttpRequests to populate the page with additional information after the page has loaded. When using this pattern, ensure that your initial page has useful information on it -- otherwise Googlebot as well as those users who have disabled scripting in their browser may believe that your site contains only the message "loading..."
CSS sprites and navigation links
Having meaningful text to go with navigational links is equally important for Googlebot as well as users who cannot perceive the meaning of an image. While designing the look and feel of navigational links on your site, you may have chosen to go with images that function as links, e.g., by placing <img> tags within <a> elements. That design enables you to place the descriptive text as an
alt attribute
on the <img> tag.
But what if you've switched to using
CSS sprites
to optimize page loading? It's still possible to include that all-important descriptive text when applying CSS sprites; for a possible solution, see how the Google logo and the various nav-links at the bottom of the Google Results page are coded. In brief, we placed the descriptive text right under the CSS-sprited image.
Google search results with CSS enabled
Google search result with CSS disabled ("Google" sprited image lost, descriptive "Google" link remains)
Use unobtrusive JavaScript
We've talked about the concept of
progressive enhancement
when creating a rich, interactive site. As you add features, also use
unobtrusive JavaScript
techniques for creating JavaScript-powered web pages that degrade gracefully. These techniques ensure that your content remains accessible by the widest possible user base without the need to sacrifice the more interactive features of Web 2.0 applications.
Make printer-friendly versions easily available
Web sites with highly interactive visual designs often provide all of the content for a given story as a
printer-friendly
version. Generated from the same content as the interactive version, these are an excellent source of high-quality content for both the Googlebot as well as visually impaired users unable to experience all of the interactive features of a web site. But all too often, these printer-friendly versions remain hidden behind scripted links of the form:
<a href="#" onclick="javascript:print(...)
">Print</a>
Creating actual URLs for these printer-friendly versions and linking to them via plain HTML anchors will vastly improve the quality of content that gets crawled.
<a href="http://example.com/page1-printer-friendly.html" target="_blank">Print</a>
If you're especially worried about
duplicate content
from the interactive and printer-friendly version, then you may want to pick a preferred version of the content and submit a Sitemap containing the preferred URL as well as try to internally link to this version. This can help Google disambiguate if we see pieces of the article show up on different URLs.
Create URLs for your useful content
As a webmaster, you have the power to
mint
URLs for all of the useful content that you are publishing. Exercising this power is what makes the web spin. Creating URLs for every valuable nugget you publish, and linking to them via plain old HTML hyperlinks will ensure that:
Googlebot learns about that content,
users can find that content,
and users can bookmark it for returning later.
Failure to do this often forces your users to have to remember complex click trails to reach that nugget of information they know they previously viewed on your site.
Hey!
Check here if your site is mobile-friendly.
태그
accessibility
10
advanced
195
AMP
13
Android
2
API
7
apps
7
autocomplete
2
beginner
173
CAPTCHA
1
Chrome
2
cms
1
crawling and indexing
158
encryption
3
events
51
feedback and communication
83
forums
5
general tips
90
geotargeting
1
Google Assistant
3
Google I/O
3
Google Images
3
Google News
2
hacked sites
12
hangout
2
hreflang
3
https
5
images
12
intermediate
205
interstitials
1
javascript
8
job search
2
localization
21
malware
6
mobile
63
mobile-friendly
14
nohacked
1
performance
17
product expert
1
product experts
2
products and services
63
questions
3
ranking
1
recipes
1
rendering
2
Responsive Web Design
3
rich cards
7
rich results
10
search console
35
search for beginners
1
search queries
7
search results
140
security
12
seo
3
sitemaps
46
speed
6
structured data
33
summit
1
TLDs
1
url removals
1
UX
3
verification
8
video
6
webmaster community
24
webmaster forum
1
webmaster guidelines
57
webmaster tools
177
webmasters
3
youtube channel
6
Archive
2020
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2019
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2018
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2017
12월
11월
10월
9월
8월
6월
5월
4월
3월
2월
1월
2016
12월
11월
10월
9월
8월
6월
5월
4월
3월
1월
2015
12월
11월
10월
9월
8월
7월
5월
4월
3월
2월
1월
2014
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2013
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2012
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2011
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2010
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2009
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2008
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2007
12월
11월
10월
9월
8월
7월
6월
5월
4월
3월
2월
1월
2006
12월
11월
10월
9월
8월
Feed
Follow @googlewmc
Give us feedback in our
Product Forums
.
Subscribe via email
Enter your email address:
Delivered by
FeedBurner
