SEO in combinatie met javascript

Door Jo Immanuel op 01-09-2017 13:06

2.119 views

Beste mensen,

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?

Frank Nietbelangrijk

02-09-2017 13:44 gewijzigd op 02-09-2017 13:54

Ik ben geen SEO expert maar ik denk dat het belangrijk is dat alle URL's ook direct werken.

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>


$( document ).ready(function() {
  $('.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) )

Reageren

Inloggen om te reageren