Image and Visual Search for Ecommerce

Slide 1

Slide 1 text

Gianluca Fiorelli SEO & Digital Marketing Consultant, ILoveSEO.net @gfiorelli1 @gfiorelli1@mastodon.social

Slide 2

Slide 2 text

Image and Visual Search for e-commerce by Gianluca Fiorelli

Slide 3

Slide 3 text

3 Takeaways 1) Visual Search is the most natural search 2) Images & Visual Search SEO is not only ’’Alt tag’’ optimization 3) The Devil is in the details

Slide 4

Slide 4 text

“People have always been visual; our brains are wired for images. Writing was a hack, a detour. Pictorial languages are how we all started to communicate; we are coming full circle” - Kevin Systrom (Instagram Co-Founder)

Slide 5

Slide 5 text

Visual Search is perfect for people, who have these common dilemmas :

Slide 6

Slide 6 text

Visual Search is perfect for people, who have these common dilemmas : 1. Do not know what they desire, but know it ASAP they see it.

Slide 7

Slide 7 text

Visual Search is perfect for people, who have these common dilemmas : 1. Do not know what they desire, but know it ASAP they see it. 2. Do know what they want, but they do not know how it is called.

Slide 8

Slide 8 text

“In the English language there’s something like 180,000 words, and we only use 3,000 to 5,000 of them. If you’re trying to do voice recognition, there’s a really small set of things you actually need to be able to recognize […] So the problem of search in vision is just vastly larger than what we’ve seen with text or even with voice.” Clay Bavor (VP, Labs and Virtual & Augmented Reality at Google)

Slide 9

Slide 9 text

However, SEO for Images & Visual Search tends to be considered a low priority because: 1. “It is time consuming” 2. “Image CTR is ridiculous” 3. “People search images just to steal them” 4. “We have to create 1000000 pieces of content with ChatGPT” 5. …

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Image & Visual Search can help us generating conversions in just one click from the image to the shopping cart eliminating intermediate steps, which could cause the loss of that same conversion.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Image Search The Past

Slide 14

Slide 14 text

Image Search Visual Search Past tence

Slide 15

Slide 15 text

Multimodal Search Visual Search Image Search Present times

Slide 16

Slide 16 text

IMAGES SEARCH

Slide 17

Slide 17 text

IMAGES SEARCH Search Images Tags Organic Images Search Results with or without Product tag Shopping

Slide 18

Slide 18 text

IMAGES SEARCH Search bar with Lens Merchant feed with product images carousel Image gallery of products listed in an ecommerce category page

Slide 19

Slide 19 text

IMAGES SEARCH Organic Shopping (desktop) Query: Star Wars Legion miniatures Title from Title tag or H1 Structured Data Relevant text taken from the description of the product

Slide 20

Slide 20 text

IMAGES SEARCH Organic Shopping (mobile) Query: Star Wars Legion miniatures If we mark up our product pages with Schema.org/Product, then Google presents the product tag and the availability (’’in/out of stock) If the product is available also in Merchant from other merchants, Google will indicate it.

Slide 21

Slide 21 text

IMAGES SEARCH Organic Shopping (mobile) Query: Star Wars Legion miniatures If other stores present the same product, Google shows them under the main result. It is therefore essential to offer the greatest possible degree of information to make our Search Snippet so attractive as to ''to make'' users forget to click on the alternatives. The merger between classic research data and Merchant Center is increasingly present.

Slide 22

Slide 22 text

IMAGES SEARCH Organic Shopping (mobile) Query: Star Wars Legion miniatures On mobile, then, we can create ‘’Collections’’, which we can recover to retake our Search Journey in a later moment.

Slide 23

Slide 23 text

IMAGES SEARCH Organic Shopping (mobile) If we click on any of the images we saved, the Search Snippet is slightly different. In any case, it will occupy all the viewport of the smartphone. TL;DR • Our products images must be able to nudge the click or, at least, the searcher to save them in a Collections. • Images Search especially is a mobile experience.

Slide 24

Slide 24 text

How can we individuate Image Search opportunities for our product?

Slide 25

Slide 25 text

Keyword Research Project > Position Tracking Filter keywords to see those, which SERPS presents an Image Box and…

Slide 26

Slide 26 text

… AdWords, Shopping, and Merchant search features. These are the keywords for which a Visual Shopping behavior is more evident, being their Search Intent clearly transactional. Keyword Research

Slide 27

Slide 27 text

Images, however, is not just a synonym for ’’Google Images’’

Slide 28

Slide 28 text

Rich Results – Images • Article

Slide 29

Slide 29 text

Rich Results – Images • Article • Carousel

Slide 30

Slide 30 text

Rich Results – Images • Article • Carousel • Event

Slide 31

Slide 31 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool

Slide 32

Slide 32 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata

Slide 33

Slide 33 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata • LocalBusiness (Restaurant)

Slide 34

Slide 34 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata • LocalBusiness (Restaurant) • Logo

Slide 35

Slide 35 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata • LocalBusiness (Restaurant) • Logo • Movie

Slide 36

Slide 36 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata • LocalBusiness (Restaurant) • Logo • Movie • Product

Slide 37

Slide 37 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata • LocalBusiness (Restaurant) • Logo • Movie • Product • Recipe (also in HowTo)

Slide 38

Slide 38 text

Rich Results – Images • Article • Carousel • Event • How To e HowToSupply / HowToTool • Image Metadata • LocalBusiness (Restaurant) • Logo • Movie • Product • Recipe (also in HowTo) • Video

Slide 39

Slide 39 text

Google Discover

Slide 40

Slide 40 text

‘’Images’’ in Universal Search is not just a synonym of Rich Result

Slide 41

Slide 41 text

Knowledge Graph

Slide 42

Slide 42 text

Featured Snippet

Slide 43

Slide 43 text

Organic Merchant Feed Images required for each product! Minimum requirements: • Replace any symbols or spaces (i.e.: “&” = %26). • URLs must be indexable. • Submit only 1 value (image_link). Other images can be added using the additional_image_link attribute. • The URL must be stable. • Updated images can take 3 days to be crawled. • Enable automatic image improvements

Slide 44

Slide 44 text

Organic Merchant Feed Images required for each product! Minimum size requirements: Non apparel > 100x100 Apparel > 250x250 Resolution > No more than 64 Megapixels Weight > No more than 16 MB Shot type > Display the entire product > If a bundle, all products must be visible (is_bundle) No placeholder More: https://support.google.com/merchants/an swer/6324350?hl=en

Slide 45

Slide 45 text

Images Search SEO

Slide 46

Slide 46 text

Images Search SEO • Descriptive file names

Slide 47

Slide 47 text

Images Search SEO • Descriptive file names • Alt tag (aka alt text)

Slide 48

Slide 48 text

Images Search SEO – Alt tags Steps: 1. Crawl your website. 2. Filter your image resource URLs to see all without alt tags defined. 3. Discard all the template images (they are sitewide). 4. Decide the prioritization workflow depending on the relative importance of the content 1. product pages 2. category pages 3. magazine/blog articles What if there are thousands images to optimize? Use AI for captioning the images: LAVIS (Language-VISion) and BLIP2: More information here: https://wordlift.io/blog/en/image- seo-using-ai/ Colab link: https://wor.ai/image-captioning

Slide 49

Slide 49 text

Images Search SEO • Descriptive file names • Alt tag (aka alt text) • Caption

Slide 50

Slide 50 text

Images Search SEO • Descriptive file names • Alt tag (aka alt text) • Caption • Image Description (Image Galleries)

Slide 51

Slide 51 text

Images Search SEO • Descriptive file names • Alt tag (aka alt text) • Caption • Image Description (Image Galleries) • XML Sitemap (required)

Slide 52

Slide 52 text

Images Sitemaps Remember: ‘Image URLs must be crawled and indexed’’. Namespace where you define the image tags: xmlns:image="http://www.google.com/schemas/sitemap -image/1.1" Tag: For each URL we can indicate up to 1000 images. The URL of the image. If the images are in a CDN, its domain must be verified in Search Console. You may combine sitemap extensions but, in this case, pay attention to the size the XML sitemap

Slide 53

Slide 53 text

Images Search SEO • Descriptive file names • Alt tag (aka alt text) • Caption • Image Description (Image Galleries) • XML Sitemap (required) • Consistence between the image and the text surrounding it

Slide 54

Slide 54 text

Slide 55

Slide 55 text

High Quality Images - Categories First N visible images Images following the first scroll All the other images below the fold • Fetchpriority high • Preload • Loading eager • Fetchpriority high • Loading auto • Fetchpriority low • Loading lazy • Decoding async

Slide 56

Slide 56 text

High Quality Images - Carousels Immediately visible elements First 2 elements following the first swipe All the other elements of the carousel • Fetchpriority high • Preload • Loading eager • Fetchpriority auto (high if it is in ‘’Autoplay’’) • Loading auto • Fetchpriority low • Loading lazy • Decoding async Note: do no use composited animations

Slide 57

Slide 57 text

High Quality Images – Product pages Immediately visible elements Second element of the carousel All the other elements of the carousel • Fetchpriority high • Preload • Picture scrset • Loading eager • Picture scrset • Fetchpriority high if it is in ‘’Autoplay’’ • Fetchpriority low • Loading lazy • Decoding async

Slide 58

Slide 58 text

High Quality Images – Image format Format Transparency Animation Browser PNG YES NO ALL JPG NO NO ALL WebP YES YES ALL MODERN BROWSERS AVIF YES YES NOT ALL (Safari and Firefox have limitations QUESTIONS Are animations needed? Use elements instead of Gifs. Need fine details with highest resolution? Use PNG but remember it is not lossy, hence the weight of the file can be very big. Use WebP and it is lossless, hence more efficient than PNG. Use SVG if image is composed of geometric shapes Reconsider the use of Text in images Are you optimizing photo? JPG is the first choice (both lossy and lossless. Test different quality levels) Lossy WebP or Avif, but weaker on color chroma

Slide 59

Slide 59 text

High Quality Images – a checklist • Prefer Vector formats. • Minify SVG assets. • Whenever possible, choose WebP or AVIF formats (see previous slide). • Experiment with optimal quality settings for raster formats. • Remove unnecessary image metadata (i.e.: geo information, camera information…). • Serve scaled images (see: https://web.dev/i18n/en/serve-images-with- correct-dimensions/). • Compress images using image compression software like Imagemin (see: https://web.dev/i18n/en/use-imagemin-to-compress-images/). • Use Images CDN, which normally take care of everything image performance optimization. • If it is possible, automate.

Slide 60

Slide 60 text

High Quality Images – What if the base resources are no high quality? You can use Super-Resolution for images, which can enlarge and enhance images using generative AI and Deep Leaning. A good model is ESRGAN (Enhanced Super Resolution Generative Adversarial Network) available in the Tensorflow Hub: https://www.tensorflow.org/lite/examples/super_resolution/ overview https://www.tensorflow.org/hub/tutorials/image_enhancing https://arxiv.org/abs/1809.00219 https://github.com/hiram64/ESRGAN-tensorflow

Slide 61

Slide 61 text

Conversational Search Visual Search Image Search Do you remember this?

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Lens is everywhere! Syndicalize your images so to have them used on other websites frequently used by your audience.

Slide 64

Slide 64 text

Lens is available also on desktop. We can upload an image we have saved in our PC or drag & drop an image from Image Search.

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

MULTISEARCH https://blog.google/products/search/multisearch/

Slide 71

Slide 71 text

There are ways to present visual facets of our products without needing to create/open to index HTML URLS that may harm the SEO performance of our ecommerce MULTISEARCH

Slide 72

Slide 72 text

MULTISEARCH NEAR ME

Slide 73

Slide 73 text

MUM, with its capacity of using images, text, and voice search in the same search session in a fluid and seamless way, nothing else is but combining search options already existing separately. HOW WE TARGET THESE KIND OF SEARCHES? ENTITY SEARCH ENTITY SEARCH ENTITY SEARCH

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Visual Search SEO

Slide 76

Slide 76 text

Visual Search SEO • Classic Image Search SEO

Slide 77

Slide 77 text

Visual Search SEO • Classic Image Search SEO. • Structured Data.

Slide 78

Slide 78 text

Visual Search SEO • Classic Image Search SEO. • Structured Data. • High Quality Images.

Slide 79

Slide 79 text

Visual Search SEO • Classic Image Search SEO. • Structured Data. • High Quality Images. • Attention to PageSpeed and CWW.

Slide 80

Slide 80 text

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Visual Search SEO • Classic Image Search SEO. • Structured Data. • High Quality Images. • Attention to PageSpeed and CWW. • Avoid confusion in the image. The main object must be clear and avoid “artistic” effects like cinematic and blur. • If possible, avoid “stock images”: create them! • Republish your images portfolio in sites like Pinterest. • Curate every detail of your product images, using ”correlated products” in them. You don’t know what object user they focus on in a photo.

Slide 84

Slide 84 text

Slide 85

Slide 85 text

Visual Search SEO The more pages use our images, the better they will be tagged with related entities and, therefore, the more visible they will be in Lens image searches and visual searches.

Slide 86

Slide 86 text

TL;DR 1) Visual Search is the most natural search 2) Images & Visual Search SEO is not only ’’Alt tag’’ optimization 3) The Devil is in the details

Slide 87

Slide 87 text

Gianluca Fiorelli SEO & Digital Marketing Consultant, ILoveSEO.net @gfiorelli1 @gfiorelli1@mastodon.social