• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 06.05.20, 23:15
  • Opened by: Marco Montanari
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #17714 - AMP validation failed when in alt the text contains the char "

https://gyazo.com/a3e83f529d2b4a16e28f74b717054c6e

All Alt text that contains a " char will broke AMP validation

you can test here: https://search.google.com/test/amp?skip_amp_follow=true&id=GU6ikhVtPYPq_1iEubjbeA

” must be converted in " to not break alt=”something “word” something”

like alt=”something "word" something”

Comments

Marco Montanari 07 May 2020, 00:22

Fred you know in witch prestashop table is stored the alt text?

Marco Montanari 07 May 2020, 00:43

other problem with title same problem with the " (double quote) char:

<a href="https://www.enotecapirovano.com/it/mobile/product/3062-rosso-umbria-igp-trentanni-2017-75-cl-famiglia-cotarella" title="Rosso Umbria IGP "Trentanni" 2017 75 cl Famiglia Cotarella">

you must use on AMP for alt and title the htmlspecialchars() php function with UTF8 option

https://www.php.net/manual/en/function.htmlspecialchars.php

Marco Montanari 07 May 2020, 01:55 
    <a href="https://www.enotecapirovano.com/it/mobile/product/3062-rosso-umbria-igp-trentanni-2017-75-cl-famiglia-cotarella" title="Rosso Umbria IGP "Trentanni" 2017 75 cl Famiglia Cotarella">
            <amp-img src="https://www.enotecapirovano.com/3870-home_default/rosso-umbria-igp-trentanni-2017-75-cl-famiglia-cotarella.jpg" width="400" height="400" layout="responsive" class="product-image-amp" alt="Rosso Umbria IGP "Trentanni" 2017 75..."></amp-img>
          </a>

seems you grab for alt ant title the value from product title and not from product image Caption field.

A good code must be: 

          {if !empty($product.cover.legend)}
            alt="{$product.cover.legend}"
            title="{$product.cover.legend}"
          {else}
            alt="{$product.name}"
          {/if}

but remember to htmlspecialchars UTF8 each text before write on the html

Fred 07 May 2020, 12:33

Thank you for sharing the solution, I just added it to the theme. The final code is

{if !empty($product.cover.legend)}
alt="{$product.cover.legend|escape:'htmlall'}" title="{$product.cover.legend|escape:'htmlall'}"
{else}
alt="{$product.name|escape:'htmlall'}"
{/if}
Marco Montanari 07 May 2020, 14:50

have you alerady modified desktop and AMP theme in my installation?
Because if you did is not working :)

https://search.google.com/test/amp?id=KsiLNtobLdOiBp253gSIog

Marco Montanari 07 May 2020, 14:51

The widged in AMP home page productlist showing not fixed alt and titles