Optimisation pour les moteurs de recherche : implémentation de balises méta pour le contenu statique et dynamique dans votre boutique Nuxt.js

Vérifiez cet article dans mes notes Web !

Et je veux simplement vous rappeler que vous pouvez consulter la démo de ce que nous construisons ici et le code source ici.

Dans cet article, parlons un peu du SEO (Search Engine Optimisation). Pourquoi le référencement est-il important pour notre boutique e-commerce ? C'est simple, nous voulons que notre boutique ne soit pas seulement un catalogue de produits, mais nous voulons aussi que les utilisateurs puissent trouver nos produits simplement en naviguant sur Internet. Pour cela, nous avons besoin que notre boutique de commerce électronique obtienne un classement plus élevé que d'éventuels concurrents, et pour y parvenir, nous devons ajouter des balises méta à chaque page, des pages statiques et dynamiques également.

Search Engine Optimization (SEO) est la pratique consistant à optimiser les sites Web et les pages Web pour améliorer leur visibilité et leur classement dans les pages de résultats des moteurs de recherche (SERP). Cela implique une combinaison de techniques, notamment l'optimisation sur la page, le référencement technique et les stratégies hors page, pour rendre les sites Web plus faciles à découvrir et plus conviviaux pour les moteurs de recherche et les utilisateurs.

Les balises méta sont des extraits de texte qui décrivent le contenu d'une page et elles ne sont pas visibles par les utilisateurs sur la page Web elle-même. Les moteurs de recherche utilisent des balises méta pour comprendre le sujet, la pertinence et d'autres attributs d'une page Web, ce qui peut influencer son classement et sa visibilité dans les résultats de recherche. Bien que les balises méta ne soient pas à elles seules le seul facteur déterminant le classement dans les recherches, elles jouent un rôle crucial dans l'optimisation des pages Web pour un meilleur référencement.

Voici 5 balises méta courantes et une brève description pour chacune :

1. Balise de titre : Cette balise spécifie le titre de la page Web, qui apparaît dans l'onglet du navigateur et comme titre cliquable dans les résultats de recherche. Il doit décrire avec précision et concision le contenu de la page.
2. Balise méta-description : Cette balise fournit un bref résumé du contenu de la page, qui peut être affiché sous forme d'extrait dans les résultats de recherche. Une méta description bien rédigée peut inciter les utilisateurs à cliquer sur la page.
3. Balise de mots-clés méta : Bien qu'elle ne soit plus aussi importante qu'elle l'était autrefois, cette balise vous permet de spécifier des mots-clés pertinents pour la page, ce qui peut potentiellement aider les moteurs de recherche à comprendre le sujet de la page.
4. Balise Meta Robots : Cette balise fournit des instructions aux robots des moteurs de recherche sur la façon de gérer la page, par exemple s'il faut l'indexer, suivre des liens ou appliquer d'autres directives.
5. Balises Open Graph et Twitter Card : Ce sont des balises méta utilisées pour le partage sur les réseaux sociaux, vous permettant de contrôler la façon dont le contenu de la page apparaît lorsqu'il est partagé sur des plateformes comme Facebook, Twitter et autres.

Si vous avez besoin d'en savoir plus sur l'implémentation de balises méta dans les projets Nuxt.js, vous pouvez consulter l'article « Balises méta simples ».

Super, nous pouvons maintenant commencer à implémenter ces étiquettes de viande dans notre boutique en ligne Nuxt.js.

1. Configuration des balises méta pour les pages statiques dans Nuxt.js

C'est la partie la plus simple car nous savons ce qui sera rendu sur chaque page spécifique et nous pouvons définir ces balises.

Nuxt.js nous permet d'ajouter une méthode head dans le composant, mais auparavant nous devions mettre à jour la création du composant et utiliser la fonction "defineNuxtComponent", nous pouvons ensuite ajouter une fonction "head" qui renverra des méta, des scripts et liens.

export default defineNuxtComponent({
    name: "Main",
    head() {
        return {
            title: `TryBuy Store`,
            meta: [
                { name: 'description', content: `Discover the latest fashion trends at TryBuy Store. Our online clothing store offers a wide range of stylish and affordable apparel for men, women, and children. Shop our curated collection of dresses, tops, jeans, accessories, and more from top brands. Find inspiration for your perfect look with our style guides and easy returns policy.` },
                { name: 'keywords', content: `online clothing store, fashion trends, women's apparel, men's apparel, kids clothes, dresses, tops, jeans, accessories, affordable fashion, style guide, easy returns` },
                { property: 'og:title', content: `TryBuy Store` },
                { property: 'og:description', content: `Discover the latest fashion trends at TryBuy Store. Our online clothing store offers a wide range of stylish and affordable apparel for men, women, and children. Shop our curated collection of dresses, tops, jeans, accessories, and more from top brands. Find inspiration for your perfect look with our style guides and easy returns policy.`},
                { property: 'og:url', content: `https://trybuy.com/` },
                { property: 'site_name', content: 'TryBuy Store' },
            ],
            link: [
                { rel: 'canonical', href: `https://trybuy.com/` },
            ],
        }
    },
})

Comme mentionné au début de cet article, nous définissons le lien canonique de notre page, la description et les mots-clés. De plus, nous ajoutons des balises "og" qui définissent la vue de notre page dans les réseaux sociaux.

Vous devez modifier toutes ces données sur votre site Web spécifique et faire les mêmes étapes pour chacune de vos pages statiques comme la page "boutique" ou "à propos de nous". Et passons à autre chose !

2. Génération de balises méta dynamiques basées sur le contenu de la page

Nous aurons des pages générées dynamiquement pour chaque produit, et nous ne pouvons pas définir de balises méta pour chaque page séparément, c'est pourquoi nous devons configurer notre page "produit" afin qu'elle puisse générer une sorte de données dans ces balises pour chaque page. Faisons-le !

Comme précédemment, nous ajouterons une fonction "defineNuxtComponent" en tant que wrapper de composant, puis créerons une fonction head comme précédemment, et ajouterons "nuxtApp en tant que paramètre. "nuxtApp" est un objet qui donne accès à divers utilitaires spécifiques à Nuxt et le contexte de l'instance d'application actuelle, avec son aide, nous obtiendrons notre paramètre d'itinéraire et récupérerons les données du produit. Nous utiliserons également notre magasin de produits et ajouterons dynamiquement toutes les métadonnées du produit à la page.

async head(nuxtApp) {
    const productId = nuxtApp.$router.currentRoute._value.params.product;
    const productsStore = useProductsStore();
    productsStore.aGetAllProducts();
    const product = productsStore.gProductsList.find(item => item.id == productId);
    return {
        title: `TryBuy Store | ${product.name}`,
        meta: [
            { name: 'description', content: `${product.description}` },
            { name: 'keywords', content: `${product.description}` },
            { property: 'og:title', content: `TryBuy Store | ${product.name}` },
            { property: 'og:description', content: `${product.description}`},
            { property: 'og:url', content: `https://trybuystore.com/shop/${product.id}` },
            { property: 'site_name', content: 'TryBuy Store' },
        ],
        link: [
            { rel: 'canonical', href: `https://trybuystore.com/shop/${product.id}` },
        ],
    }
},

How it will work under the hood? When we generate our product page nuxt will get the product id, then fetch data about the product and return meta with all information needed. As many product pages we will generate, as many meta tags will be dynamically added. And that is crucial for our SEO.

How can we test it? We will check it in our next articles when we will configure our Nuxt generation process.

In conclusion, implementing proper meta tags is an essential step for optimizing your Nuxt.js e-commerce store for search engines. By setting up meta tags for static pages and generating dynamic meta tags based on product content, you can ensure that your website provides accurate and relevant information to search engines, improving its visibility and ranking in search results. This, in turn, can lead to increased organic traffic and potentially more sales for your online store. While meta tags are just one aspect of SEO, they play a crucial role in helping search engines understand and properly index your website's content.

If you need a source code for this tutorial you can get it here.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!