Google Crawl-Budget und Linkjuice optimieren 

PRG-Pattern

Kontakt aufnehmen

Die interne Linkstruktur effektiv aufräumen: Vor allem in Onlineshops ist es ein bekanntes Problem – durch die Filternavigation entstehen Unmengen von Unterseiten, die für die interne Linkstruktur Gift sind. Eine optimale interne Verlinkung ist aber ein entscheidender Ranking-Faktor, siehe dazu auch den Beitrag Siloing: Bessere Relevanz bei Google und User. Um sicherzustellen, dass der Google Bot irrelevante Links beim Crawlen ignoriert, kommt im SEO die Technik der Linkmaskierung zum Einsatz. 


Grundsätzlich stehen hier verschiedene Methoden zur Auswahl. Die Unterseiten können in der robots.txt gesperrt, mit den Attributen „nofollow” oder „noindex” ausgezeichnet oder mit dem Canonical  Tag versehen werden. Auch eine Maskierung mit JavaScript ist möglich, wobei Google diese Links mittlerweile ausliest. Der Bot crawlt auch weiterhin noindex- und Canonical-Links, der Crawling-Aufwand reduziert sich also nicht. Das Setzen von „nofollow” verhindert die Weitergabe der Linkpower innerhalb der Website. Diese Nachteile hat die Maskierung via PRG-Pattern nicht. 

Die Funktionalität des Post-Redirect-Get-Patterns

Mit dem PRG-Pattern werden Filter-Links als Post-Formular umgesetzt. Wenn der User auf einen Filter-Link klickt, wird eine Post-Anfrage an den Server geschickt. Dieser antwortet aber nicht mit dem Anzeigen der gewünschten Seite, sondern mit einem Redirect auf die Quellseite. Erst jetzt werden dort die angefragten Informationen angezeigt. Die Linkstruktur bleibt sauber, da der Google-Bot dem Post-Formular nicht folgt und keine neue URL erzeugt wird.

Schritt für Schritt sieht die Umsetzung folgendermaßen aus: 

  1. Auf jeder Seite existieren ein verstecktes (display: none bzw. visibility: 0) Formular-Element und ein unsichtbares (hidden) Input-Element. 

  2. Die Übertragungsmethode des Formulars muss auf “post” eingestellt sein. Das Formular wird auf eine vordefinierte URL verschickt, unter welcher ein serverseitiges Script zum Bearbeiten der Requests läuft (siehe Punkt 6). 

  3. Das Input-Feld hat keinen Wert (value=""). 

  4. Maskierte Links werden im HTML als span-Elemente dargestellt und per CSS als Link nachempfunden. In einem Attribut (z. B. data-submit) enthält jedes span-Element die base64-codierte Ziel-URL. 

  5. Ein Klick auf einen maskierten Link wird per Javascript onclick-Events abgefangen. Die base64-codierte Ziel-URL wird aus dem jeweiligen Attribut ausgelesen und als Wert in das input-Feld eingefügt. Das Formular wird dann per Javascript submit-Event abgeschickt. 

  6. Das serverseitige Script empfängt die PRG-Requests, decodiert die base64-codierte Ziel-URL und erzeugt einen 302-Redirect auf die decodierte Ziel-URL. 

  7. Falls der übergebene Parameter leer ist, wird ein 302-Redirect auf die Startseite erzeugt. 

Konkrete Code-Beispiele 

Zur Verdeutlichung des Funktionsprinzips dienen folgende Code-Beispiele. Als serverseitige Programmiersprache wurde PHP verwendet, eine Umschreibung auf Java sollte jedoch mit geringem Aufwand möglich sein.  

  • Formular: 
    1. <form id="redirform" action="/redir.php" method="post"> 
     2.  <input type="hidden" name="redirdata" id="redirdata"> 
     3. </form> 

  • Link-Element: 
    1. <span class="btn redir-link" data-submit="<?=base64_encode('http://www.domain.com/testurl/') ?>"> 
    looks like a link and redirects via PRG</span> 
     

  • Serverseitiges Script PHP (prg.php): 
    1. function prgRedirect() 
    2. { 
    3.   $location = "https://www.domain.com/"; 
    4.   if(!empty($_POST['redirdata'])) 
    5.   { 
    6.      $url = base64_decode($_POST['redirdata']); 
    7.      if(strstr($url, $location) !== false) 
    8.      { 
    9.        $location = $url; 
    10.      }  
    11.      else if(strstr($_SERVER['HTTP_REFERER'], $location) !== false) 
    12.      {  
    13.        $location = $_SERVER['HTTP_REFERER']; 
    14.      } 
    15.    } 
    16.    header("Location: " . $location, true, 302); 
    17.    exit(); 
    18. } 
    19. prgRedirect(); 

  • JavaScript (jQuery voraus): 
    1. $(function() { 
    2.   $('.redir-link[data-submit]').click(function (e) { 
    3.     e.preventDefault();  
    4.     var $this = $(this), 
    5.       $redirectForm = $('#redirform'), 
    6.       $redirectValue = $('#redirdata'), 
    7.       value = $this.data('submit'); 
    8. 
    9.     $redirectValue.val(value); 
    10.    $redirectForm.submit(); 
    11.   }); 
    12. }); 

  • CSS 
    1. #redirform {display:none;} 
    2. .btn {color: blue; cursor: pointer;} 
    3. .btn:hover {text-decoration: underline;}  

HTML auslagern und per AJAX nachladen

Zum Einsatz von PRG-Pattern empfiehlt es sich, das gesamte HTML der Navigation auszulagern und nicht direkt im Quellcode der Seite zu platzieren. Das HTML lässt sich über AJAX nachladen. Dazu wird ein DIV-Element ohne Inhalt im Quellcode platziert, welches mit dem nachgeladenen HTML befüllt wird. Zudem sollte das Skript, welches das HTML zurückliefert (in unserem Beispiel: “/navi.php?menu=filter”), den HTTP-Header “X-Robots-Tag: noindex, nofollow” setzen. 

Beispiel HTML:  

<div id="navi"></div> 


Beispiel jQuery:  

$.get('/navi.php?menu=filter', function(data) 

  $("#navi").html(data); 
}); 
 

MVV
diva-e sorgte für die Anbindung eines Commerce Systems in die SAP-Landschaft und entwickelte ein Self-Service Portal für Kunden.
Schott
diva-e schafft durch die Online Plattform des Glas-Weltmarktführers ein einzigartiges Bestellerlebnis im B2B.
dmTech
diva-e setzt gemeinsam mit dmTech neue Maßstäbe sowohl in der Softwareentwicklung als auch in der digitalen Beratung.
Weleda
diva-e begleitet Weleda seit mehreren Jahren auf dem Weg der digitalen Transformation. Als großer Meilenstein der Digitaloffensive ging im Februar 2024 der Online-Shop in Deutschland live.
Vergölst
diva-e bringt die Kundenansprache bei Vergölst durch optimierte Bestandskundenansprache mit Adobe Campaign ins Rollen.
Talanx
diva-e bildete im Projekt mit der Talanx Gruppe für den Relaunch der Corporate Website sowie das neue Karriereportal die gesamte digitale Wertschöpfungskette ab.
STAUFF
diva-e entwickelt eine skalierbare und zukunftssichere Architektur und integriert diese in die bereits bestehenden Backendsysteme.
Hertha BSC
diva-e entwickelte für Hertha BSC eine neue State-of-the-Art Website mit emotionalem Design.
Klöckner & co
diva-e begleitet Stahlhandelsriesen Klöckner bei der Digitalisierung und realisiert Online Shops mit Marktplatzfunktion.
FC Bayern München
diva-e setzt für den deutschen Rekordmeister und seine Fans neue Maßstäbe mit maßgeschneiderten digitalen Erlebnissen.
EDEKA
diva-e realisiert für den Einzelhandelsriesen eine dynamische E-Food-Plattform und sorgt so für mehr Transaktionen.
MVV
diva-e sorgte für die Anbindung eines Commerce Systems in die SAP-Landschaft und entwickelte ein Self-Service Portal für Kunden.
Schott
diva-e schafft durch die Online Plattform des Glas-Weltmarktführers ein einzigartiges Bestellerlebnis im B2B.
dmTech
diva-e setzt gemeinsam mit dmTech neue Maßstäbe sowohl in der Softwareentwicklung als auch in der digitalen Beratung.
Weleda
diva-e begleitet Weleda seit mehreren Jahren auf dem Weg der digitalen Transformation. Als großer Meilenstein der Digitaloffensive ging im Februar 2024 der Online-Shop in Deutschland live.
Vergölst
diva-e bringt die Kundenansprache bei Vergölst durch optimierte Bestandskundenansprache mit Adobe Campaign ins Rollen.
Talanx
diva-e bildete im Projekt mit der Talanx Gruppe für den Relaunch der Corporate Website sowie das neue Karriereportal die gesamte digitale Wertschöpfungskette ab.
STAUFF
diva-e entwickelt eine skalierbare und zukunftssichere Architektur und integriert diese in die bereits bestehenden Backendsysteme.
Hertha BSC
diva-e entwickelte für Hertha BSC eine neue State-of-the-Art Website mit emotionalem Design.
Klöckner & co
diva-e begleitet Stahlhandelsriesen Klöckner bei der Digitalisierung und realisiert Online Shops mit Marktplatzfunktion.
FC Bayern München
diva-e setzt für den deutschen Rekordmeister und seine Fans neue Maßstäbe mit maßgeschneiderten digitalen Erlebnissen.
EDEKA
diva-e realisiert für den Einzelhandelsriesen eine dynamische E-Food-Plattform und sorgt so für mehr Transaktionen.
weleda logo
Logo von Talanx
weleda logo
Logo von Talanx

We

our partners