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
-
Web Developments and Breakpoints for SEO
Google likes fast and clean pages. Pages load better when they are optimized for each platform. With the new Ultra HD resolutions and ultra phones, what is the optimal number of breakpoints for web page with images on them?
Web Design | | Atlanta-SMO0 -
How to know if a wordpress theme is coded correctly for Seo
Hi, So I am curious if there is a tool to see if a site is coed properly for Google? I am running Avada, a standalone theme, yet I am also using a cache plugin. But when I search my code, its all like on one huge line. So I am curious if there is a way to verify or check if a theme is coded correctly? Thank you
Web Design | | Berner1 -
Does anyone know if the YOAST SEO plugin works 100% on a responsive wordpress template?
Hi, Does anyone know if the YOAST SEO plugin works 100% on responsive wordpress template? In other words, when you configure the custom title and metadescription is it also configured for the tablet and cellphone views as well? Thanks Carla
Web Design | | Carla_Dawson0 -
Will updating our site from ASP .NET 3.5 to ASP .NET 4.0 negatively affect SEO?
I've checked out some of the other posts related to .NET upgrades, but none specifically address ASP .NET 4.0. I understand that there are many advantages to upgrading, but as with any change made to site code I want to be 110% positive that this upgrade will not affect how Google ranks my client's pages. Since the URL extension isn't changing (will remain .aspx), I'm thinking that there won't be much of an affect on SEO at all. In fact, I'm making the argument that the upgrade will only improve page rank. Anyone go through this upgrade and experience any immediate benefits or disadvantages? Thanks for your help!
Web Design | | FreightTEK0 -
What is the current thought how/if cufon affects keywords?
What is the final opinion about how (and if) cufon affects keywords in H1 tags?
Web Design | | Court_LOQUA0 -
Effect of Off-Site Images
I'm getting to start work with a new client, and I've run across something I've never had to deal with before, off-site images. The site I'll be working on is for an appliance retailer, both online and physical. The way they've had their site built (not something I was part of) a third party company maintains the product inventory side of things. They're sourcing from about 35 different manufacturers, and this third party has direct access to the product information streams. They push the weekly updated information to my clients site. What this means, though, is that the product images don't live on the client's site. They're hotlinked from the third party's inventory doohickey. I've never seen something quite like this before. Has anyone else? Any ideas as to what problems I may face when it comes to on-site SEO?
Web Design | | MRCSearch0 -
SEO to Drive Leads
Dear friends, I have clients asking for SEO to drive leads. I have no experience on it, how could I do that? Is there any web layout I can suggest to my client? Another question is how do I implemented the layout on the web structure? I usually structuring my website based on keywords. For example: Homepage niche: plumbing Category: london plumbing, plumbing service, etc Content: Finding London plumbing service in your area, what kind of plumbing service you should pay attention? So, based on these layout, my SEO efforts goes to the content, instead of the homepage. Now, the question is how do I increase conversion with these strategy? Is placing a form above the fold would be wise, then place the content below it. Please advice 🙂 Thanks for your kind support, Albertus
Web Design | | toeplly0