1

I'm going to use the fancyBox jQuery plugin in the new responsive web design of my website to allow the user to open images in full size. As it is RWD, all images will be resized to fit the available page width automatically if required using the CSS rule img {max-width: 100%}. My HTML code snippets related to images will look like this:

<a class="fancybox" rel="group" href="full-size-image.png">
    <img src="full-size-image.png" alt="alt text" style="max-width: 100%;" />
</a>

But is it ok to insert the link to the same image twice in a construction like this? Can Google or another major search engine consider this a bad coding style or something like that so we can get lower positions for our pages and images in SERPs?


A short explanation of my thought.

As for me, it looks good and proper if we open a full-size image for a prepared scaled-down one in the construction

<a class="fancybox" rel="group" href="full-size-image.png">
    <img src="small-size-image.png" alt="alt text" width="300" height="200" />
</a>

Or just point to the same image when we scale it down by specifying its size explicitly:

<a class="fancybox" rel="group" href="full-size-image.png">
    <img src="full-size-image.png" alt="alt text" width="300" height="200" />
</a>

It is clear that we resized the image and want to open it in full size when we click it. But it may look strange if we just insert the same image into <a> and <img> as I showed above...

  • 2
    Why would think this was a problem? – John Conde Jun 9 '15 at 15:24
  • @JohnConde, I wrote: possibly, it can be classified as bad coding style. As I know, in the general case Google prefers pages coded better. – TecMan Jun 9 '15 at 15:27
  • But better how? What is there about this code would make you think, "this isn't good?" or "this is a problem"? – John Conde Jun 9 '15 at 15:40
  • @JohnConde, I added some explanation to my question. – TecMan Jun 9 '15 at 15:51
  • EEK rel="group" if you want your coding validating use correct HTML5 i.e data which would look something data-fancybox-group="group". – Simon Hayter Oct 7 '15 at 20:23
1

Your coding styles are perfectly valid but because you're going after responsive design, directly linking to the actual image files is a bad idea unless your images are smaller than the smallest screen for mobile devices because the users would have to flick their screen and/or zoom in/out to see the whole image.

Unless there's a spectacular reason for your implementations, I wouldn't add a link to the image file when the image itself is already there and of a decent size (via image width and height attributes). Also, a side effect of your method is that if HTTP caching is not enabled, then there will be twice as many requests for images, which in turn increases your bandwidth consumption. The impact is based on the file size of the images used.

  • My first comment regarding paragraph #1 of your great answer is the following. The current fixed (pixel) layout of my website uses construction #3 from my question, and my images are in the top of the Google image search result page. I believe, this is because the width/height attributes specified for the images. And I hope, the max-width: 100%; setting will have the same effect in the new RWD. – TecMan Jun 10 '15 at 7:11
  • Regarding paragraph #2, we do use HTTP caching for static resources like images. If you think it's a bad idea to reference the same image twice, can you suggest a suitable solution? How can I make the image responsive allowing to open it in full size? Perhaps, using another jQuery plugin but not fancyBox? – TecMan Jun 10 '15 at 7:16
  • One more question regarding this: "if HTTP caching is not enabled, then there will be twice as many requests for images". I hope you mean the image would be loaded the 2nd time ONLY if the user clicks the image to see it in full size, right? But not when the page is loaded? – TecMan Jun 10 '15 at 8:17
1

An alternative to that would be the following code, but I am not sure how it would work with your plugin.

<a class="fancybox" rel="group" href="full-size-image.png"
   style="background:url('full-size-image.png');
      width: 300px; height: 200px;" ></a>
0

It's not considered bad coding style, in fact it's rather common to have the same link occurring at different places on the same page. Take for example, a forum; usually, in the top right you'll have a link to sign up, you'll then have another at the top of the comments section and then possibly one following each comment. Those are all linking to the same url; the only thing having multiple links to the same place does is add multiples to the weight of the url that is being linked to. So if the url has a positive effect on your ranking, it increases that effect, if it's to spammy page then it's going to have a cumulatively bad effect.

It's important to remember though, that having a few links that go to the same place is hardly the end of the world and has a pretty negligible effect. Unless it's something that is systematic for the site and occurs on a large scale should you be worried.

This article goes some way to explaining the principle behind it.

  • I'm talking about inserting a link to the same image in the form of the <img> tag DIRECTLY into the <a> tag. I do understand what you mean if we link the same resource from different places, even on the same page - but this is not our case. I also added some explanation to my question. – TecMan Jun 9 '15 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.