Can someone do an example of ImageGallery ?

walkoffhomerun commented 6 years ago

I have struggled to figure out ImageGallery. I have a working example that passes google validation but it is very clunky. What I am struggling with is that i get "duplicate" error warnings on google validation and it does not proceed when using multiple images under imagegallery. so i had to move imagegallery under photo (which makes sense because you are telling a search engine you have more than 1 photo in gallery form) then under imagegallery i can use ONLY 1 image then under that 1 image i have to use multiple ImageObject with different URL's of each image. so here is what i came up with....again it passes google validation but it's clunky. there has to be a more streamlined method.

<script type="application/ld+json">
        {"@context" : "http://schema.org",
            "@type": "SingleFamilyResidence",  // whatever this type is must have photo listed as an item that can be used with it under schema.org
            "photo": {  //begin bracket for multiple entries under photo
                "@type": "ImageGallery",
                "image":  [  //begin bracket for multiple entries under image
                    {
                    "@type": "ImageObject",
                    "url": "http://www.investorconstruction.com/images/1.gif"
                    },
                    {
                    "@type": "ImageObject",
                    "url": "http://www.investorconstruction.com/images/2.gif"
                    },
                    {
                    "@type": "ImageObject",
                    "url": "http://www.investorconstruction.com/images/3.gif"
                    }
                    ]  //end bracket for multiple entries under image
                }  //end bracket for multiple entries under photo
        }
    </script>

screen capture passing validation of just the image gallery above by itself BUT under a category that allows for PHOTO as part of that category

screen capture passing validation of image gallery included in the above screen capture but with all the other items added in

walkoffhomerun commented 6 years ago

another note......i have also seen some larger companies show image gallery with NO photos inside. they only have image gallery with a URL link to the image gallery page. So what is the correct way? To me an image gallery is an actual image gallery with all the images and NOT a link to the image gallery. I hope someone can clarify. Maybe both pass? But it really is not about passing but what will actually show up in search results

ostephens commented 6 years ago

Not claiming any particular expertise, but http://schema.org/ImageGallery is a subtype of http://schema.org/WebPage and the definition is "Web page type: Image gallery page." So I think the example you quote where they "have image gallery with a URL link to the image gallery page", is the correct usage. i.e. it should describe the webpage where the ImageGallery is.

See http://schema.org/WebPage for examples of how this is done with the more general type

WeaverStever commented 6 years ago

This seems to pass the SDTT. CollectionPage > mainEntityOfPage > ImageGallery

Note that I added the "id", "url" and "description" fields, adjust accordingly.

<script type="application/ld+json">
  {"@context" : "http://schema.org",
  "@type": "CollectionPage",
  "id": "http://example.com/myimagegallery.html",
  "url": "http://example.com/myimagegallery.html",
  "description":"description of my image gallery topic",
        "mainEntityOfPage": {  
            "@type": "ImageGallery",
                  "image":  [  //begin bracket for multiple entries under image
                        {
                        "@type": "ImageObject",
                        "url": "http://example.com/images/1.gif"
                        },
                        {
                        "@type": "ImageObject",
                        "url": "http://example.com/images/2.gif"
                        },
                        {
                        "@type": "ImageObject",
                        "url": "http://example.com/images/3.gif"
                        }
                ] //end bracket for ImageGallery > image(s)
          } //end bracket for mainEntityOfPage
  }
</script>

Update, I switched all of the domains to example.com for consistency.

walkoffhomerun commented 6 years ago

i was going to add the direct link to the image gallery but you did that for me. I think that covers it. If it wants the direct link it's there and if it wants actual images it has those as well. This way it covers both methods and until someone at google or schema publishes an example i guess this is how we have to do it. thanks to both responders

walkoffhomerun commented 6 years ago

here is another version based on googles "carousel" example they post online and it was based on a recipe with images so i stripped out the recipe requirements. it uses item list and requires a "#" anchor suffix at the end of every image link and if you dont it gives an array error

walkoffhomerun commented 6 years ago

I then took it a step further combining BOTH the google item list for carousels AND image gallery using the mainentityofpage item. there are 2 sequences i did and both validate the same except the order it appears on the screen but both still say ITEM LIST on the validation with the image gallery listed as supplemental items:

and the 2nd version

WeaverStever commented 6 years ago

I looked at your first version and after I sorted it out to read it and removed the comments (bad idea, the script fails when uglified (compressed)). After that it worked okay on SDTT. I assume you are trying to associate the image to a navigation element (page anchor).

I took the example from http://schema.org/itemListElement and came up with this.

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://example.com/dresses#dresses",
    "name": "Dresses",
    "image": "http://www.investorconstruction.com/images/1.gif"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://example.com/dresses/real#real_dresses",
     "name": "Real Dresses",
     "image": "http://www.investorconstruction.com/images/2.gif"
   }
  }
 ]
}
</script>

Not really sure why or how you want it, but with the ImageGallery script also on the page, it may associate the images by absolute path.

walkoffhomerun commented 6 years ago

the anchor tag is actually mandatory it says from Google on their "carousel" page: https://developers.google.com/search/docs/guides/mark-up-listings if you do NOT put the anchor tag it in throws and "array error". dont understand it myself but that is what they want.

your version creates a breadcrumb list so i guess it works. all the reason google needs to create an actual link on how they process alot of images in a gallery format.

but read the "carousel" page from google in the link above. it shows rich snippet support for a bunch of recipe items, i just took out the recipe stuff and what was left is the images

WeaverStever commented 6 years ago

Just to be sure you understand anchor tags, there are two components.

The anchor is a location on the page where you want the display to jump to (the top left of the screen)
An href link that is http://example.com/page.html#myanchor usually used as a bibliography link to a specific chapter/section on a single page.

See http://www.echoecho.com/htmllinks08.htm

toptalo commented 6 years ago

Hi there! Is it possible to add imageGallery to Article? Or there are better way to markup group of related images?

RichardWallis commented 6 years ago

The ImageGallery (you define) would be part of the WebPage or Article that it appears within.

So Article:hasPart ImageGallery and/or ImageGallery:isPartOf Article

toptalo commented 6 years ago

Thanks!

RichardWallis commented 4 years ago

See issue #7 for the context of the move from the main Schema.org issue tracker to this repository.

schemaorg / suggestions-questions-brainstorming

Can someone do an example of ImageGallery ? #185