Amp Carousel doesn’t have alt tags
-
The amp carousel doesn’t have alt tags on any of the images which is bad for seo. However if I use a standard gallery layout the alt tags do appear properly. Is this a known issue?
The page I need help with: [log in to see the link]
-
Thanks for the report. How are you embedding the carousel? Is it just a Gallery block that has the “Display as carousel” toggle enabled?
Have you populated the “Alt Text” for each image in the gallery?
Yes all the images have alt text. I’m using a wordpress gallery shortcode to embed and then selecting display as carousel in the sidebar. Here is the html with a standard gallery you can see the alt tag.
<div class="gallery-icon landscape"> <a href="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation.jpg"><amp-img width="1500" height="1058" src="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg" class="attachment-large size-large amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" alt="Couple walking with horse drawn carriage in background Wachesaw Plantation" aria-describedby="gallery-2-30428" srcset="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg 1500w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-300x212.jpg 300w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-600x423.jpg 600w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1100x776.jpg 1100w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-450x317.jpg 450w" layout="intrinsic" i-amphtml-layout="intrinsic"><i-amphtml-sizer class="i-amphtml-sizer"> <img alt="" role="presentation" aria-hidden="true" class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height="1058px" width="1500px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>"> </i-amphtml-sizer><noscript><img width="1500" height="1058" src="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg" class="attachment-large size-large" alt="Couple walking with horse drawn carriage in background Wachesaw Plantation" aria-describedby="gallery-2-30428" sizes="(max-width: 1500px) 100vw, 1500px"></noscript><img decoding="async" alt="Couple walking with horse drawn carriage in background Wachesaw Plantation" aria-describedby="gallery-2-30428" srcset="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg 1500w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-300x212.jpg 300w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-600x423.jpg 600w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1100x776.jpg 1100w, https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-450x317.jpg 450w" src="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content" sizes="(max-width: 1707px) 490px, 100vw"></amp-img></a> </div>And here is the same gallery but with display as carousel selected.
<div class="i-amphtml-slide-item i-amphtml-slide-item-show"><a href="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg" class="amp-carousel-slide" aria-hidden="false"><amp-img src="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg" width="1500" height="1058" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 70.5333%;"></i-amphtml-sizer><img decoding="async" src="https://www.ryansmithphotography.com/wp-content/uploads/2017/09/couple-walking-with-horse-drawn-carriage-in-background-wachesaw-plantation-1500x1058.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img></a></div>Another issue I’ve noticed, if I have a gallery shortcode with link=”file” in the shortcode, if add lightbox effect is selected but display as carousel is not selected, the link on the images no longer appears in the html. I created a test page so you can see both types of galleries and their issues. The only thing that works correctly is if neither checkbox is selected, then the gallery works properly with alt tags and links on the images.
You can view the test page here https://www.ryansmithphotography.com/amp-gallery-test/@rsmith4321 Can you share the underlying markup from the
post_contentfor these examples? In other words, can you go to View Code in the post editor and copy the markup that is being saved in the DB to cause the gallery to be output?I can reproduce the issue with the
altattribute when using a[gallery]shortcode but not when using a Gallery block. I’ve opened a PR to fix for the 1.2.1 release: https://github.com/ampproject/amp-wp/pull/2848I’m not sure I understand the second issue you reported with link=file. Can you please create a GitHub issue for that instead? https://github.com/ampproject/amp-wp/issues/new
It will be easier to share screenshots and debug what is going there.
Thanks for the help. Just to explain a bit better on the second issue and I can add it to GitHub. I have a gallery shortcode like [gallery ..... link="file"] so each image should be linked to its source image. And without any amp options selected it works correctly. However, on that example page, I have the amp option to add lightbox selected in the editor. If the lightbox selection is on, then the the links to the source images disappears and the lightbox doesn’t work. It’s the same as if link=”file” is not in the shortcode. Hopefully that makes sense.
Resolving topic to continue on GitHub: https://github.com/ampproject/amp-wp/issues/2850
The topic ‘Amp Carousel doesn’t have alt tags’ is closed to new replies.