Site Architecture for Advanced SEO: Images


Published on

The latest web search engine image optimization and site architecture techniques for Google, Bing and Yahoo all from SMX Advanced 2010.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Images come from image SERPs
  • Because these images can show up in SERPs it’s important to know what Google has on “file” for your site.
  • Site Architecture for Advanced SEO: Images

    1. 1. Site Architecture for the Advanced SEO: Imagery Brian Ussery Director of SEO Technology @beussery
    2. 2. Agenda <ul><li>Images make good results </li></ul><ul><li>Image SERPs comparison </li></ul><ul><li>Variation in image SERPs </li></ul><ul><li>User behavior </li></ul>
    3. 3. Query [ how to tie a tie]
    4. 4. User Intent Directions for tying a necktie
    5. 5. Text Result “ Start with the wide end of your necktie on the right, extending about 12 inches below the narrow end on the left. Then cross the wide end over the narrow end. Bring the wide end up through the loop between the collar and your tie. Then bring the wide end back down. Pull the wide end underneath the narrow end and to the right, back through the loop and to the right again so that the wide end is inside out. Bring the wide end across the front from right to left. Then pull the wide end up through the loop again. Bring the wide end down through the knot in front. And -- using both hands -- tighten the knot carefully and draw it up to the collar.” -
    6. 6. Image Result
    7. 7. Conclusion Sometimes images are the best answer.
    8. 8. Bing SERPs
    9. 9. Yahoo SERPs
    10. 10. Google Universal SERPs
    11. 11. Google SERPs
    12. 12. [mcdonalds]
    13. 13. [bp oil]
    14. 14.
    15. 15.
    16. 16. Key Understand engines Engines try to align photo SERPs with instances where imagery appears to match user intent to enhance the user experience.
    17. 17. Elmo SERP
    18. 18. Big Bird SERP
    19. 19. Big Bird small screen
    20. 20. Big Bird smaller screen
    21. 21. Big Bird smallest screen
    22. 22. Other Image Sources
    23. 23. Key Understand users Because they can do so quickly, image searchers are unique in that they tend to view a number of images.
    24. 24. Google SERPs Eye Tracking *Simulation
    25. 25. Google Image SERP Eye Tracking *Simulation
    26. 26. Key Understand image search
    27. 27. Image SERP Landing Page
    28. 28. Image Search <ul><li>How Image Search Works: </li></ul><ul><li>-(X)HTML Downloaded by Googlebot </li></ul><ul><li>-Page Parsed </li></ul><ul><li>-Discovered (href or inline) </li></ul><ul><li>-Crawled  </li></ul><ul><li>-Classified (photo, face, b&w, adult)  </li></ul><ul><li>-Indexed  </li></ul><ul><li>-Duplicates identified (similar images treated as one (canonical))  </li></ul><ul><li>-Ranking based on multiple signals </li></ul><ul><li>Notes: </li></ul><ul><li>Include images in XML Sitemap </li></ul><ul><li>Remove images via Googlebot-Image disallow in robots.txt. </li></ul>
    29. 29. Engine Image Analysis Content signals: color, facial recognition, texture, layout Attribute signals: filename, ALT Textual signals: headings, text, captions Quality signals: image (pixels & resolution), host (hotlink) & domain where image appears, license XML Sitemap: Google Webmaster Central
    30. 30. Examples Everyone likes images
    31. 31. Architecture: Image Placement
    32. 32. Architecture: Image Proximity
    33. 33. Architecture: Context
    34. 34. Architecture: Context
    35. 35. Architecture: Image Accessibility Flash
    36. 36. Architecture: Image Accessibility JS
    37. 37. Architecture: Image Dimensions
    38. 38. Architecture: Image Format Format: - JPEG photos (strip meta when appropriate) - PNG for graphics - GIFs for small and animated images 31k gif 13k png 68k jpg
    39. 39. Architecture: Image Maps Sprite
    40. 40. Architecture: Image Rights / RDFa <a rel=&quot;license&quot; href=&quot;;><img alt=&quot;Creative Commons License&quot; style=&quot;border-width:0&quot; src=&quot;; /></a><br /><span xmlns:dc=&quot;; href=&quot;; property=&quot; dc:title &quot; rel=&quot;dc:type&quot;>Sample Title</span> by <a xmlns:cc=&quot;; href=&quot;Sample URL&quot; property=&quot;cc:attributionName&quot; rel=&quot; cc:attributionURL &quot;>Sample Work</a> is licensed under a <a rel=&quot;license&quot; href=&quot;;>Creative Commons Attribution 3.0 United States License</a>.<br />Based on a work at <a xmlns:dc=&quot;; href=&quot;Sample Source&quot; rel=&quot; dc:source &quot;>Sample Source</a>.<br />Permissions beyond the scope of this license may be available at <a xmlns:cc=&quot;; href=&quot;Sample permissions&quot; rel=&quot; cc:morePermissions &quot;>Sample permissions</a>.
    41. 41. Architecture: meta <ul><li>Provide as much information as possible. </li></ul><ul><li>-EXIF </li></ul><ul><li>Tags </li></ul><ul><li>Geo </li></ul><ul><li>-PICS </li></ul>
    42. 42. Architecture: EXIF
    43. 43. Architecture: Fake EXIF
    44. 44. Architecture: Image Directory Your Domain: Hotlink: #5474612209328232818
    45. 45. Google Webmaster Central
    46. 46. Key Think.
    47. 47. Back to the tie example
    48. 48. Text with multiple Images
    49. 49. Text with one Image
    50. 50. Checklist <ul><ul><li>Place images near relevant text, high up in pages and above the fold when possible. </li></ul></ul><ul><ul><li>Implement standalone image pages with descriptive TITLEs, meta, captions, paragraphs & headings. </li></ul></ul><ul><ul><li>Provide engines with as much information as possible about your images without spamming (EXIF, Geo, Tags, PICS). </li></ul></ul><ul><ul><li>License with Creative Commons Licensing when specifying usage rights. </li></ul></ul><ul><ul><li>Use quality photos, quality matters! </li></ul></ul><ul><ul><li>Direct correlation between image size and speed. </li></ul></ul><ul><ul><li>Use a directory structure that also helps describe photo content. </li></ul></ul><ul><ul><li>Specify width and height for images in (X)HTML. </li></ul></ul><ul><ul><li>Don’t scale images. </li></ul></ul><ul><ul><li>Consider Sprites </li></ul></ul><ul><ul><li>Use the appropriate optimized image format. </li></ul></ul><ul><ul><li>Determine image quantity. </li></ul></ul><ul><ul><li>Think about words users use when searching and how they interact with image search. </li></ul></ul><ul><ul><li>Don’t block quality images with JavaScript. </li></ul></ul><ul><ul><li>Remove white space in images. </li></ul></ul><ul><ul><li>Google Webmaster Central XML Sitemap & Images </li></ul></ul>
    51. 51. Thank you! @beussery