Menu

Recommandation SEO

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.

Le tutoriel en vidéo

Comment ça marche ?

Pour utiliser « Recommandation SEO », suivez les étapes ci-dessous.

  1. Pour accéder à l'application « Recommandation SEO », connectez-vous à EdgeSEO puis cliquez sur le bouton « Configurer ».
  2. Pour ajouter une nouvelle recommandation SEO, cliquez sur le bouton « Ajouter une recommandation » en haut à droite.
  3. Indiquez le nom et l’objectif de votre recommandation dans les champs « Nommer votre recommandation SEO » et « Objectif ».
  4. Cochez l'option CSR si vous souhaitez que vos recommandations soient appliquées si vous faites de la réhydratation JavaScript. Pour en savoir plus sur le CSR, cliquez ici.
  5. Cliquez sur le bouton « Étape suivante ».
  6. Configurez la cible sur laquelle vous souhaitez déployer votre recommandation. (💡 Comprendre le concept de cible)
    1. Cliquez sur le bouton « Créer ma première cible ».
    2. Sélectionnez et paramétrez le type de cible que vous souhaitez ajouter.
  7. Créez des variables (💡 Comprendre les différents types de variables). Cette étape est optionnelle.
    1. Cliquez sur le bouton « Ajouter une variable ».
    2. Sélectionnez et paramétrez les types de variables que vous souhaitez ajouter. (💡 Voir les différents types de variables)
  8. Configurez une ou plusieurs recettes SEO. (💡 Voir comment mettre en forme une variable)
  9. Cliquez sur le bouton « Enregistrer la recommandation ».
  10. Vérifiez que les modifications sont bien appliquées sur vos URLs.

Les recettes SEO

Balise title

keyboard_arrow_down

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 ?

  1. Si la recette title n'est pas configurée, nous ne réalisons aucune action.
  2. Si vous ajoutez un contenu dans la recette title, nous remplaçons le contenu existant de la balise title par celui que vous avez renseigné.
  3. Si vous ajoutez un contenu dans la colonne title et qu'il n'y a pas de balise title dans le code source de votre page, nous ajoutons la balise title avec le contenu que vous avez renseigné.

Exemple

Contenu de votre balise title

Mon super titre avec un émoji 🚀

Résultat dans le code source

1<!DOCTYPE html>
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>

Balise meta-description

keyboard_arrow_down

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 ?

  1. Si la recette n'est pas configurée, nous ne réalisons aucune action.
  2. Si vous ajoutez un contenu dans la recette meta-description, nous remplaçons le contenu existant de la balise meta description par celui que vous avez renseigné.
  3. Si vous ajoutez un contenu dans la recette meta-description et qu'il n'y a pas de balise meta description dans le code source de votre page, nous ajoutons la balise meta description avec le contenu que vous avez renseigné.

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 html>
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>

Balise canonical

keyboard_arrow_down

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 ?

  1. Si la recette canonical n'est pas configurée, nous ne réalisons aucune action.
  2. Si vous ajoutez une url dans la recette canonical, nous remplaçons le contenu existant de la balise canonical par celui que vous avez renseigné.
  3. Si vous ajoutez une url dans la recette canonical et qu'il n'y a pas de balise canonical dans le code source de votre page, nous ajoutons la balise canonical avec le contenu que vous avez renseigné.

Exemple

URL de la balise canonical

https://www.edgeseo.io

Résultat dans le code source

1<!DOCTYPE html>
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>

Balise meta-robots

keyboard_arrow_down

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 ?

  1. Si la recette meta-robots est vide, nous ne réalisons aucune action.
  2. Si vous cochez des propriétés dans la recette meta-robots, nous remplaçons le contenu existant de la balise meta robots avec les propriétés que vous avez cochez dans la colonne meta-robots.
  3. Si vous cochez des propriétés dans la colonne meta-robots et qu'il n'y a pas de balise meta robots dans le code source de votre page, nous ajoutons la balise meta robots avec les propriétés que vous avez cochez dans la colonne meta-robots.

Exemple

meta-robots

index,follow

Résultat dans le code source

1<!DOCTYPE html>
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>

Balise hn

keyboard_arrow_down

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 ?

  1. Si les champs sélecteur CSS et contenu de votre balise hn sont vides, nous ne réalisons aucune action.
  2. Si vous renseignez les champs sélecteur CSS et contenu de votre balise hn, nous remplaçons le contenu texte de la balise hn ciblé dans le champ sélecteur CSS avec le contenu du champ contenu de votre balise hn

Exemple

Sélecteur CSSContenu de votre balise hn
h1.maClassMon nouveau titre 😍

Résultat dans le code source

1<!DOCTYPE html>
2<html>
3<head>
4    
5</head>
6<body>
7    <h1 class="maClass">Mon nouveau titre 😍</h1>
8</body>
9</html>

Balise hreflang

keyboard_arrow_down

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 ?

  1. Si le champ hreflang-defaut est vide, nous ne réalisons aucune action.
  2. Si vous avez renseigné le champ hreflang-defaut, nous ajoutons une balise hreflang="x-default" avec le contenu de la colonne hreflang-defaut.
  3. Si les champs Code pays et URL sont vides, nous ne réalisons aucune action.
  4. Si vous avez renseigné les champs Code pays et URL, nous ajoutons une balise link rel="alternate" hreflang="Code pays" href="URL"> avec les contenus des champs Code pays et URL.

Exemple

hreflang-defautCode PaysURL
https://url-defaut.comenhttps://url-defaut.com/en

Résultat dans le code source

1<!DOCTYPE html>
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>

Balise content-html

keyboard_arrow_down

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 ?

  1. Si les champs sélecteurs CSS, action et contenu HTML sont vides, nous ne réalisons aucune action.
  2. Si vous renseignez les champs sélecteurs CSS, action et contenu HTML, nous ajoutons le contenu <html> présent dans le champ contenu HTML dans la zone ciblée par les champs sélecteurs CSS et action

Exemple

html-targethtml-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 html>
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 html>
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>

Suppression de balises

keyboard_arrow_down

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 ?

  1. Si le champ Sélecteurs CSS ciblés est vide, nous ne réalisons aucune action.
  2. Si vous ajoutez un sélecteur CSS dans le champ Sélecteurs CSS ciblés, nous supprimons le contenu html ciblé par le sélecteur.

Exemple

Sélecteurs CSS ciblés

span.maClass2 , h3

Code source original

1<!DOCTYPE html>
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 html>
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>

Balise Switcher

keyboard_arrow_down

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 ?

  1. Si les champs Sélecteur CSS et Nouvelle balise sont vides, nous ne réalisons aucune action.
  2. Si vous renseignez les champs Sélecteur CSS et Nouvelle balise, nous remplaçons la balise html ciblé dans le champ Sélecteur CSS par la balise renseignée dans la colonne Nouvelle balise.

Exemple

Sélecteur CSSNouvelle balise
h1.maClassCspan

Code source original

1<!DOCTYPE html>
2<html>
3<head></head>
4<body>
5    <h1 class="maClass">Mon nouveau titre 😍</h1>
6</body>
7</html>


Code source modifié

1<!DOCTYPE html>
2<html>
3<head></head>
4<body>
5    <span class="maClass">Mon nouveau titre 😍</span>
6</body>
7</html>

Obfuscation de lien

keyboard_arrow_down

La recette Obfuscation de lien permet d’obfusquer un lien a href=”” en ciblant celui-ci via un sélecteur CSS.

Comment ça marche ?

  1. Si le champ Sélecteurs CSS ciblés est vide, nous ne réalisons aucune action.
  2. Si vous ajoutez un sélecteur CSS dans le champ Sélecteurs CSS ciblés, nous offusquons le lien ciblé par le sélecteur.

Exemple

Sélecteurs CSS ciblés

a[href="/mentions-legales"]

Code source original

1<!DOCTYPE html>
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 html>
2<html>
3<head></head>
4<body>
5    <div class="main">
6			<span rel="aHR0cHM6Ly9mci5iZW5ldHRvbi5jb20vcHJpdmFjeS9wcml2YWN5Lmh0bWw=">Mentions legales</span>
7		</div>
8</body>
9</html>

Données structurées <schema.org>

keyboard_arrow_down

La recette Données structurées <schema.org> permet d’ajouter des données structurées de type schema.org.

Comment ça marche ?

  1. Si le champ Ajouter vos données structurées de type schema.org est vide, nous ne réalisons aucune action.
  2. Si vous ajoutez des données structurées dans le champ Ajouter vos données structurées de type schema.org, nous les ajoutons dans la balise head de la page.

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 html>
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>

Données structurées <open graph>

keyboard_arrow_down

La recette Données structurées <open graph> permet d’ajouter des données structurées de type open graph.

Comment ça marche ?

  1. Si les champs Nom et Contenu sont vides, nous ne réalisons aucune action.
  2. Si vous ajoutez des données structurées dans les champs Nom et Contenu, nous les ajoutons dans la balise head de la page.

Exemple

NomContenu
og:titleTitle de la page

Résultat dans le code source

1<!DOCTYPE html>
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>

Twitter Card

keyboard_arrow_down

La recette Twitter Card permet d’ajouter des données structurées de type open Twitter card.

Comment ça marche ?

  1. Si les champs Nom et Contenu sont vides, nous ne réalisons aucune action.
  2. Si vous ajoutez des données structurées dans les champs Nom et Contenu, nous les ajoutons dans la balise head de la page.

Exemple

NomContenu
twitter:titleTitle de la page

Résultat dans le code source

1<!DOCTYPE html>
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>