Responsive image plugins and seo / crawlability
-
Note : For the background of this question please read the preface below.
Ive been researching responsive image options the main issue i can see with them is that they are not semantic html so bots may not index them correctly. For instance many of the responsive image plugins use
data-src
for an image rather thansrc
.Does any one have any experience with this and if it impacts on SEO ?
Does any one know of a client side responsive image soltion that uses a normal
img
tag with the image stored in thesrc
and with the option to set analt
attribute ?
**Preface : **
Ive got a site we are currently developing, the site has a large full width responsive image slider.
To serve images that wont be pixilated we are making the width of the images 1800px wide (which should cover most screens, but isn't actually big enough if the site was viewed on a 27" imac) these 1800px wide images weight about 350kb - 500kb per image and our image slider has about 20 of them. As you can see this would be a problem for anyone with a connection slower than c.10 mbps.
This is especially true for mobile devices that will be downloading an image 1800px wide although only require a much smaller one, this coupled with a 3g connection will make the site really slow.
-
So you've got a big performance issue if you put all 20 images in img src= notation, as the browser is going to try to download those, of course.
What I've done with my travel website with big hotel images (I'll have as many as 75 or more sometimes) is specify the 1st image in img src= notation, then use Javascript to update the src attribute on click or timer.
The downside of this: good luck getting Google to index the other 19 images, even if you put them in an image sitemap. In my experience, Google didn't want to index anything it couldn't verify was really on the page.
You can use @media queries to point at different images for different resolutions, but only if they're background images....which most likely means they won't be indexed, and they won't be seen as content by Panda.
What I've ended up doing is a bit of a hack; I use client-side Javascript to detect the screen resolution, then I can select different sized images based on that. I use Joe Lencioni's SLIR library to take any large image and automatically create and cache the various smaller sizes I need.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Multiple Similar Product Variations - Page layout, Title and SEO best practice??
Im doing some research into SEO for our new web design. I sell designer eyewear prescription and sunglasses. Lets take a Ray Ban Wayfarer sunglass it comes in 30 colours and 3 sizes for each model. Up till now i was of the impression that for best practice SEO i would need to have each individual variation as its own page, this would also help with things like google shopping too. So for example heres 1 colour product in 3 sizes of 30 colour variations for this particular model. Ray Ban Wayfarer RB2140
Web Design | | Craigboi1987
Colour: Black 901
Sizes: 47, 50, 54 Currently my urls looks like this with a new page and the size changing on the end for each variation. Ray Ban Wayfarer RB2140 - Black 901 - 47 URL: www.mywebsite.com/ray-ban-wayfarer-rb2140.html?colour=Black+901&size=47 Ray Ban Wayfarer RB2140 - Black 901 - 50 URL: www.mywebsite.com/ray-ban-wayfarer-rb2140.html?colour=Black+901&size=50 Ray Ban Wayfarer RB2140 - Black 901 - 54 URL: www.mywebsite.com/ray-ban-wayfarer-rb2140.html?colour=Black+901&size=54 This is very time consuming and I'm not sure if its adding any benefit to my SEO in fact scared its actually a) slowing my site down (content heavy)
b) looking like duplicate content I am thinking about moving towards a page more like this were it would be just be a model with variations. (not effecting the title/getting a new page per variation) http://demoleotheme.com/vigoss/index.php/atomic-endurance-running-tee-crew-neck.html I am not sure of the pros and cons of doing it this way over the way I'm doing it currently all i know is my site is ranking horribly. Lastly I'm currently running a magento V1.9 store which is renowned for duplicate content slow site speeds etc so have been told moving to woo commerce would benefit me for both site performance and seo but I'm skeptical as currently with this structure of a each SKU being a new page il be up to 8000+ products and multiple product variations that it can handle my needs, anyone with any experience on woo commerce platform? (this might be a operate question apologise) This is absolutely frying my brain so any advice appreciated. Im prepared to put every dying second into just need some solid advice in which direction to go!0 -
How to split organic traffic for A/B testing
This might be a silly questions as I may be missing something completely obvious here, but we are completely new to A/B testing. Our site doesn't receive a phenomenal amount of traffic although we are looking to set up some A/B testing for our popular products. Is there a way to split organic traffic for a specific product page. I'm aware that we need to experiment which one performs better in Analytics but I'm unsure how to redirect 50% of the organic traffic.
Web Design | | Jseddon920 -
Ecommerce Site - SEO
We have a Business Catalyst Site with the Same product Listed in 2 different catalogs. Each product page is the same page with different URLs you can see it here: http://www.yourpharmacy.co.nz/beauty/clarins-skincare/clarins-advanced-extra-firming-eye-contour-cream-20ml http://www.yourpharmacy.co.nz/clarins/clarins-advanced-extra-firming-eye-contour-cream-20ml Any suggestions welcome
Web Design | | OnlineAssetPartners0 -
Why aren't Images in G+ product page posts showing up in SERPs for brand searches?
Before 1-2 weeks ago, our G+ posts containing links to our product pages would show up in in SERPs (when searching for our brand name) with a thumbnail of the product image. Now, they do not (see image below for visual). Our tech team confirmed there hasn't been any coding change that might be to blame and I see that this isn't happening to other sites. Any idea what may be the problem here? tcnhLgy
Web Design | | znotes0 -
Does stock art photo attribution negatively impact SEO by leaking Google Page Rank?
Greetings: Companies such as Shutterstock often require that buyers place credit attribution on their web pages when photos you buy from them appear on these pages.. Shutterstock requests that credit attribution links such as these be added: Songquan Deng / Shutterstock.com Do these links negatively impact SEO? Or do search engines view them as a positive? Thanks,
Web Design | | Kingalan1
Alan0 -
Image URL's and naming
We're re-platforming on Magento and wondering about our images. 1. Should I be concerned about 301 redirects for my images. 2. Is there a "best practice" path for images? or is just the name important? Right now, all our images are in /meta/images/sm or /lg or /xlg. Since we're re-platforming, we're wondering if we should change the urls. But, I'm assuming this would require all of them to have 301 redirects and with all the other redirects, I'm not sure this is really feasible. thanks for any suggestions on this.
Web Design | | centralvacuumstores0 -
Best way to handle Spanish/English WEBSITE
Hey guys, How are you doing? I have a website (www.aceromart.com ) in which the primary language is Spanish. The company is oriented toward the Mexican Audience. However, recently we are dealing with many U.S companies. Also, we want to be included in the Yahoo Directory and several other directories which demand a U.S version of the website. So i want to have a U.S version of the website. My ecommerce is based in the NETWORK Solutions platform and has around 1,000 products and pages. What is the best way to include an English version of the website. Ive seen some pages using the Google traslate tool, which only traslates the text. Hope to hear some of your ideas, Regards,
Web Design | | JesusD0 -
Will my site structure provide decent SEO?
We have an ASP.NET MVC website with a view that can dynamically display each product we offer. The product name is hyphenated in the URL, and this is what we’re using to pull the product from the database. So an example URL would be: http://www.mysite.com/Products/Florida/Sample-Product-Name We have another view that dynamically lists the products offered for each state. This page would contain links to the URL for each product offered in that state. The URL for Florida would be: http://www.mysite.com/Products/Florida We want to make sure that when we enter a new product into the database, the product is indexed by Google the next time our site is crawled. I know that Google will crawl through the links in our website, so the new product should get indexed as long as we have a link to it. In this case, the link will be on the view that lists the products for the corresponding state. I have 2 questions: 1) Is my understanding correct that Google will index the product page as long as it can find a link to it somewhere in my site? 3) To get Google to index each URL for content that is generated dynamically from a database, is having links in my site for each URL the only way to do it? Is there something we can do with the site map? Thanks in advance everyone! -Alex
Web Design | | dbuckles0