Search code examples
phpjqueryseonavigationbandwidth

SEO Safe Anchor Links With jQuery Dynamic Content

so... Is this a safe way to use internal links on your site.. By doing this i have the index page generating the usual php content section and handing it to the div element.

THE MAIN QUESTION: Will google still index the pages using this method? Common sense tells me it does.. But just double checking and leaving this here as a base example as well if it is. As in.

EXAMPLE ONLY PEOPLE

The Server Side

if (isset($_REQUEST['page'])) {$pageID=$_REQUEST['page'];} else {$pageID="home";}
if (isset($_REQUEST['pageMode']) && $_REQUEST['pageMode']=="js") {
  require "content/".$pageID.".php";
  exit;
} // ELSE - REST OF WEBSITE WILL BE GENERATED USING THE page VARIABLE

The Links

<a class='btnMenu' href='?page=home'>Home Page</a>
<a class='btnMenu' href='?page=about'>About</a>
<a class='btnMenu' href='?page=Services'>Services</a>
<a class='btnMenu' href='?page=contact'>Contact</a>

The Javascript

$(function() {
    $(".btnMenu").click(function(){return doNav(this);});
});

function doNav(objCaller) {
  var sPage = $(objCaller).attr("href").substring(6,255);
  $.get("index.php", { page: sPage, pageMode: 'js'}, function(data) {
    ("#siteContent").html(data).scrollTop(0);
  });
  return false;
}

Forgive me if there are any errors, as just copied and pasted from my script then removed a bunch of junk to simplify it as still prototyping/white boarding the project its in. So yes it does look a little nasty at the moment.

REASONS WHY: The main reason is bandwidth and speed, This will allow other scripts to run and control the site/application a little better and yes it will need to be locked down with some coding. --

FURTHER EXAMPLE-- INSERT PHP AT TOP

<?php 
  // PHP CODE HERE
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
  <div class='siteBody'>
    <div class='siteHeader'>
        <?php
          foreach ($pageList as $key => $value) {
            if ($pageID == $key) {$btnClass="btnMenuSel";} else {$btnClass="btnMenu";}
              echo "<a class='$btnClass' href='?page=".$key."'>".$pageList[$key]."</a>";
          }
        ?>
      </div><div id="siteContent"  style='margin-top:10px;'>
        <?php require "content/".$pageID.".php"; ?>
      </div><div class='siteFooter'>
    </div>
  </div>
</body>
</html>
Solution

  • No, this is not search engine friendly. You're using JavaScript to get content from the server and display it on the page. Although search engines are getting better with handling JavaScript generated content they still can't handle this (unless you follow Google's crawlable Ajax standard but sites have been moving away from that most notably Twitter this past month).

    So this is bad for SEO. Plus you're not saving as much bandwidth as you think. The savings are minimal and with bandwidth being so cheap this is completely unnecessary. In fact, you spent more money making your site inaccessible by taking a normal action (page load) and made it convoluted by using JavaScript to do it then you would have saved in bandwidth costs.

    Yes, this is search engine friendly and a good example of progressive enhancement. Because the links are still crawlable and load the same content as with JavaScript so Google, and any user without JavaScript enabled, can still find the content just fine. Your users with JavaScript will get the added benefit of a faster page load since they don't need to wait for the whole page to load when they click the link.