PRG Patterns

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.

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.

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;}  

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); 

  });