Jump to content

Best route for SEO


Drongo_III

Recommended Posts

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?

 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

 

 

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.