JQuery en SEO vriendelijk?
Ik vraag me af hoe je het beste een dynamische website met Jquery SEO vriendelijk kan maken? Ik gebruik Jquery om bepaalde content in een DIV te laden en Google indexeert geen javascript...
Ik heb al wat info op Google proberen te zoeken, echter niet echt een oplossing hiervoor gevonden.
Voorbeeld van hoe ik dynamic content aanroep in de DIV #content:
HTML link die wordt opgevangen door javascript:
Code (php)
1
<a href="#disclaimer">Disclaimer</a>
Javascript; ik maak gebruik van hashchange, zodat browser history nog werkt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(function(){
$(window).hashchange( function(){
var hash = location.hash;
var loadurl = ( hash.replace( /^#/, '' ) || 'blank' );
if(loadurl == 'blank'){
window.location="http://www.abc.nl/";
}
else{
$('#content').load(loadurl);
}
});
});
$(window).hashchange( function(){
var hash = location.hash;
var loadurl = ( hash.replace( /^#/, '' ) || 'blank' );
if(loadurl == 'blank'){
window.location="http://www.abc.nl/";
}
else{
$('#content').load(loadurl);
}
});
});
https://developers.google.com/webmasters/ajax-crawling/
Een search bot gebruikt geen javascript, dus ik moet bepalen of er een searchbot op mijn pagina komt, of een bezoeker. Dit doe ik door eerst in javascript een cookie aan te maken, indien deze is aangemaakt is het dus een bezoeker gezien javascript actief is. In dit geval roep ik alle pagina's aan via Jquery.
Indien er geen cookie bestaat include ik de data.php handmatig in de content div, zodat de betreffende pagina alsnog wordt aangeroepen... langleve '_escaped_fragment_'
In de META plaats ik nu
Code (php)
1
<meta name="fragment" content="!" />
Javascript code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var name = 'jscheck';
var value = 'true';
var days = '7';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
var escapedHash;
function findHash() {
if(window.location.hash) {
escapedHash = window.location.hash.replace("#!", "");
$.get("../data.php?_escaped_fragment_=" + escapedHash, function(data) {
$("#content").html(data);
});
}
else{
$.get("../data.php", function(data) {
$("#content").html(data);
});
}
}
$(document).ready(function() {
findHash();
});
$(window).bind('hashchange', function() {
findHash();
});
var value = 'true';
var days = '7';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
var escapedHash;
function findHash() {
if(window.location.hash) {
escapedHash = window.location.hash.replace("#!", "");
$.get("../data.php?_escaped_fragment_=" + escapedHash, function(data) {
$("#content").html(data);
});
}
else{
$.get("../data.php", function(data) {
$("#content").html(data);
});
}
}
$(document).ready(function() {
findHash();
});
$(window).bind('hashchange', function() {
findHash();
});
Mijn URLS voor dynamische content roep ik nu zo aan:
Code (php)
1
2
3
2
3
<a href="#!disclaimer">Disclaimer</a>
<a href="#!privacy">Privacy</a>
<a href="#!sitemap">Sitemap</a>
<a href="#!privacy">Privacy</a>
<a href="#!sitemap">Sitemap</a>
HTML code DIV 'content':
Code (php)
Data.php:
Code (php)
Dit lijkt me een juiste manier toch? of moet het anders?
Ik krijg altijd de neiging om javascript niet te gebruiken voor navigatie. Maar wel voor bijvoorbeeld een effect of iets minder belangrijks.
Waarom gebruik je eigenlijk javascript, in plaats van dat je gewoon GET variabele gebruikt en de pagina met PHP laadt?
Als je als gebruiker javascript hebt uitstaan weet je zelf ook wel dat een site niet of minder goed werkt.
@marvin
Als het werkt zou ik het gewoon zo laten, alleen zou je kunnen overwegen om de content via ajax te laden.