Best route for SEO

Drongo_III · June 11, 2012

Hi Guys

I'm in the planning phase of a website for a client. They sell cars - but only up to around a dozen at any one time.

I had planned to simply list all the cars on a listings page and then use a jquery overlay to display more information about a car when the user clicks on a listing (it was going to be quite snazzy ).

But as the client's market is so competative, and they need every SEO edge they can get, so do you think it would be bettter to display the car details on a page instead?

This way they'll get the seo benefit of regularly refreshed content, as the listings change, and there might be the potential to drop key words and phrases into the car descriptions - which would now be spiderable.

Keeping in mind that a car listing is likely to be present anywhere between a few days to a few weeks, do you think it would be a better option to list the cars on a page?

Andy-H · June 11, 2012

You should use progressive enhancement, this is just a 'jargon'd up' way of saying your site should function properly with javascript disabled, then you can switch things out with javascript after the content is loaded; in your example I would go for something like this:

<html>
   <head>
      <script type="text/javascript" src="jquery.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $('.car_page_link').click(function(e) {
               //prevent href from loading
               e.preventDefault();
               mylightboxlib.loadIFrame($(this).attr('href'));
            });
         });
      </script>
   </head>
   <body>
      <a href="car1.php" class="car_page_link"><img src="McLarenF1.jpg"  alt="McLaren F1" title="McLaren F1" ></a>
      <a href="car2.php" class="car_page_link"><img src="Ferrari F50.jpg"  alt="Ferrari F50" title="Ferrari F50" ></a>
      <a href="car3.php" class="car_page_link"><img src="Bugatti Veyron"  alt="Bugatti Veyron" title="Bugatti Veyron" ></a>
   </body>
</html>

Drongo_III · June 11, 2012

Hi Mate

That's very clever indeed

So the idea there is that search engines will see the link and therefore visit the car page, as would users without js, and then user's with js could view the pop up?

Genius that!

You should use progressive enhancement, this is just a 'jargon'd up' way of saying your site should function properly with javascript disabled, then you can switch things out with javascript after the content is loaded; in your example I would go for something like this:

<html>
   <head>
      <script type="text/javascript" src="jquery.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $('.car_page_link').click(function(e) {
               //prevent href from loading
               e.preventDefault();
               mylightboxlib.loadIFrame($(this).attr('href'));
            });
         });
      </script>
   </head>
   <body>
      <a href="car1.php" class="car_page_link"><img src="McLarenF1.jpg"  alt="McLaren F1" title="McLaren F1" ></a>
      <a href="car2.php" class="car_page_link"><img src="Ferrari F50.jpg"  alt="Ferrari F50" title="Ferrari F50" ></a>
      <a href="car3.php" class="car_page_link"><img src="Bugatti Veyron"  alt="Bugatti Veyron" title="Bugatti Veyron" ></a>
   </body>
</html>

The Little Guy · June 11, 2012

don't use ajax to get main content, use it for processing little pieces of information or retrieving un-important information many robots can't handle ajax. Using to go from page to page will decrease your SEO due to the lack of information about the new page. Take this page for example: http://phpsnips.com/snip-29 it hides shows/hides information using javascript without using ajax the information is all there so the Google bot or other bot can still read information about the page but visually you don't see everything unless you switch tabs.

As Andy said, make it so the site functions well if the user doesn't have javascript turned on, an example would look like so (jquery):

<script>
$(document).ready(function(){
$("#myElement").click(function(){
	// Do some cool stuff!
	// returns false so we don't follow the html link
	return false;
});
});
</script>
<!-- HTML CODE IS HERE -->
<a href="more_info.php?id=123">Link to another page</a>

if the user has javascript enabled the link will not go anywhere, and the jquery will run. If javascript is disabled the link will go to where the href says and the jquery will not run.

Philip · June 11, 2012

don't use ajax to get main content, use it for processing little pieces of information or retrieving un-important information many robots can't handle ajax. Using to go from page to page will decrease your SEO due to the lack of information about the new page.

I disagree. With Andy-H's method - a fallback method is given and search engines can follow those links. Thus, no decrease in SEO would happen.

The Little Guy · June 11, 2012

don't use ajax to get main content, use it for processing little pieces of information or retrieving un-important information many robots can't handle ajax. Using to go from page to page will decrease your SEO due to the lack of information about the new page.

I disagree. With Andy-H's method - a fallback method is given and search engines can follow those links. Thus, no decrease in SEO would happen.

That was meant for if you didn't have a fallback. Sorry.

Drongo_III · June 12, 2012

I wasn't actually intending to use ajax because there are so few cars this seemed like a lot of unnecessary contact with the server.

Because there are only a dozen cars the idea was to build a javascript array of the cars (via php) when the page loads. Then when the user clicks on a car listing the popup would be populated with the relevant car information from the javascript array. Perhaps that's a bad way of doing it? The idea was to keep the user on the listings page so they can easily bounce between cars without having to go back and forth.

But after considering the above perhaps I'll still run with this method but adapt it so that when the car listings are first created (via the admin area) I'll also generate a page for each car. Then when i generate the list of cars i'll make sure it generates a link to those car pages but that will be suppressed.

Based on what i understand from above if do that google will still be able to follow the car links to each individual page but users will get the overlay instead of being directed to a separate page. This seems like a win win?

The Little Guy · June 12, 2012

Instead of using php to populate an array, why don't you just place it into hidden HTML Div's then when you want to show one show hide all the divs then show the one you want by toggling css's "display" property.

Drongo_III · June 12, 2012

It just feels 'cleaner' to put it in an array and have a single div that gets populated...but i see what yer saying. Didn't think google indexed hidden content anyway so not sure it makes much difference.

Instead of using php to populate an array, why don't you just place it into hidden HTML Div's then when you want to show one show hide all the divs then show the one you want by toggling css's "display" property.

Andy-H · June 12, 2012

Yep, Google's algorithm is far too advanced to get away with that.

You could create a script that outputs JSON, then use it in PHP and jQuery:

<?php
// SuccessException.class.php
class SuccessException extends Exception {
   protected $_data;
   public function __construct($message, array $data, $code = 0, Exception $previous = NULL )
   {
	  $this->_data = $data;
   }
   public function getData()
   {
	  return $this->_data;
   }
}
?>

<?php
// get_vehicle.php
include 'SuccessException.class.php';
try
{
	if ( !isset($_GET['vehicle_ID']) )
		throw new Exception('No vehicle ID supplied');
	// include 'database.const.php';
	$dbh = new PDO('mysql:dbname='. DB .';host='. DB_HOST, DB_USER, DB_PASS);
	$dbh->setAttribute(PDO::MYSQL_ATTR_INIT_COMMAND, "SET NAMES 'UTF8'");
	$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);

	$stmt = $dbh->prepare('SELECT make, model, registration, description, price
					FROM vehicles
					WHERE vehicle_ID = ? LIMIT 1');
	$stmt->bindParam(1, $_GET['vehicle_ID'], PDO::PARAM_INT);
	if ( $stmt->execute() === false )
		throw new Exception('An unknown error has occured');


	$row = $stmt->fetch(PDO::FETCH_ASSOC);
	if ( !count($row) )
		throw new Exception('No vehicle with that ID');
	throw new SuccessException('', $row);
}
catch ( SuccessException $e )
{
	$data = array('RESP' => 'OK', 'DATA' => $e->getData());
}
catch ( Exception $e )
{
	$data = array('RESP' => 'ERROR', 'MSG' => $e->getMessage());
}
if ( isset($_GET['js']) )
{
	echo json_encode($data);
}
else
{
	return $data;
}
?>

<?php
// view_vehicle.php
$data = include 'get_vehicle.php';
if ( strcmp($data['RESP'], 'OK') !== 0 )
{
	echo $data['MSG'];
	exit;
}
$data = $data['DATA'];
echo 'Make: 	    '. htmlentities($data['make'], ENT_QUOTES, 'UTF-8')         . '<br >';
echo 'Model: 		'. htmlentities($data['model'], ENT_QUOTES, 'UTF-8')        . '<br >';
echo 'Registration: '. htmlentities($data['registration'], ENT_QUOTES, 'UTF-8') . '<br >';
echo 'Price: £'. number_format($data['price'], 2)                         . '<br >';
echo '<p>'. htmlentities($data['description'], ENT_QUOTES, 'UTF-8') .'</p>';
?>

<html>
<head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript">
	<!--
		$(document).ready(function() {
			$('body').append('<div style="display: hidden; position: absolute;" class="vehicle_div"><>');
			$('.car_page_link').click(function(e) {
				e.preventDefault();
				$.getJSON($(this).attr('href') + '&js=true', function(response) {
					if ( response.RESP.toLowerCase() != 'ok' )
					{
						alert(response.MSG);
						return false;
					}
					$('.vehicle_div').html(
						'MAKE: '         + response.DATA.make         + '<br >'+
						'MODEL: '        + response.DATA.model        + '<br >'+
						'REGISTRATION: ' + response.DATA.registration + '<br >'+
						'PRICE: £' + response.DATA.price        + '<br >'+
						'<p>'            + response.DATA.description  + '</p>'
					).fadeIn('fast', function() {
						$('body').click(function() {
							$('.vehicle_div').fadeOut();
						});
					});

				});
			});
		});
	//-->
	</script>
</head>
<body>
	<a href="view_vehicle.php?vehicle_ID=1" class="car_page_link"><img src="McLarenF1.jpg"  alt="McLaren F1" title="McLaren F1" ></a>
	<a href="view_vehicle.php?vehicle_ID=2" class="car_page_link"><img src="Ferrari F50.jpg"  alt="Ferrari F50" title="Ferrari F50" ></a>
	<a href="view_vehicle.php?vehicle_ID=3" class="car_page_link"><img src="Bugatti Veyron"  alt="Bugatti Veyron" title="Bugatti Veyron" ></a>
</body>
</html>

Personally, I don't see the problem with light-boxes?

Sign In

Best route for SEO

Recommended Posts

Drongo_III

Link to comment

Share on other sites

Andy-H

Link to comment

Share on other sites

Drongo_III

Link to comment

Share on other sites

The Little Guy

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

The Little Guy

Link to comment

Share on other sites

Drongo_III

Link to comment

Share on other sites

The Little Guy

Link to comment

Share on other sites

Drongo_III

Link to comment

Share on other sites

Andy-H

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information