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.
Related
Let me know if this question needs more clarification.
I am a front-end developer, and I usually use Wordpress with lots of custom fields to put together a CMS for clients.
A current client wants a design portfolio site that initially presents a grid of images that link to projects, but instead of loading a new page on click, the new content loads and fades in smoothly.
I figure the simplest way to do this kind of thing is to load everything up front on one page with ajax (a loading screen is OK), and then just show/hide/move content with jQuery.
The request I am having trouble with is being able to have specific URL's for different projects and images. The client wants a URL scheme like here:
http://collins1.com/work/bp-helios-house/3
Where the number at the end causes a specific image to load in the given project. It seems like this would be simple enough using php variables where like:
http://www.whatever.com?project=3&image=2
And using those to manipulate the initial AJAX load.
But how is this accomplished using a more traditional (pretty) URL structure like the example? If I am building the site as one page loading content, won't the browser attempt to load that as a page and just come up with a 404?
Bonus: How do you change the URL in the address bar to create these links as the user navigates the site without reloading the page?
Thanks!
what you see there, is called url routing. Basically, some server rule that rewrites the url in a proper way, depending on server and scripting language used.
for example, the url
http://server.com/foo/bar
MAY be redirected to
http://server.com/index.php?foo=bar
If you need a lightweight framework to handle this, take a look at www.slimframework.com
If you want real pretty urls you are going to need a server-side framework for url routing and will require you to get into php or ruby on rails. If you want a pure front end solution you can fake it in javascript using hash fragments. For how to do this see
http://backbonejs.org/#Router
http://www.asual.com/jquery/address/
http://benalman.com/projects/jquery-hashchange-plugin/
As some of you may know, Google is now crawling AJAX. The implementation is by far something elegant, but at least it still applies to Yahoo and Bing AFAIK.
Context: My site is driven by Wordpress & HTML5. An Custom Post Type has tree types of content, and the contents of these are driven by AJAX. The solution I came for not using hashbangs (#!) until fully understand how to implement them is rather "risqué". Every link as HREF linking to *site.com/article-one/?tab=first_tab*, that shows only the contents of the selected tab (<div>Content...</div>). Like this:
This First Tab
As you may note, data-tab is the value that JavaScript sends with AJAX Get, that gets the related content and renders inside a container. At the other side, the server gets the variable and does a <?php get_template_part('tab-first-tab'); ?> to deliver the content.
About the risqué, well, I can see that Google and other search engines will fetch *http://site.com/article-one/?tab=first_tab* instead of http://site.com/article-one/, making users come to that URL instead of showing the home page with the tab content selected automatically.
The problem now is the implementation to avoid that.
Hashbang: From what I learned, I should do this.
HREF should become site.com/article-one/#!first-tab
JS should extract the "first-tab" of the href and pass it out to $_GET (just for the sake of not using "data-tab").
JS should change the URL to site.com/article-one/#!first-tab
JS should detect if the URL has #!first-tab, and show the selected tab instead of the default one.
Now, for the server-side implementation, here is where I'm kind lost in the woods.
How Wordpress will handle site.com/article-one/?_escaped_fragment_=first-tab?
Do I have to change something in .htaccess?
What should have the HTML snapshot? My guess is all the site, but with the requested tab showing, instead of showing only the content.
I think that I can separate what Wordpress will handle when it detects the _escaped_fragment_. If is requested, like by Google, it will show all the content plus the selected content, and if not, it's because AJAX is requesting it and will show only the content. That should be right?
I'm gonna talk third person.
Since this has no responses, I have a good one why you should not do this. Yes, the same reason why Twitter banged them:
http://danwebb.net/2011/5/28/it-is-about-the-hashbangs
Instead of doing hashbangs, you should make normal URIs. For example, an article with summary tab on should be "site.com/article/summary", and if it is the default one that pops out (or is it already requested) it also should change to that URI using pushState().
If the user selects the tab "exercises", the URL should change to "site.com/article/exercises" using pushState() while the site loads the content throught AJAX, and while you still maintain the original href to "site.com/article/exercises". Without JavaScript the user should still see the content - not only the content, the whole page with the tab selected.
For that to work, some editing to the .htaccess to handle the /[tab] in the URL should be done.
my question is about this website - http://www.bits-apogee.org/2011/
whenever you click on the link in the side navigation bar, the middle part of the website is dynamically loaded. Also, the url also changes, everything else remains unchanged. how is this done?
is this some query plugin?
I totally agree with #JMCCreative. It looks like it's an actual refresh. You should look at the following post on StackOverflow.
Modify the URL without reloading the page
The site is using Hashes (#) in the URL to denote the new content being loaded.
This is useful for people bookmarking dynamically loaded content (normally hashes load to specific areas on a page, named anchors or ID's for new browsers), because they don't trigger the page to refresh...
http://www.highrankings.com/urls-with-hashtags-307 there are drawback (SEO) concerns to this... however you will notice more and more sites doing it so i would assume the SEO robots will get better.
There are 2 possibilities:
You can use the HTML5 capabilities to change the url (history pushState), however this feature isn't available in all browsers yet. For more information, look at this SO post: Is there a way to change the browser's address bar without refreshing the page? .
You can use a hashtag (#) part as fall back for browsers who don't have above feature yet.
If you use jQuery, you can use the handy plug-in jQuery Address. This will take care of both above cases.
They're not using a plugin. They're doing an ajax request to a URL like this:
http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong
and dumping the overview in the container.
The circle of this type of process is usually like this:
listen for link clicks
on click, prevent default on event.
user window.history.pushState to update url
some other code - hears new history
generates a url to get the content.
ajax load the url
dump the data into a container
2 Libraries I have used, both are easier than the above, as they rely on loading a regular html page via AJAX instead the example site you point to, which used a JSON format to get the data.
Pjax - update peices of the page, by pulling that HTML node from a different URL.
Ajaxify - easiest solution, you could do that effect on an HTML site in 10 minutes.
I am creating a web app in php. i am loading content through a ajax based request.
when i click on a hyperlink, the corresponding page gets fetched through ajax and the content is replaced by the fetched page.
now the issue is, i need a physical href so that i can implement facebook like functionality and also maintain the browser history property. i cannot do a old school POSTBACK to the php page as I am doing a transition animation in which the current page slides away and the new page slides in.
Is there a way I can keep the animation and still have a valid physical href and history.
the design of the application is such:
the app grabs an rss feed.
it creates the DOM for those rss feeds.
upon clicking on any headline, the page animates and takes to the full story of the rss feed.
i need to create "like" button on the full story page. but i dont have a valid url.
While Alexander's answer works great on the client side, Facebook's linter tool does not run javascript, so it will get the old content. Neither of the two links provide a solution to this.
What amit needs to implement is server-side parsing of the url. See http://www.php.net/manual/en/function.parse-url.php. Fragment is what the server sees as the hash tag value. In your php code, render the correct og: tags for based upon the fragment.
Firstly, if you need a URL for facebook then think up a structure that gives you one, such that your server-side code will load the correct page when given that URL. This could be something like http://yourdomain.com/page.php?feed=<feedname>&link=<linknumber>, which would allow you to check the parameters using the PHP $_GET array. If you don't have the parameters then load the index page; if you do then load the relevant article.
Secondly, use something like history.js to give you cross-browser support for the HTML5 pushState() functionality so that you can set the page URL when you do the AJAX call, without requiring the browser to do a full reload.
You have to implement hash navigation.
Here is short tutorial.
Here is more conceptual introduction.
If you're using jQuery, I can recommend BBQ for hash navigation:
http://benalman.com/projects/jquery-bbq-plugin/
This actually sounds pretty straight forward to me.
You have the urls as usual, using hash (#) you can extract the info both in the client and server side.
There is only one thing that is missing, on the server side before you return the content, check the user agent string and compare it to the facebook bot (if i'm not mistaken it's something like "facebookexternalhit"), if it turns out to be the facebook bot then return what ever you want which describes the url for a like/share (open graph meta data), and if it's any other user agent string return the content as usual.
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