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
-
Migration from HTML to Wordpress - SEO Implications?
I am in the process of having a wordpress site developed to replace my current HTML site. (I currently have my website in html and a blog in wordpress in a sub directory). I am doing this in phases to try and preserve as much of my good rankings as possible. My first phase is to replicate my site with the exact same pages, meta data, and site structure. I'm hoping that google will see this as not much change and not change my rankings for the worse. I also made it a goal that my site speed tests be at least equal to what they are now. We will have to 301 all of the URLs however since it will be going from /example.html to /example. I believe my blog will also need to move into the root directory as well, so I need to 301 all of those pages. I plan to wait a couple months for Phase 2. Phase 2 involves replacing old content (photo galleries), and introducing new content (virtual tours, videos, new pages, etc.) One of my reasons for moving to wordpress is to keep up with current trends a little easier since I have very little time. (I am owner, website maintainer, SEO - all on my own). My question here is three parts. 1. Do you think this strategy will work to preserve my current rankings? 2. Do you have any lessons learned or advice to share with me to make this as smooth as possible? 3. Do I really need to wait to add new content? I might get antsy and want to do it sooner! 🙂 Thank you in advance!
Web Design | | CalicoKitty20001 -
Pageless/Single Page Design and Migration Questions
Hello, We are starting a content audit and migration to a new CMS. We would like to take content and present more on a pageless/Single Page type design instead of having visitors drill down so many levels to find the content. What should we be aware of from an SEO perspective. Here is Example of current pages and structure: http://www.saintpetershcs.com/GraduateMedicalEducation/PediatricResidency/
Web Design | | sphcs
Subpages include: Overview, Curriculum, Faculty, Residents, Benefits, How to APply Here is example of what we would like to do:
http://themeforest.net/item/medicalpress-health-and-medical-wordpress-theme/full_screen_preview/7789703 As you scroll information is populated: Duke Medicine also has something similar. https://www.dukemedicine.org/treatments/cancer What are your thoughts?0 -
Infinite Scroll and SEO - Is it enough to only link to the previous and next page in the pagination?
Hi all, We are implementing an eCommerce site where the results pages of the products will be visibile on one page (always loading new products when you scroll down the page). Now, I have read that the Google spiders cannot "load" new products scrolling down the page, hence the spider only sees the first few products of the results page. Our developer wants to implement a system where a users sees the first products on example.com/products Then scrolling down, he will see new products with the URL changing to example.com/page/2 and so on. Is it enough that we add a pagination link that goes from example.com/products to example.com/page/2 Then another link that goes from example.com/page/2 to example.com/page/3 and so on, so the Google spider can make his way through all the pages? Or is that too much deep linking and the spider wouldn't even crawl all the results pages? Any recommendations how to go about this? Many thanks in advance!
Web Design | | Gabriele_Layoutweb0 -
Question Concerning HTML5/CSS Templates & Google Mobility Issues
Hi all, Looking for some kind of solution for a responsive update for a site and I am wondering if there are any templates (not Wordpress) that are both great SEO wise and would also pass muster with the impending Google update for responsiveness? I was looking at things like Canvas and Porto ( http://themeforest.net/popular_item/by_category?category=site-templates ) but can't find any discussion on whether or not these things have been addressed with any of these templates. If any of you have suggestions or other places to look for something that could possibly fit the bill (even if temporarily) I would be very appreciative. Thank you so much in advance!
Web Design | | Pixelwik1 -
Responsive design and Google analytics mobile tracking codes?
Hi all, We are currently rebuilding a site using responsive design, however i have just had a thought. On another site where we have a mobile site under a sub-directory we utilise mobile tracking codes as we found that this was far more accurate for recording visits. On a responsive design site evidently all pages, desktop and mobile, will be under the same URL, yet the content will adjust to the screen size of the device. Should we also change the tracking code to be mobile code on the lower resolutions or would the same code be sufficient?
Web Design | | Sarbs0 -
Ecommerce & Responsive design
Hi there, We are thinking to redevelope our ecommerce websites and thinking responsive design. Due to responsive design when the screen gets smaller to fit iphone and ipad we need to hide some content to make it more user friendly. My question is, how Google will treat hiding content with the smaller screens? Will this effect our rankings in a negative way? We really don't want to get punished by Google 🙂 Thank You
Web Design | | Jvalops0 -
Text in Images vs. Alt tags
Hi on my homepage i h ave multiple images They have the appropriate alt text for each image, but the text which the image displays is not written into the page and styled using CSS rather than placing text within an image. Is this a issue worth correcting, or is it sufficient to have just alt text for each image. Any major pros from having putting the text in the image into the CMS using appropriate CSS styling to achieve the same effect.
Web Design | | monster990 -
How WP Themes work with Navigation Structure for SEO and JQuery Headers?
I am trying to find the best WP Theme for our company. I noticed most of them do not offer a left hand side navigation on the home pages, and usually are on the right side on the inside pages. I always thought that Home Page links were very important for SEO. Currenly we have a left drop down navigation with all of our product catagories, keyword optimized. The structure follows for all the pages. Is this not as important to Search Engines anymore? Is it better to have a products link, to all the products and then the inside pages, have just a navigation bar, for that particular catagory? This seems to be very common on all the templates i am seeing. I also noticed, and really like the JQueary Tabs. I would use this for displaying, PDFs and Specifications Charts. Also, some home page images are using a jquery slider with some text, linking to a page. Is Jquery the new javascript and do search engines see what is in the code? I also noticed they all have footers that have links and some other information. Is this a SEO must have?
Web Design | | hfranz0