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
-
What type of website is best for seo.
I need a new website for my health insurance business. What type is best for SEO? Many thanks
Web Design | | laurentjb0 -
Moving youtube videos between accounts/channels
Hi.
Web Design | | corn2015
If you have a youtube channel that has a lot of videos on it and need to move the videos to another channel, is there an easy method to do this without having to download and re-upload them?0 -
Tips on finding the right Senior Designer / Design Director
Hello Everyone, I manage a fairly large educational website that we are looking to completely redesign to improve the overall site user experience and usability. In the past I, a non-designer, business person, would just roughly draw how I thought the site should look and our developer (who is good, but not a web designer) would just try his best to make everything look profession. Over the years, it has become painfully obvious that we need to invest in more design expertise and move towards a modern, smartly designed website. So my question: Where are the best places to find good freelance designers? I have of course conducted web searches, browsed elance, and asked my network for referrals. However, I am finding that most of the really good ones, ones who have to ability to take charge and lead us through this entire process, and who have at least a basic understanding of SEO principles, work for larger integrated development shops who also expect their people to develop the new site as well. We already have a developer and are primarily looking for the design expertise. Does anyone in the Moz community have any suggestions or even referrals? Thanks! Eric
Web Design | | Eric_R0 -
Above the Fold Content - Use of large images
Hi All, Our designers have come to the SEO team to ask if have a large image across the top of the page taking up a large majority of the above the fold real estate will impact our SEO. Our initial thoughts are no as long as we have an optimised H1 visibal to the user landing there which informs them what the page is about. Any thoughts would be appreciated.
Web Design | | J_Sinclair1 -
SEO and Squarespace? Is this Really an Option?
Hi all, Any feedback on Squarespace, SEO capabilites and ranking factors? I have a client wishing to use the platform and despite the good reviews, which appear to be from resellers by the way, the forums say not. Although apparently Rand Fishkin, SEOMoz (yes right here!) gave them a big thumbs up “The square space team have put together a remarkable platform, SEO friendliness! Really not sure here and don’t agree, there are many limitations and hosting with a template provider is always big no no. Cheers
Web Design | | VirginiaC
Virginia0 -
What Are The Hazards to Changing Over to Responsive Web Design?
We have recently re-programmed our website to Responsive Web Design. All the URLs have remained the same, all the content is unchanged. We have this new version sitting on a development server and are finding ourselves hesitant to make the changeover. Our rankings are great currently, and our question is whether or not there are any risks that we will incur by making this change. We would appreciate any advice on how to implement this change safely. Or if that's it's even possible to insure that there won't be ranking losses.
Web Design | | gfiedel0 -
How do I gain full SEO value from individual property pages?
A client of ours has a vacation rental business with rental locations all over the country. Their old sites were a messy assembly of black hat, broken links and htaccess files that were used over and over on each site. We are redoing everything for them, in one site, with multiple subdirectories for individual locations, like Aspen, Fort Meyers, etc. Anyhow, I'm putting together the SEO plan for the site and I have a problem. The individual rental properties have great SEO value (lots of text, indexable pictures, can create google/bing location pages), and are great for linking in social media (Look at this wonderful property, rental price just reduced!). However, I don't want individual properties, which will have very similar keywords, links, descriptions, etc, competing with each other when indexed. Truth be told, I don't really want search engines linking directly to the individual property pages at all. The intended browsing experience should allow a user to "narrow down" exactly what they're seeking using the site until the perfect rental appears. What I want is for searchers to be directed to the property listing index that most closely matches what they're seeking (Ft. Meyers Rental Condos or Breckenridge Rental Homes), and then allow them to narrow it down from there. This is ideal for the users, because it allows them to see all available properties that match what they want, and ideal for the customer, because it applies dozens of pages of SEO mojo to a single index, rather than dozens of pages. So I can't "noindex" or "nofollow", because I want all that good SEO mojo. I can't REL=CANONICAL, because the property pages aren't similar enough to the index. I can't 301 Redirect because I want the users to be able to see the property pages at some point. I'm stymied.
Web Design | | SpokeHQ0 -
Multiple Sites, multiple locations similar / duplicate content
I am working with a business that wants to rank in local searches around the country for the same service. So they have websites such as OURSITE-chicago.com and OURSITE-seattle.com -- All of these sites are selling the same services, but with small variations in each state due to different legal standards in the state. The current strategy is to put up similar "local" websites with all the same content. So the bottom line is that we have a few different sites with the same content. The business wants to go national and is planning a different website for each location. In my opinion the duplicate content is a real problem. Unfortunately the nature of the service makes it so that there aren't many ways to say the same thing on each site 50 times without duplicate content. Rewriting content for each state seems like a daunting task when you have 70+ pages per site. So, from an SEO standpoint we have considered: Using the canonocalization tag on all but the central site... I think this would hurt all of the websites SERPs because none will have unique content. Having a central site with directories OURSITE.com/chicago -- but this creates a problem because we need to link back to the relevant content in the main site and ALSO have the unique "Chicago" content easily accessable to Chicago users while having Seattle users able to access their Seattle data. The best way we thought to do this was using a frame with a universal menu and a unique state based menu... Also not a good option because of frames will also hurt SEO. Rewrite all the same content 50 times. You can see why none of these are desirable options. But I know that plenty of websites have "state maps" on their main site. Is there a way to accomplish this in a way that doesn't make our copywriter want to kill us?
Web Design | | SysAdmin190