Where I'm at: I've read Google's documentation regarding it's AJAX crawling, and I've searched around a bit in this website and others, but I'm quite confused, as it seems that all problems address the same issue: AJAX crawing with hashbangs?
I've developed an app which, among other purposes, let's the user search for locations worldwide, using an AJAX searcher quite similar to Google's, but my app uses exclusively the question mark in AJAX, instead of hashbang. Due to compatibility issues, changing it to the hashbang is not an option.
Not only am I largely confused by the fact that I could not find anyone else using the question mark instead of the hashbang, I'm also wondering if there is any documentation regarding my issue: how to let google bot crawl all my AJAX content when I'm using the question mark instead of a hashbang in my AJAX app.
The AJAX crawling schema was created explicitly for applications and websites using hashbang (#!) in the URL structure, because the fragment part of the URLs only exist on the client side; the URL rewriting in the specs, i.e. from #! to ?_escaped_fragment_= is meant to solve that.
Since most of the web is already making use of Javascript in a way or other, we (Google) needed a better solution, so we started executing Javascript in the pages we crawled and effectively render every page, just like a normal browser would. To quote our blogpost, Understanding web pages better:
In order to solve this problem, we decided to try to understand pages by executing JavaScript. It’s hard to do that at the scale of the current web, but we decided that it’s worth it. We have been gradually improving how we do this for some time. In the past few months, our indexing system has been rendering a substantial number of web pages more like an average user’s browser with JavaScript turned on.
You can also see what we "see" using Fetch as Google in Search Console (former Webmaster Tools); read more about the feature in our post titled Rendering pages with Fetch as Google
Before you do anything else, please try to fetch a few pages from your site with Fetch as Google. You might not have to do anything at all, it might actually work out of the box. And the good news is that it's not only Google that's rendering pages!
We have web applications elgifto.com, roadbrake.com in which we used AJAX at many places, especially to update major portions of a page. All the important functionality of elgifto.com was implemented using AJAX. Now we realize a few issues due to AJAX implementation.
All the content implemented using
AJAX is not available to the SEO
bots and it is hurting the page rank
of our site.
Users will not be able to bookmark
some of the pages as they are always
available through AJAX.
When we want to direct the user from
one page through an anchor link to
another page having AJAX, we find it
difficult.
So now we are thinking of removing AJAX for these pages and use it only for small functionality such as something similar to marking a question as favorite in SO. So before going ahead and removing, we want to know expert's opinion on this. Thanks.
The problem is not "AJAX" per se, but your implementation of it. Just as a for instance, you can fix the 'bookmark' problem like google maps does it: provide a generated link for each state of your webapp.
SEO can befixed by supplying various of these state-links to the crawlers, either organically trough links in your site, or by supplying a list (sitemap).
If you implement 2, you can fix 1 and 3 with those links.
In the end you must figure out if the effort is worth it, and if you are not overusing AJAX ofcourse, but the statements you've made are not set in stone at all.
I'm costantly developing ajax based websites, with no problems for SEO at all. You just have to use it in the best possible way.
For example, I have a website with normal links pointing to normal webpages (PHP pages), this for normal navigation if a user doesn't have JS enabled. But if a user has JS enabled, a script will change the links behavior, only fetching the content of the page needed.
This way you still have phisycal separated webpages with all their content, which will be indexed as normal.
How does Facebook Ajax work? 2-3 months ago they were using # but now the whole addressbar is changing.
The first approach used is called "Ajax Crawling" (also refer to this answer).
But I think the new approach you are talking about is just the HTML5 History API. Github is using this approach for their tree browsing, and you can learn more about it here. (I recommend ALL readers to read and watch the video as it's very informative)
EDIT:
Just to point out that Facebook is definitely using the HTML5 History API (direct link from the previous github article).
They still use # as far as I can tell (but maybe we are on different versions?). For me, their links are for different pages, but they intercept my onclick and change the click to an Ajax request instead. Maybe this is to make cleaner URLs when copying and/or make it work without JS?
i am planing to start a full ajax site project, and i was wondering about SEO.
The site will have urls like www.mysite.gr/#/category1 etc
Can Google crawl the site.
Is something that i have to noticed about full ajax and SEO
Any reading suggestions are welcome
Thanks
https://stackoverflow.com/questions/768233/do-hashes-in-urls-affect-seo
You might want to read about so called progressive enhancement.
Google supports indexing of AJAX sites, but unfortunately it involves extra work for the developer. See http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I don't think Google is capable of doing so (yet)
http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html
However you can of course make your site usable with or without JavaScript. That way, browsers will have the full candy stuff and Google (and text browsers) still can navigation your site.
In addition to SEO, you also need to think about usability standards here. A site that is that reliant on AJAX isn't going to work for things like screen-readers as well as spiders. You need a system for graceful degreadation. A website that can't function without JavaScript isn't really a functioning website.
The search engines will spider the initial page load - what happens to the page (with ajax) after that is irrelevant to listings.
Google itself doesn't crawl ajax content but advice a mechanism for it. For this you first need to change # to #!
Whole process to SEO AJAX content is explained here along with simple asp.net code to start working on it.
Imagine having to hit the “refresh” button in your browser to update your Twitter feed rather than just hitting the button on the page itself and having it instantly update? These are the types of problems that AJAX solves, although it does come with its pitfalls. Google might claim it’s able to crawl and parse AJAX websites, yet it’s risky to just take its word for it and leave your website’s organic traffic up to chance. Even though Google can usually index dynamic AJAX content, it’s not always that simple. This guide covers some of the things that can go wrong and how you can make sure your AJAX website is crawlable: https://prerender.io/ajax-seo/
I have to start using AJAX in a project and I don't know where to start. Can someone please help?
Asynchronous JavaScript And Xml. A technique for achieving bi-directional, script-driven communications between Web browsers and servers via HTTP.
See also:
definition on Wikipedia
AJAX Introduction on w3schools
Ajax Workshop 1 on Ajax Lessons
Edit: As pointed out by Nosredna, JSON is often used in place of XML.
The rough idea in English:
You have a web page. Some event (can be a button press or other form event, or just something triggered by a timer) occurs and triggers JavaScript code that asks the server for fresh information (like the latest value of GOOG stock).
There's a piece of code on the server that collects the info you passed and sends some info back. That's different from the page-serving job the server usually has.
When the server answers, a callback function (that you specified in the JavaScript call to the server) is called with the info from the server. Your JavaScript code uses the info to update something--like a GOOG stock chart.
Not to be confused with the cleaner, AJAX, the technology term, is really describing a framework or better stated as a technique for using XML and JavaScript to make asynchronous calls to server side code...
Here are some good code samples. And some more.
While many of these samples above show how to create all of the XML Request objects, if you look into the AJAX Control Toolkit from Microsoft for ASP.NET applications or jQuery, you'll find these easier to work with.
jQuery Sample (from jQuery site):
when code is hit, the some.php file is hit passing the name and location values in.
<script type="javascript">
function saveDataAjax(){
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
}
</script>
<input type="submit" onClick="saveDataAjax();" value="submit" />
It's a buzzword, the essence of it is:
Using Javascript to make an asynchronous HTTP request (in the background).
When the content arrives, an action is taken, usually performing some logic then updating the appearance of the page by manipulating the DOM tree; meaning, inserting new HTML elements, deleting some html elements, etc.
The X in AJAX stands for XML, but it's irrelevant. XML is just one of many ways to format the data that's sent by the server. JSON is a much better alternative (IMNSHO). Also, the server can send plain text or just regular html.
The keyword here is asynchronous request. A request that happens in the background, without the browser having to reload the page.
From the Pragmatic Ajax book:
What Is Ajax?
Ajax is a hard beast to distill into a
one-liner. The reason it is so hard is
because it has two sides to it:
Ajax can be viewed as a set of
technologies.
Ajax can be viewed
as an architecture.
Ajax: Asynchronous JavaScript and
XML
The name Ajax came from the bundling
of its enabling technologies: an
asynchronous communication channel
between the browser and server,
JavaScript, and XML. When it was
defined, it was envisioned as the
following:
Standards-based presentation using XHTML and CSS
Dynamic display and interaction using the browser’s DocumentObject
Model (DOM)
Data interchange and manipulation using XML and XSLT
Asynchronous data retrieval using XMLHttpRequest or XMLHTTP (from
Microsoft)
JavaScript binding everything together
Although it is common to develop using
these enabling technologies, it can
quickly become more trouble than
reward.
It is for these reasons that the more
important definition for Ajax is...
Ajax: The Architecture
The exciting evolution that is Ajax is
in how you architect web applications.
Let’s look first at the conventional
web architecture:
Define a page for every event in the application: view items, purchase
items, check out, and so on.
Each event, or action, returns a full page back to the browser.
That page is rendered to the user.
This seems natural to us now. It made
sense at the beginning of the Web, as
the Web wasn’t really about
applications. The Web started off as
more of a document repository; it was
a world in which you could simply link
between documents in an ad hoc way. It
was about document and data sharing,
not interactivity in any meaningful
sense.
Picture a rich desktop application for
a moment. Imagine what you would think
if, on every click, all of the
components on the application screen
redrew from scratch. Seems a little
nuts, doesn’t it? On the Web, that was
the world we inhabited until Ajax came
along.
Ajax is a new architecture. The
important parts of this architecture
are:
Small server-side events: Now components in a web application can
make small requests back to a server,
get some information, and tweak the
page that is viewed by changing the
DOM. No full page refresh.
Asynchronous: Requests posted back to the server don’t cause the
browser to block. The user can
continue to use other parts of the
application, and the UI can be updated
to alert the user that a request is
taking place.
onAnything: We can interact with the server based on almost anything
the user does. Modern browsers trap
most of the same user events as the
operating system: mouseovers, mouse
clicks, keypresses, etc. Any user
event can cause an asynchronous
request.
This all sounds great, doesn’t it?
With this change we have to be
careful, though. One of the greatest
things about the Web is that anybody
can use it. Having simple semantics
helps that happen. If we go overboard,
we might begin surprising the users
with new UI abstractions. This is a
common complaint with Flash UIs, where
users are confronted with new symbols,
metaphors, and required actions to
achieve useful results.
Most commonly, it refers to the use of the XMLHttpRequest object via JavaScript* in a browser.
Depending on who you ask, it could be used to describe almost any type of client/server communication over HTTP other than just typing a URL into a browser.
*jQuery provides some nice wrapper code to handle cross-browser differences, etc.
Ajax is a bit of a misnomer. To quote the wiki article:
Despite the name, the use of
JavaScript and XML is not actually
required, nor do the requests need to
be asynchronous.
Whereas now most people call "ajax" any type of
web application that communicates
with a server in the background
http://www.w3schools.com/Ajax/Default.Asp
that is a good place to start. This should answer all of your questions.
From the man that coined the term - http://adaptivepath.com/ideas/essays/archives/000385.php
"Ajax" is the successfull marketing term introduced back in 2005 to replace the the older term "DHTML" that did not stick well. "Ajax" today is part of the history too as the new word - "HTML5" emerge. Still "HTML5" is pretty much what original "DHTML" used to be.
Ajax is also reffered to as "the new approach to the application development" where a web page is created on the server initially but later on, during its lifetime, the updates are being done on the client as the data or partial content gets communicated to the server in a background.
Hope this clarifies.
Just to add.. may be not relevant for the question ..
although, AJAX was made famous by Gmail in their browser emails ..the credit of AJAX goes to Microsoft .. they created the AJAX thing..
I believe the fastest and easiest way to get started is with jQuery:
http://jquery.com/
http://docs.jquery.com/Ajax/jQuery.ajax#examples
AJAX stands for asynchronous JavaScript and XML, though it doesn't always deal with XML data anymore. Essentially it boils down to using the XMLHttpRequest object through JavaScript running on the client to make a web request and retrieve some information that you use to update the state of your page without requiring a page refresh.
Start with a basic tutorial that shows you how to use bare bones Ajax to make asynchronous requests such as http://www.w3schools.com/Ajax/Default.asp before moving on to using it in a production level application.
When using it in an application you're far better off investigating one of the common JavaScript frameworks that abstract away the differences between the various browsers and make it easy to manipulate the page after the request returns. I personally recommend http://www.jquery.com/
I read Head First AJAX as my first AJAX reference and I found it to give a simple and practical overview of AJAX.
Creative use of previously known technology. Both the browser side scripting and programmatic access to data on the server have been known before. In AJAX it has been put together for innovative use anabling new applications of thechology known before. The REST comes to mind as similar type of advance...
AJAX is very simple : someone somewhere tought that it would be cool to be able to send something to the server and receive something from it without reload a page.
AJAX is not a revolution, it's just a name for something simple : a web page can send a request to the server without being reloader - just some asynch stuff here.
You can add AJAX controls on your web pages wihout any works - just drag them in with Visual Studio. You may have to add some manager for them, but it is simply a drag-and-drop task.
But be warned : rogue web browser usually don't speak the same AJAX language as IE...
:)
AJAX is really fancy term for giving the browser the ability to refresh parts of its content with the need to reload an entire page. Like many have said, it doesn't require XML, or even Javascript in order to implement it. In fact in its early days it was done with with VBScript and Jscript and just called DHTML. Jesse James Garrett may have invented the AJAX term, but it was really Microsoft that invented the concept behind it.
This source says Microsoft started it in 1999, but I would date the birth of this technology even further. This Wired article is probably more accurate on the date of this technology being in the late 90's, much of it coming from the old days of the MSDN DHTML Dude columns written by Michael Wallent at Microsoft which started back in 1997. Much of the story is also told in this great video here by Michael himself: http://channel9.msdn.com/posts/Charles/Michael-Wallent-Advent-and-Evolution-of-WPF/ Megan still works at Microsoft by the way working on the Silverlight team nowadays, Microsoft's replacement for ActiveX.
Back to the AJAX thingy...when Jesse James Garrett back in 2005 he was mostly talking about the use of XMLHTTPRequest within Javascript code, and a dash of salt. That later began a hip word that many people started using even though they had no idea what it was, and thought that is really something brand new and hip, when really it was just a remix of something old.....sort of like many hip-hop songs you hear nowadays.
It's not new, just a newer version of something old!
I'll give it a try and say that "it's the concept of having a W3C based (JavaScript, HTML and CSS) solution for building Rich Applications for running on the web in a browser"
Everything else is just "technical details" I guess ... ;)
PS! - AMAZING question ...!! ;)
AJAX (Asynchronous JavaScript and XML) is a newly coined term for two powerful browser features that have been around for years, but were overlooked by many web developers until recently when applications such as Gmail, Google Suggest, and Google Maps hit the streets.
To know more information about Ajax learn Ajax tutorial
AJAX = Asynchronous JavaScript and XML.
AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.(FROM w3school). to understand simply: when we request for a link or submit form we request a synchronously to server for data. webpage destroy current page and regenerate new page. but with AJAX browser can send the same request without repainting the entire page.
It's JavaScript, but it works.