Netzprogrammierer.de

Suchmaschinen-freundliche JavaScript Popups mit JQuery

JavaScript ist toll!

Man kann viele interessante Dinge damit anstellen, aber dennoch gibt es einen entscheidenden Nachteil: Suchmaschinen werten JavaScript Code nicht aus.

Tabs statt Fenster

Alle modernen Browser unterstützen heute „Tabbed Browsing“. Statt wie zu Internetexplorer 6 Zeiten beim Anklicken einer neuen Seite ein neues Fenster zu öffnen, wird ein neues Tab angelegt, in dem die neuen Inhalte erscheinen.

tabbed-browsing

Manchmal ist aber eben dieses Verhalten nicht gewünscht. Beim anklicken eines Links soll sich ein neues Fenster öffnen, sei es um eine Druckansicht zu öffnen, oder eine dynamisch erzeugte PDF-Datei anzuzeigen. Die einzige Möglichkeit, sicher ein neues Fenster zu öffnen, besteht darin ein Fensterobjekt mit JavaScript zu erzeugen und dieses dann anzuzeigen.

Gestaltungstechnisch kann die Größe des neuen Fensters und dessen Position exakt festgelegt werden. Des weiteren kann man Navigations- und Statusleisten ausblenden und so den Inhalt auf Desktopcomputern bedienerfreundlich präsentieren.

Popup Blocker

Da mit JavaScript Fenstern (oder auch Popup-Fenstern) in vergangener Zeit viel Schindluder getrieben wurde, verfügt jeder Browser mittlerweile über einen eingebauten Popup-Blocker. Dieser verhindert das öffnen eines Popups, wenn es im „freien“ Javascript-Code geöffnet wird.

Es gibt jedoch eine Ausnahme: Popups werden nicht blockiert, wenn sie in einem Click-Ereignis aufgerufen werden, da man davon ausgehen kann, das der User das Fenster willentlich öffnet.

<span onClick="javascript:window.open(‚http://www.netzprogrammierer.de‘, ‚Netzprogrammierer-Popup‘, ‚width=200,height=200‘);">Klick mich</span>

Es gibt jedoch auch einen entscheidenen Nachteil. Suchmaschinen folgen dem Javascript Link nicht, oder werten ihn zumindest nicht so stark wie einen HTML Link. Außerdem können Clients mit deaktiviertem JavaScript den Link nicht aufrufen.

Inhalte regulär verlinken

Um trotzdem die verlinkten Inhalte barrierefrei zugänglich zu machen, sei es für Suchmaschinen, oder Clients mit deaktivierten JavaScript, müssen sie zunächst regulär verlinkt werden. Damit der Inhalt in einem neuen Tab geöffnet wird, was eine maximale Annährung an ein Popup ist, wird das target-attribut auf „_blank“ gesetzt:

<a href="toller-inhalt.html" target="_blank">Zum tollen Inhalt</a>

Allerdings sollte der Link nun noch markiert werden um ihn später von regulären Links zu unterscheiden:

<a href="toller-inhalt.html" target="_blank" data-role="popup">Zum tollen Inhalt</a>

Das „data-“ Attribut wird benötigt, um im zweiten Schritt die regulären (und überall funktionierenden Links), in JavaScript Popup Aufrufe umzuwandeln.

Aus regulären Links wird ein Popup Aufruf

Zunächst werden die markierten Links in eine JQuery-Collection geladen und durchlaufen:

$(document).ready(function(){
	$('[data-role=popup]').each(function(){
		
	});
})

Anschließend wird einfach ein onClick Aufruf hinzugefügt, der die im src-Attribut angegebene Seite in einem JavaScript Fenster öffnet. Danach wird das „target“ Attribut entfernt und das „src“ Attribut auf # gesetzt um den HTML Link zu deaktivieren, bzw. zu „entschärfen“.

$(document).ready(function(){
	$('[data-role=popup]').each(function(){
		$(this).attr('onclick', "javascript:window.open('" + $(this).attr('href') + "', 'popup', 'width=500,height=600');");
		$(this).removeAttr('target');
		$(this).attr('href', '#');
	});
})

Das war es auch schon. Suchmaschinen und Clients ohne JavaScript können die normal verlinkten Inhalte ohne Probleme aufrufen. Ist JavaScript aktiviert, werden alle mit data-role markierten Links in Popups umgewandelt.

Das Popupfenster designen

Selbstverständlich können noch weitere Attribute im Link angegeben werden um das Popup-Fenster zu gestalten. Hier ein Beispiel um die Höhe des Popupfensters frei zu definieren:

<a href="toller-inhalt.html" target="_blank" data-role="popup" data-height="1000">Zum tollen Inhalt</a>

Diese müssen dann nur beim austauschen entsprechend gesetzt werden:

$(document).ready(function(){
	$('[data-role=popup]').each(function(){
		attribute = "";
		
		if ($(this).data('height')) {
			attribute += "height=" + $(this).data('height');
		}else {
			attribute += "height=600";
		}
	
		$(this).attr('onclick', "javascript:window.open('" + $(this).attr('href') + "', 'popup', 'width=500," + attribute + "');");
		$(this).removeAttr('target');
		$(this).attr('href', '#');
	});
})

 

Das komplette Beispiel als Download (.zip): SEO Popup