Booster le header d’un site WordPress WooCommerce avec des fonctions ingénieuses
L’optimisation du head d’un site WordPress WooCommerce est très souvent requis afin d’améliorer son SEO, pour ajouter des scripts de suivi, des like boxes Facebook, des favicons ou tout autre outil demandant à être exécuté immédiatement au chargement de la page.
Voici quelques fonctions intéressantes à ajouter à son thème ou son child thème WordPress WooCommerce de manière à optimiser tout cela sans plugin.
1/ Ajouter le code de tracking Analytics dans le head sans plugin
Cela permet de ne pas avoir à surcharger inutilement votre site avec un plugin qui génèrera davantage de PHP, lourd pour le serveur et les performances.
Remplacez UA-XXXXXXXX-XX par votre tracking ID.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/** * Function add Analytics tracking code * @see : https://www.team-ever.com/ajoutez-des-informations-utiles-a-votre-site-wordpress-woocommerce/ */ function analytics_tracking_code(){ ?> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXX-XX', 'auto'); ga('send', 'pageview'); </script> <?php } add_action('wp_head', 'analytics_tracking_code'); |
Pour rappel, Analytics est un outil de suivi des visites de votre site internet
2/ Code d’ajout de la like box Facebook
La like box se génère ici-même :
https://developers.facebook.com/docs/plugins/page-plugin
Facebook vous fournira deux types de code, un à placer là où vous souhaitez afficher votre like box, l’autre à mettre en place dans votre thème juste après la balise body. Cette fonction n’est donc pas exactement dans le head du site, mais comme il s’agit du fichier header.php qui sera modifié au sein de votre thème, autant ajouter la fonction à ce tutoriel WordPress.
La fonction à mettre dans votre fichier function.php est celle-ci
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/** * Function add Facebook script for like page plugin * @see https://developers.facebook.com/docs/plugins/page-plugin * @link : https://www.team-ever.com/ajoutez-des-informations-utiles-a-votre-site-wordpress-woocommerce/ * @author Team Ever */ function facebook_page_script(){ echo "<div id='fb-root'></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = '//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.10&appId=1681900005450820'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>"; } |
Et dans votre fichier header.php, vous n’avez plus qu’à ajouter ceci tout de suite après la balise body :
facebook_page_script();
Certains thèmes disposent d’une action juste après la balise body, très utile dans ce cas précis. Vérifiez au préalable si ce n’est pas le cas de votre côté.
3/ Ajouter des favicons selon le type d’appareil
Ici nous allons avoir besoin d’un générateur de favicons pour récupérer les images autogénérées. Dans l’exemple j’utilise http://www.favicon-generator.org/.
Les favicons sont tous rangés dans un répertoire /favicon, créé spécialement à la racine du site pour les besoins de cette fonction, et pour que tout soit proprement bien rangé.
Voici à présent la fonction :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/** * Generated favicons * Useful for no 404 on favicons with Apple and Android * @see : https://www.team-ever.com/ajoutez-des-informations-utiles-a-votre-site-wordpress-woocommerce/ */ function generated_favicons(){ echo ' <link rel="apple-touch-icon" sizes="57x57" href="'.get_site_url().'/favicon/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="'.get_site_url().'/favicon/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="'.get_site_url().'/favicon/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="'.get_site_url().'/favicon/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="'.get_site_url().'/favicon/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="'.get_site_url().'/favicon/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="'.get_site_url().'/favicon/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="'.get_site_url().'/favicon/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="'.get_site_url().'/favicon/apple-icon-180x180.png"> <link rel="apple-touch-icon-precomposed" href="'.get_site_url().'/favicon/apple-icon-57x57.png" /> <link rel="icon" type="image/png" sizes="192x192" href="'.get_site_url().'/favicon/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="'.get_site_url().'/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="'.get_site_url().'/favicon/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="'.get_site_url().'/favicon/favicon-16x16.png"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="'.get_site_url().'/favicon/ms-icon-144x144.png"> <meta name="theme-color" content="#ffffff"> '; } add_action('wp_head', 'generated_favicons'); |
Une fois que les fichiers téléchargés depuis le générateur sont bien en place sur votre FTP, enregistrez la fonction dans votre functions.php et videz votre cache, vous avez terminé.
4/ Automatiser la meta description des pages produits WooCommerce
Sujet déjà abordé dans ce précédent post, mais revoici la fonction. Pensez à lire l’article cité afin de mieux comprendre et perfectionner la fonction. Sachez juste que ces fonctions permettent de mieux référencer les produits en ajoutant les meta requises, ainsi que celles pour Twitter et les Open Graph de Facebook.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function woocommerce_seo() { global $woocommerce, $post; if ( is_product() ) { // var_dump($post); $meta_desc = substr($post->post_excerpt, 0, 160) . '...'; $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); $url = get_permalink( $post->ID ); echo '<meta name="description" content="'.strip_tags($meta_desc).'" />'; echo '<meta property="og:title" content="'.$post->post_title.'" />'; echo '<meta property="og:type" content="product" />'; echo '<meta property="og:url" content="" />'; echo '<meta property="og:image" content="'.$image[0].'" />'; echo '<meta property="og:site_name" content="Team Ever" />'; echo '<meta property="og:description" content="'.strip_tags($meta_desc).'" />'; echo '<meta name="twitter:card" content="summary" />'; echo '<meta name="twitter:title" content="Prestashop : ajouter des balises hreflang avec Smarty | Team Ever" />'; echo '<meta name="twitter:description" content="'.strip_tags($meta_desc).'" />'; echo '<meta name="twitter:image" content="'.$image[0].'" />'; echo '<meta itemprop="image" content="'.$image[0].'" />'; } } add_action('wp_head', 'woocommerce_seo'); |
5/ Ajouter des news_keywords sur vos articles de blog
Comme vous le savez certainement, les meta_keywords ne sont plus utilisés depuis très longtemps par les moteurs de recherche. Il existe en revanche une meta qui vous permet un meilleur référencement sur Google News (affichant donc les informations, comme un quotidien le ferait)
En se basant sur les tags de votre site, voici comment automatiser cela :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * Meta News Keywords * @see https://support.google.com/news/publisher/answer/68297?hl=fr */ function meta_news_keywords($post_id){ if (is_single()) { $tagsList = get_the_tags(); foreach ( $tagsList as $tag ) { $tag_names[] = $tag->name; } $metaTags = implode( ', ', $tag_names ); echo '<meta name="news_keywords" content="'.$metaTags.'">'; } } add_action('wp_head', 'meta_news_keywords'); |
Source de l’image à la une : Freepiks
Laisser un commentaire