I would like to build a website where when you go to the next pag,
the page slides to the next.
I can use Jquery.ScrollTo but then i have to load all the pages at ones.
http://demos.flesler.com/jquery/scrollTo/
This is not a good result for the google index I think.
What is the best way to do this? I think about loading the next page with ajax.
you need includes having HTML links for your navigation, ensuring that your site works on browsers that do not have JavaScript turned on, and using real links in your JavaScript or AJAX, such as:
[a href=”ajax.htm?sn=products” onClick=”navigate(‘ajax.html#sn=products′); return false”]products[/a]
Check out the JQuery mobile framework which has this implemented. They use Ajax page loads and CSS3 transitions to slide new pages into view but your page HTML uses normal tags which can be used by a search spider.
http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html
Related
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.
I have created an ajax driven website which can load any page when given the correct parameters. For instance: www.mysite.com/?page=blog&id=7 opens a blog post.
If I create a sitemap with links to all pages within the website will this be indexed?
Many thanks.
If you provide a url for each page that will actually display the full page, then yes. If those requests are just responding with JSON, or only part of a page, then no. In reality this is probably a poor design SEO wise. Each page should have it's own URL e.g. www.mysite.com/unicorns instead of www.mysite.com/?page=blog&id=1, and the links on the page should point to those. Then you should be using Javascript to capture all the link click events for the AJAX links, and then use Javascript how you like to update the page. Or better yet maybe try out PJAX which will load just the content of a page instead of a full page refresh speeding things up a little without really any changes from your normal site setup.
You do realize that making that sitemap all your search engine links will be ugly.
As Google said a page can still be crawled with nice url if you use fragment identifier:
<meta name="fragment" content="!"> // for meta fragment
and when you generate your page by ajax append the fragment to URL:
www.mysite.com/#!page=blog-7 //(and split them)
The page should load content directly in PHP by using $_GET['_escaped_fragment_']
As I've read that Bing and Yahoo started crawling with same process.
So I understand this may come across as a open question, but I need away to solve this issue.
I can either make the site do ajax request that load the body content, or I can have links that re-loads the whole page.
I need the site to be SEO compliant, and I would really like the header to not re-load when the content changes, the reason is that we have a media player that plays live audio.
Is there away that if Google BOT or someone without ajax enabled it does the site like normal href but if ajax or javascript allowed do it the ajax way.
Build the website without JS first, ensure it works as wished, each link linking a new unique page. Google parses your site without JS, so what you see with JS off is what he sees.
Then add the JS, with click handlers to prevent the default page reload and do your ajax logic instead. You could use JQuery and .load() to do this quite easily.
Other solution, you could use the recommended Google method ( https://developers.google.com/webmasters/ajax-crawling/ ), but it's more work and less effective SEO-wise.
Or you can put your audio player in a iFrame...
How Make Page Navigation in php without reloading the page without jquery like facebook has.
ex. for welcome page : http://www.facebook.com/?sk=welcome
for friends list : http://www.facebook.com/?sk=ff&ap=1
for news feed link http://www.fack.com/?sk=nf
with clicking the link instead of reloading whole page the appropriate content be loaded.
how to do this without javascript, jquery
Without JS and jQuery, the only way will be an <iframe>.
Look at this documentation for more.
If you want it done the same way that Facebook does, you’ll have to use JavaScript. There’s little way to do it without it.
Basically I want to replicate the page changing effect found here, at http://timvandamme.com/
But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible... but still have this nice effect.
So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"
In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).
I know how to code the scrolling bits, it's just literally the ajax loading includes / page navigation parts I'm struggling to work out :\
Any help would be MUCH appreciated! Thanks in advance.
Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).
Foo
<script>$("a").click(function(event){
event.preventDefault();
navigate($(this).attr('href'));
});</script>
Use the onClick function of the links to change the page's content with AJAX (just like it appears on the site you linked), but additionally set up each "page" (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.
To add to the others, some search engines understand this problem and offer site map utilities. You can check out google's site map solutions here:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184
The site map will allow you to explicitly inform google about certain uri's (like http://timvandamme.com/#about).