My website is setup like: when the page loads, a jQuery animation -- in the template -- is played which, on completion, further makes an Ajax call to fetch the content of the page. Now, I want to deploy hashbang like http://com-address/#!page and I need to retain the animation at the page load as well. But I assume the problem with this setup is; when the web-crawler visits the page, it doesn't wait for the animation to complete and make the Ajax call. It requires the state of the page with the loaded content (which, in my case is acquired after the animation is completed).
Given the above scenario, which way is better:
Change the entire flow and load the page content preemptively and hide it
till the animation is played.
Only when the hash-bang or _escaped_fragment is found in the URL:
a. follow step 1.
b. load the page with the content without animation.
My assumption about the web-crawler is incorrect & let the
current flow as it is.
Any heads-up advice?
EDIT
#kdzwinel, thanks for the tip about text-browsers!
On the second thought, I'll go with the option 2(a) because when the crawler visits the resource with fragmented URL, it should get the full resultant content on the page. And if the user navigates directly to the fragmented URL, the user-experience with animation would be intact too (by removing the content on the dynamic content fragment between the page load and the animation starts).
Also for all the other scenarios, we would continue the old flow (animate then fetch via Ajax) because we don't want to refresh the page since the user is already visiting the website and trying to navigate smoothly/seamlessly using anchors with fragmented URL (binding their click events to begin animation).
Web crawlers don't execute javascript (webmaster guidelines -
If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.
), if you wan't your content indexed go with option #1. Load the content when page is opened and if browser supports javascript - hide the content and show the animation.
Related
I have a small rental car business and have an existing PHP website that presents our fleet and accepts online reservations using a series of PHP pages and SQL database calls. The system works very well, however I would like users to be able to move between pages of the website without the browser going to the usual blank page in between.
I have made an attempt at using AJAX to asynchronously load content of the pages in question into a "container" page, however I have not been successful in achieving the required result. The pages are heavy with PHP code and when I attempt to load content asynchronously using AJAX I get load issues that I cannot seem to resolve.
I understand that the AJAX load() method allows content to be asynchronously loaded into a container such as a DIV element, however I am wanting to know if this method can be applied to the full page content. In a sense, the full of the page would be the container for the content of each page to be loaded into.
Ideally, each separate page would load in the background with a semi-transparent loader overlay (like an animated moving loader bar) would sit over the current page, and the target page would be loaded and then the overlay removed to fully reveal the new page content. The user would see the loader overlaying the current page content, then would see the new page content without seeing a blank page in-between.
Can the AJAX load() method somehow be applied to the full page rather than to a DIV, and would there be an effective way to apply this method to some or all existing pages without a large amount of rework to the existing page content?
Many thanks,
Scott.
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I'm trying to code a seo friendly ajax portfolio right now. My goal is to provide javascript effects to users and normal html to bots/users without js.
Files:
index.php (starting point of my program)
aboutme.php (contains html code for "about me")
contact.php (contains html code for "contact")
The idea:
User visits index.php and clicks on "About me" -> loading animation appears -> aboutme.php gets loaded with ajax -> history.pushstate rewrites the url to aboutme.php.
-> When the user shares the current website url on fb/twitter/g+ the bots will get the correct title, body etc., as it is the normal html page without any javascript.
But my problem is: If other users open that page, they see directly the content. But I want to show them a loading animation first until the data got loaded with ajax (similar as they click on a link).
How can I achieve such an approach? Thank you very much!
Best way to do this, create a javascript file. Write the link tag into "head" part. This will make the javascript file downloaded before content. Javascript shows the animation, but at the same time browser will be downloading the content already in the background. On "document ready" event, stop animation.
This will let bots to access the content directly. Because javascript won't work for them.
To make your ajax content crawlable see https://developers.google.com/webmasters/ajax-crawling/, Bing supports this as well. Or use the HTML5 pushState, see http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate, https://github.com/blog/760-the-tree-slider etc.
I've always thought this is more effort than its worth(generally), but to answer your question:
index.php, aboutme.php, contect.php should deliver full html.
certain links should have js event handlers intercept the click, and instead of loading aboutme.php, they load aboutme-content-only.php in the background. then update the dom and push state etc...
this way the site can easily degrade for those users who are first time visitors, as well as those whose browsers dont support push state or javascript.
I think that it is not a problem at all, keep your href of links as usual, then using JavaScript or jQuery change the default behavior of clicking link to load the linked contents with ajax.
Not sure the best way to describe what I mean, the best way is to look at Facebook whilst I explain.
The bar at the bottom of Facebook will always stay the same, with all chat windows open, and no flicking when you change a page, however, the webpage and the address bar will all change to the new page that you requested, to me that seems like the webpage doesn't actually change at all, and instead, the address bars' URL changes as well as the page content.
I am working on a music player for a bands website, that I want to keep static across all the pages on the site, without reloading and starting again every new page.
The bottom bar is positioned with position: fixed which makes it relative to the viewport, not the document.
The other pages are loaded with XHR, or AJAX.
The changing URL is probably the fragment identifier, unless you have a cutting edge browser, which appears to be using the HTML5 history API (GitHub currently is too).
Zach Rait, an engineer on our infrastructure team, implemented the History API to enable selective loading of page content via AJAX while preserving readable URLs. Previously, current application state was stored in the URL fragment which resulted in unseemly URLs like “profile.php?id=1586010043#!/pages/Haskell/401573824771”. Now, because HTML5 allows us to decouple the currently displayed URL from the actual state of the application, we’re able to display pages more quickly, save bandwidth, and avoid polluting users’ location bars.
Source.
sounds like you want a template and using JQuery or a similar language to dynamically load new content on a portion of the site?
In this way, JQuery will use ajax to load new content in part of the main window without you ever experiencing much of the main page reloading.
You can use css to style a bar at the bottom
#somelink{
position:absolute;
bottom:0px;
}
HTML
click me
<div id="news">Replace me with new content</div>
JQuery
$("#somelink").click(function(){
$("#news").get("album.html",function(data){$(this).html(data);});
});
Let's say I have a URL: http://example.com/person/list
This website will display a list of people. The list of people get very long, so eventually I build in pagination. Let's say 10 people per page. The URL looks something like this:
http://example.com/person/list?page=2
If I click the next page link, I will be taken to page 3:
http://example.com/person/list?page=3
This is good because if I copy and paste the URL to a friend, she will be directed to page 3 immediately.
Let's say that I now incorporate AJAX, and the page requests are ajax calls using jQuery. The original URL is http://example.com/person/list and when a user clicks on the next page link, the URL in the address bar doesn't change.
This is bad because if I'm on page 3, the URL in the address bar doesn't reflect this anymore.
There are multiple jQuery history plugins which will change the URL, however, these will ONLY change the portion of the URL which is after the hash mark #. Information after the hash mark is not sent to the server.
If I'm using a history plugin, the URL can be changed to http://example.com/person/list#page=2
My problem with this approach is: If someone copies and pastes this URL to a friend, when the friend requests this URL, I have no idea which page the user is intending to look at. Therefore, my best approach is to load all of the people entries onto the page, and have javascript select which page to display based on the information after the hash mark. This is a problem because I started to paginate the pages to reduce the amount of information being pulled back from the server in the first place!
What options do I have, such that I can have the back button be usable with Ajax, but also have bookmarkable links which do not require me to get all info from the server.
As I recently learned from my question you have to check the hash-part of the url after the 'friend' opened the link and fetch the content using ajax.
Or you can rewrite it on the server-side to http://example.com/person/list?page=2
You could not list anything until the page loads and then have ajax load the appropriate page.
Another option would be to load the first page as normal and then have javascript check the page hash to load the appropriate page.
For very small loads (and I assume loading 10 people is 'fast'), the second option is probably the best as it shouldn't cause too much disruption of the UI.
Option one has a downside as far as SEO goes, as search engines won't index the content if it's not loaded.