iframes meerwaarde geven voor zoekrobotten

Iframes, brrrrr het woord alleen al laat me rillen van … hmm ja van wat eigenlijk? Nostalgie? Afschuw? Beperkingen?

We weten ondertussen allemaal dat iframes totally not done zijn in deze tijd van hippe en usability gerichte websites, maar in het prille begin, bij het opkomen van menig websites, waren frames onmogelijk weg te denken. Terecht, want het idee erachter is zeker niet slecht. Een vast menu zonder de pagina te laten herladen is inderdaad een leuke feature, maar ondertussen kan je al een heleboel met updatepanels (ASP.NET) en andere JQuery scriptjes in combinatie met AJAX. Maar daar wou ik het even niet over hebben. Wat als je toch een iframe nodig hebt? Wat dan? Hoe track je die dan? Wat kan je ermee doen en vooral hoe kan een iframe nu toch iets betekenen voor zoekrobots? Hoe kunnen die nu als relevant worden aanzien door zoekrobotten?

Tracking van iframes in Google Analytics

Misschien dit eerste even terzijde, … Gisteren kreeg ik de vraag van iemand of je al dan niet verkeer kan meten in een iframe. Wel, tuurlijk kan dat! Je plaats ook de code in je frame pagina en Google Analytics zal het aantal bezoeken tellen maar… je moet 1 zaak goed onthouden : dit werkt alleen met pagina’s op hetzelfde domein!

Een iframe is steeds een onderdeel van een webpagina, een parent dus. Iedere keer die parent opgevraagd wordt, wordt de iframe ook herladen en dus tel je een bezoekje erbij in Google Analytics. Je kan dit dus perfect tracken. Ook het tracken van clicks en dergelijke met pageTracker zal perfect werken, maar indien de pagina die in de iframe oproept niet op jouw domein staat en dus ook niet jouw GA code bevat, zal je er niet veel mee zijn.

Hola, dat dacht je maar! Google is natuurlijk niet zomaar Google en dus hebben ze er iets op gevonden. Met onderstaande code kan je iframes tracken die een ander domein aanroepen. Zo zou je via de Google Analytics van het domein wat je in je iframe als source opgeeft, de campagne details en waarden in de cookie doorgeven. Die site zou dus kunnen zien van welke parent het bezoek afkomstig is. Dan hoef je enkel nog maar af te spreken met de persoon die de site beheert om de data zo nu en dan eens door te spelen.

Asynchroon tracken van iframes

var iframe = document.getElementById('myIFrame');
iframe.src = "_gaq.push(['_getLinkerUrl', 'http://www.my-example-iframecontent.com/']);"

traditioneel tracken (ga.js) van iframes

var iframe = document.getElementById('myIFrame');
iframe.src = "pageTracker._getLinkerUrl('http://www.my-example-iframecontent.com/');"

Misschien nog enkele belangrijke tips vooraleer je hiermee aan de slag gaat :

1. Alleen een click, een validatie van een formulier (druk op een knop dus) of de _getLinkerUrl code kan informatie doorgeven naar een ander domein
2. Je maakt best een apart profiel aan om alles netjes te kunnen tracken zodat er niets verkeerd loopt met je hoofdprofiel
3. Je moet ook je Google Analytics code aanpassen om meerder domeinen te kunnen tracken :

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-12345-1");
pageTracker._setDomainName("none");
pageTracker._setAllowLinker(true);
pageTracker._trackPageview();
} catch(err) {}
</script>

1. Enkel de paginanaam wordt doorgegeven in de verkeersbronnen en niet het domein, dus dat vang je best op met onderstaande filter. Deze filter detecteert het subdomein en het hoofddomein van jouw domeinnaam. Werkt normaal gezien ook als je een derde partij domeinnaam wil tracken.

iframes meerwaarde geven voor de zoekrobotten

Stel je bent een freelance webdesigner en hebt een mooi ontwerp gemaakt voor een klant. Natuurlijk wil je dan je potentiële klanten iets voorschotelen waar je mee kan uitpakken. Je maakt dus een landingspagina voor je project, geeft die een mooie banner en je laadt vervolgens de website die je ontworpen hebt in een iframe.

Wanneer zoekrobotten deze pagina zullen cache zal er niet veel content aanwezig zijn aangezien de info in die iframe zit. Probleempje dus! Die landingspagina is voor zoekrobots niet relevant en van het ene volgt het andere : je pagina wordt niet meer gecached, na een tijd is die ook niet meer geïndexeerd en na een aantal dagen of weken zie je dat je volledige referentielijst met dergelijke landingspagina’s uit de zoekrobotten zijn gebonjourd.

Er bestaat een manier om je iframe anders te laten uitschrijven. Ik zal je even de simpelste manier tonen :

<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html"
 data="content-die-je-wil-tonen.html" style="width:300px;height:200px;">
 <p>Tekst die je wil meegeven</p>
</object>
<!--[if IE]>
 <style type="text/css">html, body {border:0;overflow:visible;}</style>
<![endif]-->

Laat ik even alles uitleggen. Het object type zal ongetwijfeld de meesten wel een belletje doen rinkelen, het is namelijk het type die je zit als je een flash importeert in een webpagina. Op deze manier kan je dus ook iframes oproepen. Door die een breedte en een hoogte mee te geven kan je dus een iframe tonen met content van een bepaalde pagina. Het voordeel hiervan is dat je in het object type ook nog andere zaken kan toevoegen. Bij een Flash-animatie in de code zal je het embed object nog erbij zien. Dit geeft je dus de mogelijkheid een woordje uitleg te geven over je iframe voor de zoekmachines. Je kan natuurlijk er een image in plaatsen (met alt tag) en een linkje erbij. De zoekmachines cachen en indexeren de content terwijl de user enkel de inhoud van de iframe ziet.

Het streepje code voor IE dient om de scrollbars uit te schakelen. Let wel op, bij IE7 kan er wel nog een border staan maar daar is er ongetwijfeld ook wel een beetje CSS voor die dat kan oplossen.