I would like to know at which stage is it okay to start manipulating HTML elements/content using Javascript so as not to impair SEO?
I have read somewhere that HTML content that is hidden using the CSS property display:none is often penalized by Google crawlers, with good reason from what I'm led to believe...I ask this as I intend to have some div panels that are initially hidden, but shown once the user clicks on an appropriate link. My intention is therefore not to hide content from users entirely - just intially to give them a better user experience - I'm afraid Google may not see it that way!
My reason for doing this is to prevent the split second (or in some cases, a full 2 seconds) of ghastly unstyled html elements (positioning), before my Javascript comes in to position, hide and neaten everything up. So adding the display:none at the forefront, and then using Javascript to toggle visibility would have been ideal, but is apparently a no-no with Google Search Engine bot.
Do you experts have any advice? Thank you!
google can now crawl AJAX sites using a simple URL substitution trick; you might be able to take advantage of this to let googlebot see a plain html version of the page for indexing instead of your load-optimized page; see http://code.google.com/web/ajaxcrawling/docs/getting-started.html
If the content in question exists on the page in the html, and is accessible to the user by the time the page finishes loading initially, then you are okay. You want to make sure google can lead a user to your page and see the content in question without requiring further interaction. Adding new content to the html after the initial load (i.e. content from the server), can be problematic for SEO. However if all content is in the html by the end of the page load, then you shouldn't get docked. Keep in mind, good SEO strategy dictates using standard methods of usability so the web crawler can access your content.
Also, each page should follow a content theme. Example: Don't abuse users by hiding five different unrelated blocks of content "medical devices, kazoos, best diners, motorcycles, toxic waste" on one page. Theoretically you could take all of your site's content and lay it out on one page using javascript and 'display:none' waiting for an 'onClick', but that smells like spam.
EDIT, additional info as pertaining to the original question:
The search engine friendly way to display content dynamically is to load it, then hide it from the user.
Related
I'm having a tough nut to crack here.
I have the following situation:
- in an iFrame (no way around it) I'm loading an external website/application.
- This iFrame is on one page and one page only.
- Whenever you visit the iFrame page the first time a certain load time is needed for the applicaton (about 5seconds on average).
- In the application you can change the view and parameters etc.
- When you leave that page and go to another, and return later on to the iFrame page the requirement is that there is no load, and the content of the iFrame is as you have left it earlier.
I know this can be done by using frames (which are so 90's) but I really don't want to do that. There has to be a more modern way of doing it.
Just to note, the website around the iFrame is using Sitecore, so this might be a limiting factor in some solutions.
The things I have thought of:
- use 2 frames, one for the header with navigation, and another for the content. In that way the iframe never has to reload and we have moved back in time... :(
- ever click is an Ajax call, the iFrame is in a div that is hidden until the right button is clicked.
And then I found something called BigPipe. I haven't found an ASP.NET implementation yet, but I was hoping someone already had some experience with this.
Anyone any better ideas?
Thx
If your iFrame is a control on a Sitecore sublayout or rendering (or can be moved to a rendering/sublyaout), you can check off the Cacheable option on the sublayout and set it to vary by content or device or whatever depending on what it is. Then you will have the content of that frame in Sitecore's cache, which is managed by Sitecore and it'll always render the cached version whenever possible and should basically solve your dilemma.
I have written a longer text on this subject posted earlier today. Perhaps the text was too long, so I rephrase it very briefly here:
I want to design a very standard site where the user gets the opportunity to navigate to different aspx pages with the aid of navigation menus (left, top). I do not want the entire page to be reloaded when changing the content page for three reasons: state handling, flickering and bandwidth conservation. I just want to load a new aspx page into a "main content area" with the rest of the site untouched.
What is the best way to achieve this? I must not rely on master pages or not master pages or AJAX or not AJAX. It must not rely on anything specific. I just wonder what the standard method would be to achieve this. It must be a pretty common wish.
Thanks
/DT
You can use iframe for this.
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
<iframe src="http://www.w3schools.com"></iframe>
We're building a site for an academic institution. This institution offers many subjects, and we don't want to show all of them at once on the homepage. So we designed a homepage that shows the 2 main categories of studies, and clicking on a category will show a div with the list of subjects in that category.
Our client is worried SEO-wise about those div's being hidden on page-load. Is he correct in his concern?
It depends on how you hide them if you use a z-order or a far left off screen position they will still be read by the Google bot. if you use display none or hidden then it may have an effect on your SEO.
You're right to have concern. Google will count some of or significantly reduce content that isn't displayed on page load. I would recommend letting the text display at load, then setting it to display none via JavaScript. This way the search engine picks it up.
You can do so with a simple jQuery hide snippet like this:
<p class="remove">Text displayed on load.</p>
$j(document).ready(function(){
$('.remove').hide();
});
I read an article by Roger Johansson on this subject, and it seems that the conclusion is that as long as the intent isn't to show that content only to search engines, hiding is fine. I don't see any mention of preferring one method of hiding over the other.
In addition, in that post's comments there was a link to an answer by a Google worker that said:
Merely using display:none will not automatically trigger a penalty. The key is whether or not there is a mechanism - either automatic or one that is invoked by the user - to make the content visible
In my case of course there will be such a mechanism, because we want our users to see that content, just not at page-load...
Not sure if this is a really obvious question or not, but I need to have an embedded music player continue playing while the user views the rest of the website (clicking links to view different pages, etc.). So basically splitting the page into different segments, that load seperately. Years ago I would have done this with the HTML frames but that's obviously not such a hot idea anymore.
Hopefully this makes sense, and thanks in advances for all responses.
Let's resolve the ambiguity in our use of the word 'frame'. While it is true that the <frame> tag will be discontinued in future versions of HTML, the <iframe> tag will continue to be supported, and it makes for an ideal solution to your problem. Your whole website will consist of two major elements in the body:
The music player, and
A nice big <iframe> to hold the navigable portion of your website.
This will allow the music player to play continuously while all the navigation occurs in a separate frame, effectively keeping the music player 'static', and the rest of the page dynamic. Best of all, once browsers begin to support HTML 5, you will be able to use the new seamless attribute to help integrate the frame into the look of your page. Until then, you will need to manually remove the border and scrollbars, to stay consistent across all browsers. You can achieve this with the following:
<iframe src="navigable_page.html"
frameborder="0"
scrolling="no"
marginwidth="0"
marginheight="0"
vspace="0"
hspace="0">
</iframe>
Remember to set the height using CSS. With this approach, you also have a lot of flexibility in your layout, and you don't have to redesign anything if you don't want to. Options include having the frame take up the whole webpage, with the music player in front of everything else, draggable, resizable, etc. Web designers would wonder how you created a music player that is independent of the rest of the changing content. You could also have a table that occupies the whole page, with two rows. The top row could have the music player, and the bottom row could contain the frame with height set to 100%. Use frames, as in iframes, and you won't be disappointed.
You'll have to use javascript to load each section upon user request if you don't want to use a frame. Use something like the jQuery library to make it easy on yourself, you can set it up so that all requests update certain containing DIVs based upon what was clicked.
The "hot" idea of today is to make everything become AJAX. All the navigation and stuff. It's technically thought of a bad thing but is used for the usage you describe in some big sites, namely Facebook (for chat, very similar to your case) and Twitter (for header and updates).
You'd give each page a URL like mysite.com/#some-folder/some-page/someQueryKey/someValue
Note that it is "#/" because all the pages will be only ajax calls in the same page.
Since it is the same page, you can leave the part you want unchanged when doing your AJAX transfers
For technical details on how to implement this, search for stuff about implementing hash bang AJAX (that's what it's called as the official format Google can index is called so, and the URLs usually an exclamation mark after hash sign "#!/".
It's not the easiest to implement though, and means re-design of the whole site, so, you may want to consider other options:
Pop-ups: They are not 100% dead yet, and "may" be suitable for your situation.
Reloading: Maybe just store in some cookie every short time (using JS) the data you want and check for it on page load to resume from where you ended, the user will get slight stop in between though. hence, It may not be for music player.
For the UI of the widget itself, if you need it to be in a certain place in the page regardless of the scroll or whatever (always visible) you can use CSS positioning:
.music-player
{
position:fixed;
bottom:5px;
right:5px;
}
I'm about to build a web application(not web presentation) which will load its content through AJAX (jQuery) into a specific div. There will be a menu above the div and when a user clicks on an item from the menu, the appropriate page will be loaded into the main div.
I'd like to know if there are any cons and pros of choosing this pattern for a web application.
So far I'm avare that the browser back button and history/url will be gone.
Two possible downsides are that it could make it difficult for users to bookmark content on your site and difficult for search engines to differentiate pages on your site.
You should probably provide more information on your reasons for taking this approach. You might have good reasons or it might be a case of using a technology (AJAX) because it is cool to use.
If you want to give the users the impression of fast responsiveness, then yes AJAX load your pages, but still have a different url for each page. This will take more code but it will solve both issues that I mentioned.
http://yourdomain.com/home.aspx //loads its own content via AJAX
http://yourdomain.com/contact.aspx //loads its own content via AJAX
etc
This is really only appropriate if you have a lot of content, or where the content involves time-consuming calculations, such as on a financial site. In most cases, it would be less trouble to just load your pages normally or break you content into paged chunks.
The main con of this approach this will make your site very difficult for search engines to crawl. They don't read Javascript, so your content won't get seen or indexed by them. Try to do progressive enhancement so that they (and any users who don't use Javascript, e.g. screen-readers) don't get left behind.
On the other hand, you can keep browser history functionality. This can be done using the URL hash, e.g. http://www.example.com/#home vs http://www.example.com/#about-us. The nicest way to do this is to get Ben Alman's hashchange plugin and then use the hashchange event:
$(window).hashchange(function(){
var location = window.location.hash;
//do your processing here based on the contents of location
});
This will allow your users to use the history function and the bookmarking function of their browsers. See the documentation on his site for more information.