Webmaster Central Blog
Official news on crawling and indexing sites for the Google index
A proposal for making AJAX crawlable
keskiviikkona, lokakuuta 07, 2009
Webmaster level: Advanced
Today we're excited to propose a new standard for making AJAX-based websites crawlable. This will benefit webmasters and users by making content from rich and interactive AJAX-based websites universally accessible through search results on any search engine that chooses to take part. We believe that making this content available for crawling and indexing could significantly improve the web.
While AJAX-based websites are popular with users, search engines traditionally are not able to access any of the content on them. The last time we checked, almost 70% of the websites we know about use JavaScript in some form or another. Of course, most of that JavaScript is not AJAX, but the better that search engines could crawl and index AJAX, the more that developers could add richer features to their websites and still show up in search engines.
Some of the goals that we wanted to achieve with this proposal were:
Minimal changes are required as the website grows
Users and search engines see the same content (no cloaking)
Search engines can send users directly to the AJAX URL (not to a static copy)
Site owners have a way of verifying that their AJAX website is rendered correctly and thus that the crawler has access to all the content
Here's how search engines would crawl and index AJAX in our initial proposal:
Slightly modify the URL fragments for stateful AJAX pages
Stateful AJAX pages display the same content whenever accessed directly. These are pages that could be referred to in search results. Instead of a URL like
http://example.com/page?query#state
we would like to propose adding a token to make it possible to recognize these URLs:
http://example.com/page?query#[FRAGMENTTOKEN]state
. Based on a review of current URLs on the web, we propose using "!" (an exclamation point) as the token for this. The proposed URL that could be shown in search results would then be:
http://example.com/page?query#!state
.
Use a headless browser that outputs an HTML snapshot on your web server
The headless browser is used to access the AJAX page and generates HTML code based on the final state in the browser. Only specially tagged URLs are passed to the headless browser for processing. By doing this on the server side, the website owner is in control of the HTML code that is generated and can easily verify that all JavaScript is executed correctly. An example of such a browser is
HtmlUnit
, an open-sourced "GUI-less browser for Java programs.
Allow search engine crawlers to access these URLs by escaping the state
As URL fragments are never sent with requests to servers, it's necessary to slightly modify the URL used to access the page. At the same time, this tells the server to use the headless browser to generate HTML code instead of returning a page with JavaScript. Other, existing URLs - such as those used by the user - would be processed normally, bypassing the headless browser. We propose escaping the state information and adding it to the query parameters with a token. Using the previous example, one such URL would be
http://example.com/page?query&[QUERYTOKEN]=state
. Based on our analysis of current URLs on the web, we propose using "_escaped_fragment_" as the token. The proposed URL would then become
http://example.com/page?query&_escaped_fragment_=state
.
Show the original URL to users in the search results
To improve the user experience, it makes sense to refer users directly to the AJAX-based pages. This can be achieved by showing the original URL (such as
http://example.com/page?query#!state
from our example above) in the search results. Search engines can check that the indexable text returned to Googlebot is the same or a subset of the text that is returned to users.
(Graphic by Katharina Probst)
In summary, starting with a stateful URL such as
http://example.com/dictionary.html#AJAX
, it could be available to both crawlers and users as
http://example.com/dictionary.html#!AJAX
which could be crawled as
http://example.com/dictionary.html?_escaped_fragment_=AJAX
which in turn would be shown to users and accessed as
http://example.com/dictionary.html#!AJAX
View the presentation
We're currently working on a proposal and a prototype implementation. Feedback is very welcome — please add your comments below or in our
Webmaster Help Forum
. Thank you for your interest in making the AJAX-based web accessible and useful through search engines!
Proposal by Katharina Probst, Bruce Johnson, Arup Mukherjee, Erik van der Poel and Li Xiao, Google
Blog post by
John Mueller
, Webmaster Trends Analyst, Google Zürich
Hey!
Check here if your site is mobile-friendly.
Tunnisteet
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
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2019
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2018
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2017
jouluk.
marrask.
lokak.
syysk.
elok.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2016
jouluk.
marrask.
lokak.
syysk.
elok.
kesäk.
toukok.
huhtik.
maalisk.
tammik.
2015
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2014
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2013
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2012
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2011
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2010
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2009
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2008
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2007
jouluk.
marrask.
lokak.
syysk.
elok.
heinäk.
kesäk.
toukok.
huhtik.
maalisk.
helmik.
tammik.
2006
jouluk.
marrask.
lokak.
syysk.
elok.
Feed
Follow @googlewmc
Give us feedback in our
Product Forums
.
Subscribe via email
Enter your email address:
Delivered by
FeedBurner
