Les plugins pour WooCommerce sont parfois onéreux, tandis que ceux optimisant le référencement et le SEO sont foule et bien souvent gratuits. Lorsque l’on souhaite travailler la meta_description de ses produits, il peut être intéressant d’utiliser le résumé de son article, tout comme il peut se révéler judicieux d’ajouter une meta box WordPress afin de promouvoir des informations de référencement.
De cette manière, nous allons aborder le sujet de la meta_description et des éléments requis pour les réseaux sociaux, en automatisant tout d’abord le tout selon le contenu saisi, puis en ajoutant directement dans la page d’administration de WooCommerce des champs de saisie d’information.
La page produit est en quelque sorte un custom post type, que nous avons déjà abordé lors d’un tutoriel.
1/ Automatisation selon le contenu
Cette fonction est pour les fainéants souhaitant automatiser leurs balises meta selon le contenu renseigné en guise de descriptif produit. Autant vous dire que ce n’est pas optimal, mais c’est mieux que rien du tout. Nous verrons plus loin comment faire un peu plus et avoir la possibilité de travailler son SEO plus en avant.
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');
Nous disposons donc d’un rédactionnel bien coupé à 160 caractères pour la description, avec la balise de partage de l’image, tout est déjà pas mal. Seulement si votre rédactionnel n’est pas totalement adapté aux prérequis d’un bon SEO, il serait fort utile de pouvoir ajouter soi-même manuellement les information SEO sur la page produit WooCommerce.
2/ Ajout de meta boxes pour le SEO des produits
Admettons que nous souhaitons à présent améliorer le SEO en effectuant un rédactionnel plus adapté aux règles du référencement naturel. L’intelligence voudrait que si le SEO n’est pas renseigné, alors nous nous baserons sur le contenu. Sinon, autant récupérer les infos renseignées pour les mettre en place en guise de meta.
1/ Création des meta boxes pour les pages produit
Voici le code de génération d’une meta box uniquement pour un produit dans l’administration d’une page produit WooCommerce
/**
* Woocommerce meta boxes
* @see https://www.team-ever.com/woocommerce-auto…meta_description
* @author Team Ever
*/
function product_title_get_meta( $value ) {
$field = get_post_meta( $post->ID, $value, true );
if ( ! empty( $field ) ) {
return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );
} else {
return false;
}
}
function product_title_add_meta_box($post_type) {
$post_types = array('product');
global $post;
$product = get_product( $post->ID );
if ( in_array( $post_type, $post_types ) ) {
add_meta_box(
'product_title-product-title',
__( 'Product SEO', 'product_title' ),
'product_title_html',
'post',
'normal',
'default'
);
add_meta_box(
'product_title-product-title',
__( 'Product SEO', 'product_title' ),
'product_title_html',
'product',
'normal',
'default'
);
}
}
add_action( 'add_meta_boxes', 'product_title_add_meta_box' );
function product_title_html( $post) {
$product_seo_title = get_post_meta( get_the_ID(), 'product_title', true );
$product_seo_description = get_post_meta( get_the_ID(), 'product_description', true );
wp_nonce_field( '_product_title_nonce', 'product_title_nonce' ); ?>
<p>Please respect 65 characters max for title, 160 max for description</p>
<p>
<label for="product_title"><?php _e( 'Product title', 'product_title' ); ?></label><br>
<input type="text" name="product_title" id="product_title" value="<?php echo $product_seo_title; ?>">
</p> <p>
<label for="product_description"><?php _e( 'Product description', 'product_title' ); ?></label><br>
<textarea name="product_description" id="product_description" ><?php echo $product_seo_description; ?></textarea>
</p><?php
}
function product_title_save( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( ! isset( $_POST['product_title_nonce'] ) || ! wp_verify_nonce( $_POST['product_title_nonce'], '_product_title_nonce' ) ) return;
if ( ! current_user_can( 'edit_post', $post_id ) ) return;
if ( isset( $_POST['product_title'] ) )
update_post_meta( $post_id, 'product_title', esc_attr( $_POST['product_title'] ) );
if ( isset( $_POST['product_description'] ) )
update_post_meta( $post_id, 'product_description', esc_attr( $_POST['product_description'] ) );
}
add_action( 'save_post', 'product_title_save' );
Notez au passage qu’avec $post_types = array(‘product’); nous pouvons totalement gérer le type de page WooCommerce sur laquelle nous allons afficher les meta boxes, ce qui nous évite de polluer l’administration du site ainsi que nombre de plugins le font.
2/ Modification de la fonction initiale de SEO produit WooCommerce basée sur le contenu
Modifions à présent notre fonction initiale, de manière à tester si les meta boxes SEO ont bien été renseignées.
function woocommerce_seo() {
global $woocommerce, $post;
if ( is_product() ) {
$product_seo_title = get_post_meta( get_the_ID(), 'product_title', true );
$product_seo_description = get_post_meta( get_the_ID(), 'product_description', true );
$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 );
if (!empty($product_seo_title)) {
echo '<meta property="og:title" content="'.$product_seo_title.'" />';
echo '<meta name="twitter:title" content="'.$product_seo_title.'" />';
} else {
echo '<meta property="og:title" content="'.$post->post_title.'" />';
echo '<meta name="twitter:title" content="'.$post->post_title.'" />';
}
if (!empty($product_seo_description)) {
echo '<meta name="description" content="'.strip_tags($product_seo_description).'" />';
echo '<meta property="og:description" content="'.strip_tags($product_seo_description).'" />';
echo '<meta name="twitter:description" content="'.strip_tags($product_seo_description).'" />';
} else {
echo '<meta name="description" content="'.strip_tags($meta_desc).'" />';
echo '<meta property="og:description" content="'.strip_tags($meta_desc).'" />';
echo '<meta name="twitter:description" content="'.strip_tags($meta_desc).'" />';
}
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 name="twitter:card" content="summary" />';
echo '<meta name="twitter:image" content="'.$image[0].'" />';
echo '<meta itemprop="image" content="'.$image[0].'" />';
}
}
add_action('wp_head', 'woocommerce_seo');
Et voilà !
En deux coups de cuillère à pot vous disposez à présent des meta SEO pour vos produits WooCommerce. N’hésitez pas à ajouter une balise hreflang si votre produit est disponible dans une autre langue, ainsi qu’améliorer les balises Open Graph de votre site !
Imprimer
Laisser un commentaire