L’application « Recommandation SEO » vous permet de déployer votre roadmap SEO grâce à des « recettes SEO » adaptées à vos enjeux. Par exemple, vous pourrez générer des données structurées directement à partir des informations présentes dans le code HTML de votre page, ou encore modifier une balise <title> en récupérant la couleur d’un produit… et bien plus encore.
Pour utiliser « Recommandation SEO », suivez les étapes ci-dessous.
La recette title permet d’ajouter ou modifier le contenu de la balise title présent dans le code source de votre page.
Comment ça marche ?
Exemple
Contenu de votre balise title |
---|
Mon super titre avec un émoji 🚀 |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>Mon super titre avec un émoji 🚀</title>
6</head>
7<body>
8 <!-- Le contenu de votre page -->
9</body>
10</html>
La recette meta-description permet d’ajouter ou modifier le contenu de la balise meta description présent dans le code source de votre page.
Comment ça marche ?
Exemple
Contenu de la balise meta-description |
---|
Mon nouvelle description qui va améliorer mon CTR 🤑 dans les #SERP |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <meta name="description" content="Mon nouvelle description qui va améliorer mon CTR 🤑 dans les #SERP">
5</head>
6<body>
7 <!-- Le contenu de votre page -->
8</body>
9</html>
La recette canonical permet d’ajouter ou modifier le contenu de la balise canonical présent dans le code source de votre page.
Comment ça marche ?
Exemple
URL de la balise canonical |
---|
https://www.edgeseo.io |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <link rel="canonical" href="https://www.edgeseo.io">
5</head>
6<body>
7 <!-- Le contenu de votre page -->
8</body>
9</html>
La recette meta-robots permet d’ajouter ou modifier le contenu de la balise meta robots présent dans le code source de votre page.
Vous pouvez cocher les propriétés index / noindex et follow / nofollow.
Comment ça marche ?
Exemple
meta-robots |
---|
index,follow |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <meta name="robots" content="index, follow">
5</head>
6<body>
7 <!-- Le contenu de votre page -->
8</body>
9</html>
La recette hn permet de paraméter les champs sélecteur CSS et contenu de votre balise hn pour remplacer le contenu texte d’une ou plusieurs balises hn présentent dans le code source de votre page.
Comment ça marche ?
Exemple
Sélecteur CSS | Contenu de votre balise hn |
---|---|
h1.maClass | Mon nouveau titre 😍 |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4
5</head>
6<body>
7 <h1 class="maClass">Mon nouveau titre 😍</h1>
8</body>
9</html>
La recette hreflang permet de paraméter les champs hreflang-defaut, Code pays et URL pour implémenter des balises hreflang sur vos pages.
Comment ça marche ?
Exemple
hreflang-defaut | Code Pays | URL |
---|---|---|
https://url-defaut.com | en | https://url-defaut.com/en |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <link rel="alternate" hreflang="en" href="https://url-defaut.com/en">
5 <link rel="alternate" hreflang="x-default" href="https://url-defaut.com">
6</head>
7<body>
8
9</body>
10</html>
La recette content-htmlpermettent d’ajouter du contenu html dans votre page.
Le champ sélecteurs CSS permet de cibler la zone où vous souhaitez ajouter le contenu html via un sélecteur
Le champ action permet de cibler où vous souhaitez injecter votre contenu html via un mot clé
Le champ contenu HTML permet d’indiquer le contenu html à ajouter dans la zone ciblée.
Comment ça marche ?
Exemple
html-target | html-content |
---|---|
prepend_inside div.maClass | <p>Mon super contenu optimisé pour le SEO</p> <div class=”link”> <a href=”#”>ancre de lien 1</a><a href=”#”>ancre de lien 2</a> </div> |
Code source original
1<!DOCTYPE >
2<html>
3<head>
4
5</head>
6<body>
7 <div class="maClass">
8 <p>un pararagraphe</p>
9 </div>
10</body>
11</html>
Code source modifié
1<!DOCTYPE >
2<html>
3<head>
4
5</head>
6<body>
7 <div class="maClass">
8 <p>Mon super contenu optimisé pour le SEO</p>
9 <div class=”link”>
10 <a href=”#”>ancre de lien 1</a>
11 <a href=”#”>ancre de lien 2</a>
12 </div>
13 <p>un pararagraphe</p>
14 </div>
15</body>
16</html>
Focus sur les mots-clés pour cibler une zone
Pour illustrer le comportement de chaque mot-clé, nous allons partir de ce code html.Nous verrons en fonction du mot-clé où se positionne le contenu html que nous souhaitons ajouter dans la page.
prepend_inside
Ajoute le contenu html au début de l'élément ciblé dans le DOM.
Résultat avec prepend_inside.
1<!-- Code original -->
2<div class="maClass">
3 <p>Contenu existant</p>
4</div>
5
6<!-- Code ajouté avec le mot clé prepend_inside div.maClass -->
7<div class="maClass">
8 <p>Mon super contenu optimisé pour le SEO</p>
9 <div class=”link”>
10 <a href=”#”>ancre de lien 1</a>
11 <a href=”#”>ancre de lien 2</a>
12 </div>
13
14 <p>Contenu existant</p>
15</div>
insert_after_outside
Ajoute le contenu html immédiatement après l'élément ciblé dans le DOM.
Résultat avec insert_after_outside.
1<!-- Code original -->
2<div class="maClass">
3 <p>Contenu existant</p>
4</div>
5
6<!-- Code ajouté avec le mot clé insert_after_outside div.maClass -->
7<div class="maClass">
8 <p>Contenu existant</p>
9</div>
10<p>Mon super contenu optimisé pour le SEO</p>
11<div class=”link”>
12 <a href=”#”>ancre de lien 1</a>
13 <a href=”#”>ancre de lien 2</a>
14</div>
append_inside
Ajoute le contenu html à la fin de l'élément ciblé dans le DOM.
Résultat avec append_inside.
1<!-- Code original -->
2<div class="maClass">
3 <p>Contenu existant</p>
4</div>
5
6<!-- Code ajouté avec le mot clé append_inside div.maClass -->
7<div class="maClass">
8 <p>Contenu existant</p>
9
10 <p>Mon super contenu optimisé pour le SEO</p>
11 <div class=”link”>
12 <a href=”#”>ancre de lien 1</a>
13 <a href=”#”>ancre de lien 2</a>
14 </div>
15</div>
insert_before_outside
Ajoute le contenu html avant l'élément ciblé dans le DOM.
Résultat avec insert_before_outside.
1<!-- Code original -->
2<div class="maClass">
3 <p>Contenu existant</p>
4</div>
5
6<!-- Code ajouté avec le mot clé insert_before_outside div.maClass -->
7<p>Mon super contenu optimisé pour le SEO</p>
8<div class=”link”>
9 <a href=”#”>ancre de lien 1</a>
10 <a href=”#”>ancre de lien 2</a>
11</div>
12<div class="maClass">
13 <p>Contenu existant</p>
14</div>
La recette Suppression de balises permet de supprimer du contenu html de votre page en ciblant celui-ci via un sélecteur CSS.
Comment ça marche ?
Exemple
Sélecteurs CSS ciblés |
---|
span.maClass2 , h3 |
Code source original
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <div class="main">
6 <h1>Mon titre 🍿</h1>
7 <span class="maClass2">
8 <h2>Contenu duppliqué</h2>
9 <p>Intellectum est enim mihi quidem in multis, et maxime in me ipso, sed paulo ante in omnibus, cum M</p>
10 </span>
11 <p>Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre</p>
12 <h3>Mon titre qui ne sert à rien 😉</h3>
13 <a href="#">coucou !</a>
14 </div>
15</body>
16</html>
Code source modifié
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <div class="main">
6 <h1>Mon titre 🍿</h1>
7
8 <p>Marcellum senatui reique publicae concessisti, commemoratis praesertim offensionibus, te auctoritatem huius ordinis dignitatemque rei publicae tuis vel doloribus vel suspicionibus anteferre</p>
9
10 <a href="#">coucou !</a>
11 </div>
12</body>
13</html>
La recette Balise Switcher permettent de modifier une balise html avec une autre.
Le champ Sélecteur CSS permet de cibler la balise html que l’on souhaite modifier via un sélecteur CSS
La champ Nouvelle balise permet d’indiquer la balise html que l’on souhaite utiliser pour remplacer la balise <html> ciblée.
Comment ça marche ?
Exemple
Sélecteur CSS | Nouvelle balise |
---|---|
h1.maClassC | span |
Code source original
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <h1 class="maClass">Mon nouveau titre 😍</h1>
6</body>
7</html>
Code source modifié
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <span class="maClass">Mon nouveau titre 😍</span>
6</body>
7</html>
La recette Obfuscation de lien permet d’obfusquer un lien a href=”” en ciblant celui-ci via un sélecteur CSS.
Comment ça marche ?
Exemple
Sélecteurs CSS ciblés |
---|
a[href="/mentions-legales"] |
Code source original
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <div class="main">
6 <a href="/mentions-legales">Mentions legales</a>
7 </div>
8</body>
9</html>
Code source modifié
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <div class="main">
6 <span rel="aHR0cHM6Ly9mci5iZW5ldHRvbi5jb20vcHJpdmFjeS9wcml2YWN5Lmh0bWw=">Mentions legales</span>
7 </div>
8</body>
9</html>
La recette Données structurées <schema.org> permet d’ajouter des données structurées de type schema.org.
Comment ça marche ?
Exemple
Ajouter vos données structurées de type schema.org |
---|
{"@context": "http://schema.org/","@type": "Recipe","name": ""},{"@context": "http://schema.org","@type": "WebPage",} |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <script type="application/ld+json">
5 {
6 "@context": "http://schema.org/",
7 "@type": "Recipe",
8 "name": ""
9 },
10 {
11 "@context": "http://schema.org",
12 "@type": "WebPage",
13 }
14 </script>
15
16</head>
17<body>
18 <!-- Le contenu de votre page -->
19</body>
20</html>
La recette Données structurées <open graph> permet d’ajouter des données structurées de type open graph.
Comment ça marche ?
Exemple
Nom | Contenu |
---|---|
og:title | Title de la page |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <meta property="og:title" content="Titre de la page">
5
6</head>
7<body>
8 <!-- Le contenu de votre page -->
9</body>
10</html>
La recette Twitter Card permet d’ajouter des données structurées de type open Twitter card.
Comment ça marche ?
Exemple
Nom | Contenu |
---|---|
twitter:title | Title de la page |
Résultat dans le code source
1<!DOCTYPE >
2<html>
3<head>
4 <meta name="twitter:title" content="Titre de la page">
5
6</head>
7<body>
8 <!-- Le contenu de votre page -->
9</body>
10</html>