Optimize Google Crawl Budget and Linkjuice with

PRG Patterns

Contact us!

Effectively tidy up the internal link structure: It's a well-known problem, especially in online stores - filter navigation creates vast numbers of subpages that are poison for the internal link structure. However, optimal internal linking is a crucial ranking factor, see also the article Siloing: Better Relevance with Google and Users. To ensure that the Google bot ignores irrelevant links during crawling, the technique of link masking is used in SEO.

Basically, there are various methods to choose from here. The subpages can be blocked in robots.txt, marked with the attributes "nofollow" or "noindex" or provided with the Canonical Tag. Masking with JavaScript is also possible, although Google now reads these links. The bot still crawls noindex and canonical links, so the crawling effort is not reduced. Setting "nofollow" prevents the passing on of link power within the website. Masking via PRG pattern does not have these disadvantages.

The functionality of the Post-Redirect Get pattern

With the PRG pattern, filter links are implemented as a post form. When the user clicks on a filter link, a post request is sent to the server. However, the server does not respond by displaying the requested page, but with a redirect to the source page. Only now the requested information is displayed there. The link structure remains clean because the Google bot does not follow the post form and no new URL is generated.

Step by step, the implementation looks like this: 

  1. On each page there is a hidden (display: none or visibility: 0) form element and an invisible (hidden) input element. 

  2. The submission method of the form must be set to "post". The form is sent to a predefined URL, under which a server-side script for processing the requests runs (see point 6). 

  3. The input field has no value (value=""). 

  4. Masked links are displayed in HTML as span elements and mimicked as links by CSS. In an attribute (e.g. data-submit), each span element contains the base64-encoded target URL. 

  5. A click on a masked link is caught by Javascript onclick events. The base64-encoded target URL is read from the respective attribute and inserted as value into the input field. The form is then submitted via Javascript submit event. 

  6. The server-side script receives the PRG requests, decodes the base64-encoded target URL and generates a 302 redirect to the decoded target URL.

  7. If the passed parameter is empty, a 302 redirect to the home page is generated.

Concrete code examples

The following code examples serve to illustrate the functional principle. PHP was used as the server-side programming language, but a rewrite to Java should be possible with little effort.

  • Form: 
    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> 
     

  • Server 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 ahead): 
    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;}  

Offload HTML and reload via AJAX

To use PRG patterns, it is recommended to outsource the entire HTML of the navigation and not place it directly in the source code of the page. The HTML can be reloaded via AJAX. For this purpose, a DIV element without content is placed in the source code, which is filled with the reloaded HTML. In addition, the script that returns the HTML (in our example: "/navi.php?menu=filter") should set the HTTP header "X-Robots-Tag: noindex, nofollow".

  • Beispiel HTML:  

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

  • Beispiel jQuery:  

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

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

    });

MVV
diva-e took care of the integration of a commerce system into the SAP landscape and developed a self-service portal for customers.
Schott
diva-e creates a unique B2B ordering experience through the online platform of the global glass market leader.
dmTech
diva-e and dm set new standards in software development and digital consulting.
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 gets Vergölst's customer approach rolling by optimizing existing customer contact with Adobe Campaign.
Talanx
diva-e mapped the entire digital value chain in the project with the Talanx Group for the relaunch of the corporate website and the new career portal.
STAUFF
diva-e develops a scalable and future-proof architecture and integrates it into the already existing backend systems.
Hertha BSC
diva-e developed a new state-of-the-art website with emotional design for Hertha BSC.
Klöckner & co
diva-e guides steel giant Klöckner through digitalisation and realises online shops with marketplace function.
FC Bayern Munich
Digital Champions League: The German championship record holder wows fans worldwide with tailor-made digital experiences.
EDEKA
Online marketplace for groceries: We are creating an adaptable platform for the retail giant EDEKA Nord
MVV
diva-e took care of the integration of a commerce system into the SAP landscape and developed a self-service portal for customers.
Schott
diva-e creates a unique B2B ordering experience through the online platform of the global glass market leader.
dmTech
diva-e and dm set new standards in software development and digital consulting.
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 gets Vergölst's customer approach rolling by optimizing existing customer contact with Adobe Campaign.
Talanx
diva-e mapped the entire digital value chain in the project with the Talanx Group for the relaunch of the corporate website and the new career portal.
STAUFF
diva-e develops a scalable and future-proof architecture and integrates it into the already existing backend systems.
Hertha BSC
diva-e developed a new state-of-the-art website with emotional design for Hertha BSC.
Klöckner & co
diva-e guides steel giant Klöckner through digitalisation and realises online shops with marketplace function.
FC Bayern Munich
Digital Champions League: The German championship record holder wows fans worldwide with tailor-made digital experiences.
EDEKA
Online marketplace for groceries: We are creating an adaptable platform for the retail giant EDEKA Nord
weleda logo
Logo von Talanx
weleda logo
Logo von Talanx

We

our partners