Site Architecture for the Advanced SEO: Imagery

Brian Ussery Director of SEO Technology

@beussery

Agenda

-Images make good results-Image SERPs comparison-Variation in image SERPs-User behavior

Query

[how to tie a tie]

User Intent

Directions for tying a necktie

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.”

- http://www.tie-a-tie.net/windsor.html

Image Result

Conclusion

Sometimes images are the best answer.

Bing SERPs

Yahoo SERPs

Google Universal SERPs

Google SERPs

[mcdonalds]

[bp oil]

Site:cnn.com

Site:adobe.com

Key

Understand enginesEngines try to align photo SERPs with instances where imagery appears to match user intent to enhance the user experience.

Elmo SERP

Big Bird SERP

Big Bird small screen

Big Bird smaller screen

Big Bird smallest screen

Other Image Sources

Key

Understand usersBecause they can do so quickly, image searchers are unique in that they tend to view a number of images.

Google SERPs Eye Tracking

*Simulation

Google Image SERP Eye Tracking

*Simulation

Key

Understand image search

Image SERP Landing Page

Image Search

How Image Search Works:

-(X)HTML Downloaded by Googlebot-Page Parsed-Discovered (href or inline)-Crawled -Classified (photo, face, b&w, adult) -Indexed -Duplicates identified (similar images treated as one (canonical)) -Ranking based on multiple signals

Notes:1.Include images in XML Sitemap2.Remove images via Googlebot-Image disallow in robots.txt.

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

Examples

Everyone likes images

Architecture: Image Placement

Architecture: Image Proximity

Architecture: Context

Architecture: Context

Architecture: Image Accessibility Flash

Architecture: Image Accessibility JS

Architecture: Image Dimensions

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

Architecture: Image Maps Sprite

Architecture: Image Rights / RDFa

<a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/us/88x31.png" /></a><br /><span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/StillImage" property="dc:title" rel="dc:type">Sample Title</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="Sample URL" property="cc:attributionName" rel="cc:attributionURL">Sample Work</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>.<br />Based on a work at <a xmlns:dc="http://purl.org/dc/elements/1.1/" href="Sample Source" rel="dc:source">Sample Source</a>.<br />Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="Sample permissions" rel="cc:morePermissions">Sample permissions</a>.

Architecture: meta

Provide as much information as possible. -EXIF-Tags-Geo-PICS

Architecture: EXIF

Architecture: Fake EXIF

Architecture: Image Directory

Your Domain:http://www.URL.com/Adult-photos/

Hotlink:http://picasaweb.google.com/beussery/CharlesSchulzStudio#5474612209328232818

Google Webmaster Central

http://goo.gl/xzzt

Key

Think.

Back to the tie example

Text with multiple Images

Text with one Image

Checklist

1. Place images near relevant text, high up in pages and above the fold when possible.2. Implement standalone image pages with descriptive TITLEs, meta, captions, paragraphs &

headings.3. Provide engines with as much information as possible about your images without spamming

(EXIF, Geo, Tags, PICS).4. License with Creative Commons Licensing when specifying usage rights.5. Use quality photos, quality matters!6. Direct correlation between image size and speed.7. Use a directory structure that also helps describe photo content.8. Specify width and height for images in (X)HTML.9. Don’t scale images.10. Consider Sprites11. Use the appropriate optimized image format.12. Determine image quantity. 13. Think about words users use when searching and how they interact with image search.14. Don’t block quality images with JavaScript.15. Remove white space in images.16. Google Webmaster Central XML Sitemap & Images http://goo.gl/xzzt

Thank you!@beussery