Un logo de site correctement conçu fait partie intégrante de vos pages AMP. Il est affiché dans la recherche Google – à lire : jeux des doodles Google populaires ! – et présente immédiatement votre marque aux internautes. La taille suggérée du logo AMP pour WordPress par Google est de 600 x 60 px. Si vous êtes propriétaire d’un site WordPress, le plugin AMP officiel d’Automattic ne vous offre pas la possibilité de télécharger un logo de site d’une taille de 600 x 60 pixels. Au contraire, les pages AMP générées par le plugin tirent l’icône de site par défaut du thème. Cela peut être un problème car l’icône du site téléchargé par le thème doit être recadré et ne répond pas aux directives appropriées du logo AMP.
Pour utiliser un logo personnalisé avec le plugin officiel AMP WordPress qui répond aux directives du logo AMP, vous devrez modifier manuellement le code du plugin pour pointer vers la bonne image. Je vais vous montrer comment le faire afin que votre marque soit correctement affichée dans le moteur de recherche Google.
Étape 1 : Créer un logo qui a une taille de 600 x 60 px. Veillez à suivre les directives AMP Logo.
Étape 2 : Transférer l’image du logo sur votre site WordPress en utilisant l’option Media > ; Add New du tableau de bord d’administration.
Étape 3: Copier l’URL de l’emplacement de l’image du logo. Cela peut être fait en cliquant sur l’image de la bibliothèque multimédia, puis en copiant l’URL de l’image.
Étape 4 : Depuis le tableau de bord d’administration, naviguez vers Plugins > ; Editor et choisissez AMP dans le menu déroulant et cliquez sur Select pour modifier les fichiers de ce plugin. Cliquez ensuite sur templates puis header-bar.php.
Etape 5 : Localiser le code suivant sous header-bar.php. <amp-img src= »< ?php echo esc_url( $site_icon_url ) ; ?> ; » width= »32″ height= »32″ class= »amp-wp-site-icon »></amp-img>
Étape 6 : Vous devez remplacer src= »<?php echo esc_url( $site_icon_url ) ; ?> ; » par le lien vers l’image de votre logo. Vous devrez également modifier les attributs width et height en 600 et 60 respectivement. Votre code final ressemblera à ce qui suit:
<amp-img src= »http://link-to-your-logo-image.jpg » width= »600″ height= »60″ class= »amp-wp-site-icon »></amp-img>
Étape 7: Cliquez sur Mettre à jour le fichier pour enregistrer votre modification.
