Mobile app version of vmapp.org
Login or Join
Barnes591

: Inserting into with the same image and SEO 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

@Barnes591

Posted in: #GoogleImageSearch #Html #Images #ImageSearch #Seo

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...

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Barnes591

3 Comments

Sorted by latest first Latest Oldest Best

 

@Barnes591

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>

10% popularity Vote Up Vote Down


 

@Harper822

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.

10% popularity Vote Up Vote Down


 

@Rambettina238

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme