SEO in combinatie met javascript
Ik heb de volgende vraag:
Ik maak een sportwebsite waarbij ik allemaal sjabloonpaginas heb. Bijvoorbeeld de spelerspagina. Deze spelerpagina heeft verschillende tabs: speler-overzicht, speler-wedstrijden, enz.
In de URL zit een spelerID-variabele en een menu-variabele om te bepalen welke spelerspagina en welke tab van deze spelerspagina getoond moet worden ( als volgt: ?spelerID=1&menu=wedstrijden ).
Zodra er geen menu-variabele is meegegeven wordt altijd de overzichts-tab getoond.
De content van de tab wordt steeds opgehaald via een jquery ajax-POST-request (ook die van tab overzicht).
Ik heb ergens gelezen van SEO (de indexering voor zoekmachines als google) moeite heeft met een dergelijke aanpak van content ophalen via jquery/javascript. Is dit (nog steeds) zo?
Stel je hebt twee tabs, dan moet je die direct voor je neus krijgen met ieder hun eigen url:
http://mysite.com/index.html?tab=tab1 --> inhoud tab1
http://mysite.com/index.html?tab=tab2 --> inhoud tab2
Daarnaast lijkt het mij dan ook handig als je diezelfde methode aanhoudt voor de snelkoppelingen op de pagina die je toont. Of je dan vervolgens een AJAX request wilt doen of niet maakt dan niet uit want dat is beiden mogelijk.
<a href="http://mysite.com/index.html?tab=tab1">Tab 1</a>
<a href="http://mysite.com/index.html?tab=tab2">Tab 2</a>
Ik ga er even vanuit dat je Jquery gebruikt. Je kunt dan de klik op de snelkoppeling afvangen. Hiervoor gebruik je het makkelijkste een CLASS attribuut in je snelkoppelingen en eventueel een data-content (of iets dergelijks) attribuut:
<a class="ajaxtab" data-content="1" href="http://mysite.com/index.html?tab=tab1">Tab 1</a>
<a class="ajaxtab" data-content="2" href="http://mysite.com/index.html?tab=tab2">Tab 2</a>
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$( document ).ready(function() {
$('.ajaxtab').click(function(e) {
e.preventDefault();
console.log('you wish to see ' + $(this).attr('data-content'));
// AJAX HIER
return false;
});
});
$('.ajaxtab').click(function(e) {
e.preventDefault();
console.log('you wish to see ' + $(this).attr('data-content'));
// AJAX HIER
return false;
});
});
demo: https://codepen.io/anon/pen/KvJJLa (Open de console om de meldingen te zien (F12) )
Gewijzigd op 02/09/2017 13:54:15 door Frank Nietbelangrijk