Open walkoffhomerun opened 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
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
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.
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
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
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type": "ItemList", "itemListElement":[ { "@type": "ListItem", "position": 1, "item": { // IMPORTANT - The URL requires an anchor # tag to the anchor name for this item list to work "@type": "imageObject", "url": "http://www.investorconstruction.com/projects_gallery.html#apple-pie", "name": "Apple Pie", "image": "http://www.investorconstruction.com/images/1.gif" } }, { "@type": "ListItem", "position": 2, "item": { "@type": "imageObject", "url": "http://www.investorconstruction.com/projects_gallery.html#peach-pie", "name": "Apple Pie", "image": "http://www.investorconstruction.com/images/2.gif" } } ] } </script>
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:
<script type="application/ld+json"> { "@context" : "http://schema.org", "mainEntityOfPage": { "@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 ImageGallery > image(s) }, //end bracket for mainEntityOfPage "@type": "ItemList", "itemListElement":[ { "@type": "ListItem", "position": 1, "item": { // IMPORTANT - The URL requires an anchor # tag to the anchor name for this item list to work "@type": "imageObject", "url": "http://www.investorconstruction.com/projects_gallery.html#apple-pie", "name": "Apple Pie", "image": "http://www.investorconstruction.com/images/1.gif" } }, { "@type": "ListItem", "position": 2, "item": { "@type": "imageObject", "url": "http://www.investorconstruction.com/projects_gallery.html#peach-pie", "name": "Peach Pie", "image": "http://www.investorconstruction.com/images/2.gif" } } ] } </script>
and the 2nd version
<script type="application/ld+json"> { "@context" : "http://schema.org", "@type": "ItemList", "itemListElement":[ { "@type": "ListItem", "position": 1, "item": { // IMPORTANT - The URL requires an anchor # tag to the anchor name for this item list to work "@type": "imageObject", "url": "http://www.investorconstruction.com/projects_gallery.html#apple-pie", "name": "Apple Pie", "image": "http://www.investorconstruction.com/images/1.gif" } }, { "@type": "ListItem", "position": 2, "item": { "@type": "imageObject", "url": "http://www.investorconstruction.com/projects_gallery.html#peach-pie", "name": "Peach Pie", "image": "http://www.investorconstruction.com/images/2.gif" } } ], "mainEntityOfPage": { "@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 ImageGallery > image(s) } //end bracket for mainEntityOfPage } </script>
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.
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
Just to be sure you understand anchor tags, there are two components.
Hi there!
Is it possible to add imageGallery
to Article
?
Or there are better way to markup group of related images?
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
Thanks!
See issue #7 for the context of the move from the main Schema.org issue tracker to this repository.
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.
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![image](https://user-images.githubusercontent.com/31579512/31722493-dd5d5578-b3e1-11e7-9959-330120fd5a96.png)
screen capture passing validation of image gallery included in the above screen capture but with all the other items added in![image](https://user-images.githubusercontent.com/31579512/31701530-9f0263ae-b396-11e7-8880-4dd8e7a72550.png)