SEO and dynamic javascript HTML switching - javascript

just wondering if anyone knows anything of using javascript to set html to new content instead of linking to new pages, if this is generally a bad idea or if it kind of hurts SEO(which im kind of new to)
Basically the home page displays given content, and the links to like contact pages and stuff, just change the body content to what would normally be a separate html page. my OCD kinda bugs me when pages reload and either flash the background or its offset somehow, so i wanted to know if making sites like this was a bad idea or whatever-
i suppose at the least, i could create duplicates/hidden pages for SEO purposes

As you describe it, it is a bad idea. The right methodology is to use progressive enhancement: you develop for javascript-disabled users (such as searchbots) and then use javascript for ajax loading. So most users will benefit from an improved user experience, without preventing the rest from accessing your data.
In practice it means your regular markup for a page-based navigation menu
(products) and via javascript (such as jquery) you modify the behaviour:
$('#nav a').bind('click',function(){
$('#content').load($(this).attr('href'));
return false;
});

usually for a good SEO, you need to have the maximum pages you can, and then, if you want to use javascript to load, use ajax unobtrusive.

Breaks bookmarking
Breaks the back button
Breaks saving the page
Breaks sending a link to a friend
Breaks search engine indexing
It is possible to mitigate (to some extent) most of these, but only imperfectly and only with quite a lot of work.

In order to allow for some SEO - you can have all the data on the screen as divs. a Home div, Contact Us div etc...
With javascript, you would switch off the divs corresponding to which page you'd like.
If the user has no javascript, they see all the pages at once.
Heres an example of a site that does this with OK SEO - but switch off the javascript it all goes a bit wrong.
http://www.spideronline.co.uk/#our-work

Related

PHP Javascript, Website which loads everything into a div is there a way to make the back button work

I am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)
I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.

Building a "single page" site with animation between pages

I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html
I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.
I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?
Just point me in the right direction :)
There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:
Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.
Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.
These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:
Make your website look more responsive by the cautious use of loading .gifs.
Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.
Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.
now there can be tons of ways .. the easy way (but it's not much of a maintainable way )
is to all your website content in one page and wrap every section that you consider a page in a div like so
<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us page goes here </div>
etc...
and with jquery hide them all except the home page
$(function(){
$('.contact-us-page').hide();
$('.other-page').hide();
})
and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead
$('.contact-us-link').click(function(){
$('.home-page').hide(1000);
$('.contact-us-page').show(1000);
})
and thats it :)
the down fall of this is that there will be no routing ..
so to solve this you have to use something like backbone.js
which takes a while to know it well ...
this is just a quick idea on how this works ..

What's the best way of using hash tags for page navigation as well as anchor navigation?

I'm making a web application that uses hash tags for page navigation like this
http://foo.bar.com/#pages/home
I just realized that one of my pages is going to be kind of huge, containing it's own tree-structured menu with links that should scroll the page to different anchor tags in the page. Obviously I can't use actual hash tags for that now, since they are busy. I'm going to have to use a programmatic solution with an URL like this
http://foo.bar.com/#pages/home/section
Or would it be possible to use more than one hash symbol, perhaps changing it to this?
http://foo.bar.com/#!/pages/home#section
But how can this be done programmatically anyway?
I'd scrap the broken use of hashbangs, switch to using the history API instead and give serious consideration to the question of "If that much content is being replaced, is loading it via Ajax really providing a benefit?"
Your Question does not seem clear to me,
If your page is too large, you could go for pagination using AJAX and PHP, for more
http://www.codediesel.com/php/simple-pagination-in-php/
or http://www.99points.info/2011/01/ajax-pagination-using-jquery-and-php-with-animation/
Other wise, if you still want things to be in URL #tags, then you can go with it.
I doubt you could give something like this "http://foo.bar.com/#pages/home/ "
You could also try URL rewriting http://httpd.apache.org/docs/2.0/misc/rewriteguide.html

Maintain height of the website

I have a client who wants to do a website with specific height for the content part.
The Question:
Is there any way that when the text is long / reach the maximum height of the content part, then a new page is created for the next text.
Within my knowledge, somehow I know this can't be done.
Thanks for helping guys!
You will probably want to look into something like jQuery paging with tabs
http://code.google.com/p/jquery-ui-tabs-paging/
Unfortunately you would need to figure out the maximum number of characters you want to allow in the content pane and anything after that would need to be put into another tab. You can hide the tab and use just a link instead.
Without more knowledge on what you're development is, this is a difficult question to answer. Are you looking to create a different page entirely, or just different sections on a page?
The former can be done using server-side code (e.g. Rails), and dynamically serving out pages (e.g. Google results are split across many page).
The latter can be done with Javascript and/or CSS. A simple example is:
<div id="the_content" style="overflow:hidden;width:200px;height:100px">
Some really long text...
</div>
This would create a "scroll" bar and just not disrupt the flow of the page. In Javascript (e.g. JQuery), you'll be able to split the content into "tabs".
Does this help?
(Almost) everything is possible, but your intuitions are right in that this can't be done easily or in a way that makes any sense.
If I were in your position, I would go up to the client and present advantages and disadvantages to breaking it up. Advantages include the fact that you'd be able to avoid long pages and that with some solutions to this problem, the page will load faster. Disadvantages include the increased effort (i.e., billable hours) it would take to accomplish this, the lack of precedent for it resulting in users being confused, and losses to SEO (you're splitting keywords amongst n pages).
This way, you're not shooting down the client's idea, and in the likely case the client retreats from his position, he will go away thinking that he's just made a smart choice by himself and everyone goes away happy.
If you're intent on splitting it up into pages, you can do it on the backend by either literally structuring your content into pages or applying some rule (e.g., cut a page off at the first whole paragraph after 1000 characters) to paginate the results. On the frontend, you could use hashtags to allow Javascript to paginate the results. You could even write an extensible library that "paginates" any text node. In fact, I wouldn't be surprised if one didn't exist already.

window.location and SEO

I'm trying to use something like jQuery biggerlink or just simple window.location for making bigger and more accessible links. What I'm wondering is what happens with SEO in these cases — I have anchor link in the containing element, but does Google penalize such actions since I'm not really clicking on link. Also, are there any other solutions (besides CSS positioning) which could be better than this one? Thanks.
Setting window.location from script will not be spotted by search engines (Google has detection for simple document.write additions but this won't catch any of the more advanced DOM scripting stuff). It's also bad for usability: all the usual browser controls you get for links, like middle-click-for-new-tab, right-click-copy-location or bookmark stop working.
biggerlink avoids the SEO issue by keeping the correct <a href> markup in the HTML, and adding extra click handling over the top of that. (The ‘bigger’ parts of the biggerlinks still don't respond to eg. middle-click, but the ‘native’ parts do.) As long as you keep <a href> in an appropriate place you don't have to worry about search engines.
I'm not at all sure this stuff is necessary. The effects I've seen biggerlink do could easily be done using links with ‘display: block;’ and occasional workarounds like multiple links when you want to do things like headings inside the links. Sure it's a little more markup, but it's a lot less scripting and then all links respond in the expected way links usually do.
This doesn’t have similarly completion and code syntax to the Meta Refresh tag, although they perform alike wherever the Meta tag refresh and the JavaScript redirect occurs on the customer surface, sense at the web browser point.
<script type="text/javascript"> window.location = "http://www.example.com/path/file.html" </script>
This can be located wherever inside the HTML basis code and is most likely used more than Meta tag Refresh for encoding purpose delays seeing as in JavaScript you can make use of a lot additional other scripting include the window.location function. While this isn’t best for SEO as search engines usually ignore JavaScript code. In the recent years, Google reads javascript and talk about it’s headlell browser technology including GoogleBot crawling.
Search engines generally don’t interpret JavaScript, they just read what your HTML markup says. So your SEO attempts will be overlooked.

Categories