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.
To use SEO Recommendation, follow the steps below.
The recipe title allows you to add or modify the content of the title tag in your page's source code.
How does it work?
Example
Content of your title tag |
---|
My great title with an emoji 🚀 |
Result in source code
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>
The recipe meta-description recipe lets you add or modify the content of the meta description tag in your page's source code.
How does it work?
Example
Content of the meta-description tag |
---|
My new description that will improve my CTR 🤑 in #SERP |
Result in source code
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>
The recipe canonical recipe lets you add or modify the content of the canonical tag in your page's source code.
How does it work?
Example
URL for canonical tag |
---|
https://www.edgeseo.io |
Result in source code
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>
The recipe meta-robots recipe lets you add or modify the content of the meta robots tag in your page's source code.
You can check the index / noindex and follow / nofollow properties.
How does it work?
Example
meta-robots |
---|
index,follow |
Result in source code
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>
The hn recipe allows you to configure the fields CSS selector selector and fields fields of your hn tag tag to replace the text content of one or more hn tags in your page's source code.
How does it work?
Example
CSS selector | Content of your hn tag |
---|---|
h1.maClass | My new title 😍 |
Result in source code
1<!DOCTYPE >
2<html>
3<head>
4
5</head>
6<body>
7 <h1 class="maClass">Mon nouveau titre 😍</h1>
8</body>
9</html>
The hreflang recipe is used to set the parameters of the fields hreflang-default, Country code and URL fields to implement hreflang tags on your pages.
How does it work?
Example
hreflang-defaut | Country code | URL |
---|---|---|
https://url-defaut.com | at | https://url-defaut.com/en |
Result in source code
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>
The content-htmlperm recipe lets you add html content content to your page.
The CSS selectors field allows you to target the area where you wish to add the html content via a selector
The field action allows you to target where you want to inject your content html via a keyword
The HTML content content field is used to indicate html content content to be added to the targeted zone.
How does it work?
Example
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> |
Original source code
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>
Modified source code
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 on keywords to target an area
To illustrate the behaviour of each keyword, we will start with this code htmlWe'll see where the content is positioned, depending on the keyword. html content we wish to add to the page.
prepend_inside
Adds content html content at the beginning of the targeted DOM element.
Result with 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
Adds content html content content immediately after the targeted element in the DOM.
Result with 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
Adds content html content to the end of the targeted DOM element.
Result with 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
Adds content html content content before the targeted element in the DOM.
Result with 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>
The recipe Delete tags recipe is used to delete html content content from your page by targeting it via a CSS selector.
How does it work?
Example
Targeted CSS selectors |
---|
span.maClass2 , h3 |
Original source code
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>
Modified source code
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>
The recipe Tag Switcher are used to modify an html tag with another.
The field CSS selector field is used to target the html tag you wish to modify via a CSS selector
La champ Nouvelle balise permet d’indiquer la balise html que l’on souhaite utiliser pour remplacer la balise <html> ciblée.
How does it work?
Example
CSS selector | New tag |
---|---|
h1.myClassC | span |
Original source code
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <h1 class="maClass">Mon nouveau titre 😍</h1>
6</body>
7</html>
Modified source code
1<!DOCTYPE >
2<html>
3<head></head>
4<body>
5 <span class="maClass">Mon nouveau titre 😍</span>
6</body>
7</html>
The recipe Link obfuscation recipe obfuscates an a href="" link by targeting it via a CSS selector.
How does it work?
Example
Targeted CSS selectors |
---|
a[href="/mentions-legales"] |
Original source code
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>
Modified source code
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.
How does it work?
Example
Add your schema.org structured data |
---|
{"@context": "http://schema.org/","@type": "Recipe","name": ""},{"@context": "http://schema.org","@type": "WebPage",} |
Result in source code
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.
How does it work?
Example
Name | Contents |
---|---|
og:title | Page title |
Result in source code
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>
Recipe Twitter Card recipe is used to add structured data of the open Twitter card type.
How does it work?
Example
Name | Contents |
---|---|
twitter:title | Page title |
Result in source code
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>