Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

More Organic Traffic and Visibility with Image Optimization

88 views

Published on

Current opportunities and optimization tips for image search.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

More Organic Traffic and Visibility with Image Optimization

  1. 1. @RomainDamery More Organic Traffic and Visibility with Image Optimization
  2. 2. @RomainDamery Share of Web Searches Image search is significant and growing • Images are included in 29% of search queries on Google (MOZ) • ~75% of US internet users regularly or always search for visual content prior to making a purchase; only 3% never do (eMarketer) • 59% of consumers believe that visual information is more important than textual information when shopping online (Intent Labs) • 62% of Gen Z and Millennials want visual search capabilities more than any other new technology (ViSenze) Q2 2019
  3. 3. @RomainDamery From Image to Page
  4. 4. @RomainDamery Evolved into Visual Content and Product Discovery Product info filter in Image Search Shopping Ads in Image Search Product information labels within Image Search Expanded product information within Image Search Google Lens shortcutDirect organic link to product detail page
  5. 5. @RomainDamery From Image Search to Regular Web Search Popular Products Best Products Refinements / Attributes Search by PhotosBadged Images
  6. 6. @RomainDamery “ GREAT! How do we get there?! ”
  7. 7. @RomainDamery Image badges • Image data within structured data for Product, Video, and Recipe • URL or a fully described ImageObject • Unbadged standalone images can use ImageObject Images & Schema Markups Search by Photos • More local intent • GMB’s category-specific photos Organic product listings (and some related widgets): • Product Schema with image(s) (required) • Merchant Center (faster processing) • Manufacturer Center (can help show additional products)
  8. 8. @RomainDamery Original image (+page content) SpeedURL Structure (folder, filename) Metadata (page title, desc., alt, schema, etc.) Freshness Placement (high, near relevant text) Mobile first Topical (related quality content for snippets) LP Intent & UX High-Level Image Ranking Factors
  9. 9. @RomainDamery Optimized & Structured Images Landing Page Speed Landing Page Quality & UX Improved Engagement Metrics Increased Visibility Organic search results landing page performance
  10. 10. @RomainDamery IMAGES & (MOBILE) PAGE SPEED
  11. 11. @RomainDamery • Images are still the main cause of bloat on the web, taking up massive amounts of bandwidth • 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs (HTTP Archive) • Images accounted for 1.7MB of the content loaded for the 3.0MB average site (HTTP Archive)
  12. 12. @RomainDamery An estimated 17% of U.S. subscribers (47.3M)… …are still using 3G networks (GSMA)
  13. 13. @RomainDamery “ WHAT DO WE DO NOW! ”
  14. 14. @RomainDamery Image File Formats Images can disproportionately impact your page load times! PNG GIF JPEG SVG WebP*
  15. 15. @RomainDamery Cache & Preloading Caching • HTTP cache headers using Cache-Control • All image types • Aggressive policy: months • Cache busting when necessary Preloading • HTML tag <link rel="preload" as="image" href=“header.jpg"/> • HTTP Link header Link: <https://example.com/header.jpg>; rel=preload; as=image • Useful for critical image assets, especially above-the-fold images • Not for images within srcset
  16. 16. @RomainDamery • Image height and width should match users’ device viewports! Don’t make them zoom out or scroll horizontally… • Images should be responsive… BUT don’t make browsers scale heavy, large images themselves… serve the right target image dimensions instead! Serve Optimized Image Dimensions <img src="image.jpg" alt="Image description"> img { max-width: 100%; height: auto; } <img src="image-small.jpg" srcset="image-small.jpg 320w, image-medium.jpg 800w, image-large.jpg 1200w" alt="Image description"> <picture> • Art direction control • Newer image formats w/ fallback mechanism
  17. 17. @RomainDamery Seriously…?! …this is going to take forever…
  18. 18. @RomainDamery Image Optimization Automation Content Delivery Networks (CDNs) can do a lot of the heavy lifting! • Dynamically serve: • Multiple versions of images • Most optimal version to fit user’s device resolution and viewport • Newer formats (WebP) to compatible browsers • Use through your own custom subdomain • CMS plugins can also help
  19. 19. @RomainDamery • Page size and load time impacted by image formats, size, dimensions, quantity, and caching but also by… how images load! • Lazy loading defers loading of non-critical resources at page load time until they’re needed Lazy Loading - Use proper pagination for infinite scroll - Add images to XML Sitemaps and <noscript> tags The median mobile image transfer size increased by 871 KB (+46%) over the last 3.5 years. Lazy loading could save 275 KB per page (median) and much more for image-heavy pages (HTTP Archive).
  20. 20. @RomainDamery • Single "sprite sheet" background image • CSS technique • offset to display the correct part • not suitable for indexing • Reduces HTTP requests • Useful for structural, templated images (navigation, widgets, etc.) Image Sprites (Still a thing!)
  21. 21. @RomainDamery • Prioritize pages • Manual checks: Cloudinary Image Analysis Tool, PageSpeed Insights, etc. Auditing Site Images • At scale: Small to medium websites: Screaming Frog, etc. • …or your favorite FTP client!
  22. 22. @RomainDamery • Use Google Search Console • Reports on host pages, not single image files • Doesn’t differentiate between different images on the same page • Only clicks that navigate the user out of Google Search are counted as clicks • Images shown in regular web search exclusively reported under “Web” search • For rich results and product results specifically, choose the “Search Appearance” filter Image Search Performance
  23. 23. @RomainDamery SEE YOU AT THE NEXT SMX! THANK YOU! Slides: http://bit.ly/smx-west-image-seo Article: http://bit.ly/seland-image-seo
  24. 24. @RomainDamery Share these #SMXInsights on your social channels! • Image search should be part of your marketing strategy • Important for content creators and ecommerce marketers • Evolving into visual content and product discovery • Schema markups are key for organic visibility
  25. 25. @RomainDamery Share these #SMXInsights on your social channels! • Image search is becoming much more contextual • Results directly point to their host pages rather than image files • Images and host pages should be optimized simultaneously • Image and host page content quality, uniqueness, freshness, and relevance now matter more than ever
  26. 26. @RomainDamery Share these #SMXInsights on your social channels! • Images can disproportionately impact page load times • Tens of millions of Americans still rely on 3G networks • Images are the number one contributor to total page weight • Unoptimized images tend to negatively impact load times, engagement, and conversion metrics

×