Manchmal soll ein Teil einer Webseite erst nach einem Klick sichtbar sein, zum Beispiel wenn im Shop das Impressum aufklappt oder eine Artikelbeschreibung. Mit JavaScript kein Problem, mittels Hash (diese Anker-Adressen mit #) lassen sich sogar Deep-Links bilden, aber die Suchmaschinen finden die Zusatzinformationen nicht. Seit kurzem gibt es die Lösung namens Hashbang. Darauf geht Google in einem Artikel genauer ein. Facebook hat es schon lange.
Klick eines der Tiere an. Nicht nur der Text daneben ändert sich, sondern auch die URL. Google bietet zwar einen Weg, auch diese Inhalte zu indizieren, aber dafür muss beim Crawlen das Programm zur Erstellung des Inhaltes ausgeführt werden. Nach eigener Untersuchung führt Google nicht mal die einfachsten JavaScript-Schnipsel aus. Das heißt, die Inhalte für den Crawler müssen serverseitig bereitgestellt werden. Entweder wird die Logik des Hund-Katze-Programmes komplett in PHP nachprogrammiert, oder ein serverseitiger Textbrowser führt das JavaScript aus und gibt dem Crawler seine Seite.
Lösung
Ein Mittelweg ist, dass das PHP-Script auf dem Server nur die wichtigsten Inhalte der Seiten findet und an den Crawler gibt, weitere Feinheiten allerdings nur beim Client mit JavaScript ausgeführt werden. In meinem Ansatz liegt jede Seite in einem eigenen Verzeichnis und heißt index.html. Sie enthält die wichtigen Inhalte, Links zu anderen Seiten im Stil “#!Katze” und beliebiges JavaScript für Effekte:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Hashbang by netAction</title>
<script type='text/javascript' src='jquery-1.5.min.js'></script>
</head>
<body>
<h1>Hashbang Testseite</h1>
<!-- Navigation -->
<p><a href=".">Home</a>
<a href="#!Hund">Hund</a>
<a href="#!Katze">Katze</a></p>
<?
$fragment = $_GET["_escaped_fragment_"];
if($fragment) { // User is a Crawler
echo "Dear Crawler! Please index this page. Thanks.";
$fragment = str_replace('/','',$fragment); // filter directories
@readfile($fragment."/index.html");
} else {
?>
<div id="content">klick was an!</div>
<script type="text/javascript">
var hash = false;
function checkHash(){
if(window.location.hash != hash) {
hash = window.location.hash;
if (hash) $("#content").load(hash.substr(2)+"/index.html");
}
setTimeout("checkHash()",200);
}
$(function() {
checkHash();
});
</script>
<?
}
?>
<p>CC-BY-SA netAction.de 2011</p>
</body>
</html>
Nach wenigen Stunden kam Google und fand die Seite “Tiger”, die nur über einen Hashbang verlinkt ist, der wiederum nur auf einer Seite steht, die auch einen Hashbang hat:
GET /hashbang/?_escaped_fragment_=Hund GET /hashbang/?_escaped_fragment_=Katze GET /hashbang/?_escaped_fragment_=Tiger
Der Inhalt der Tigerseite wird nun von Google gefunden. Und zwar zweimal. Erstens in der reingeladenen HTML-Datei. Das beweist, dass Google auch kompliziertes JavaScript interpretiert, um an URLs zu kommen. Und zweitens auf der Seite mit dem Hashbang! So sollte es sein. Den ersten Treffer könnte man mit der robots.txt noch rauswerfen.
Der bisherige Erfolg ist also eine Webseite, bei der sich beliebige Inhalte beliebig ineinander verwandeln lassen. Es gibt nicht mehr die statische Seite, die sich nach jedem Klick komplett neu aufbaut. Trotzdem sind Deep Links möglich und sogar eine Indizierung durch Suchmaschinen. Der zugrundeliegende Quellcode ist extrem schlicht und lässt sich gut mit eigenen Ideen erweitern.