Menu

SEO recommendation

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.

EdgeSEO Academy
→
Application documentation
→
SEO recommendation

The video tutorial

How does it work?

To use SEO Recommendation, follow the steps below.

  1. To access the "SEO Recommendation" application, log on to EdgeSEO and click on the "Configure" button.
  2. To add a new SEO recommendation, click on the "Add a recommendation" button in the top right-hand corner.
  3. Enter the name and purpose of your recommendation in the "Name your SEO recommendation" and "Purpose" fields.
  4. Check the CSR option if you want your recommendations to be applied if you do JavaScript rehydration. To find out more about CSR, click here.
  5. Click on the "Next step" button.
  6. Configure the target on which you wish to deploy your recommendation. (💡 Understanding the target concept)
    1. Click on the "Create my first target" button.
    2. Select and set the type of target you wish to add.
  7. Create variables (💡 Understanding the different types of variables). This step is optional.
    1. Click on the "Add a variable" button.
    2. Select and set the types of variables you wish to add (💡 S ee the different types of variables).
  8. Set up one or more SEO recipes (💡 S ee how to format a variable)
  9. Click on the "Save recommendation" button.
  10. Check that the changes have been applied to your URLs.

SEO recipes

Title tag

keyboard_arrow_down

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?

  1. If the recipe title recipe is not configured, no action is taken.
  2. If you add content to the recipe titletag, we replace the existing content of the title tag with the content you've entered.
  3. If you add content to the title column and there is no title tag in your page's source code, we add the title tag with the content you've entered.

‍Example

Content of your title tag

My great title with an emoji 🚀

Result in source code

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>

Meta-description tag

keyboard_arrow_down

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?

  1. If the recipe is not configured, no action is taken.
  2. If you add content to the recipe meta-descriptiontag, we replace the existing content of the meta description tag with the content you entered.
  3. If you add content to the recipe meta-description and there is no meta description tag in your page's source code, we add the meta description tag with the content you've entered.

Example

Content of the meta-description tag

My new description that will improve my CTR 🤑 in #SERP

Result in source code

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>

Canonical tag

keyboard_arrow_down

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?

  1. If the canonical recipe is not configured, no action is taken.
  2. If you add a canonicalwe replace the existing content of the canonical tag with the content you entered.
  3. If you add a canonical and there is no canonical tag in your page's source code, we'll add the canonical tag with the content you've entered.

Example

URL for canonical tag

https://www.edgeseo.io

Result in source code

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>

Meta-robots tag

keyboard_arrow_down

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?

  1. If the meta-robots recipe is empty, we perform no action.
  2. If you check properties in the recipe meta-robotsrecipe, we replace the existing content of the meta robots tag with the properties you've checked in the meta-robots.
  3. If you check properties in the meta-robots column and there is no meta robots tag in your page's source code, we add the meta robots tag with the properties you've checked in the meta-robots.

Example

meta-robots

index,follow

Result in source code

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>

Tag hn

keyboard_arrow_down

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?

  1. If the CSS selector and fields content of your hn tag are empty, no action is taken.
  2. If you fill in the CSS selector and fields fields of your hntag, we replace the text content of the hn tag in the CSS selector selector field with the content of the content of your hn tag

Example

CSS selectorContent of your hn tag
h1.maClassMy new title 😍

Result in source code

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

Beacon hreflang

keyboard_arrow_down

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?

  1. If the hreflang-default field is empty, no action is taken.
  2. If you have filled in the hreflang-defautfield, we add a hreflang="x-default" tag tag with the contents of the hreflang-default column.
  3. If the Country code and URL fields are empty, no action is taken.
  4. If you have filled in the fields Country code and URLfields, we add a link rel="alternate" hreflang="" tag.Country code" href="URL"with the contents of the Country code and URL fields.

Example

hreflang-defautCountry codeURL
https://url-defaut.comathttps://url-defaut.com/en

Result in source code

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>

content-html tag

keyboard_arrow_down

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?

  1. If the CSS selectors, action and HTML content selectors are empty, we perform no 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

Example

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>

Original source code

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>


Modified source code

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

Deleting tags

keyboard_arrow_down

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?

  1. If the Targeted CSS selectors field is empty, no action is taken.
  2. If you add a CSS selector to the Targeted CSS selectors, we remove the html content targeted by the selector.

Example

Targeted CSS selectors

span.maClass2 , h3

Original source code

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>


Modified source code

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>

Switcher beacon

keyboard_arrow_down

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?

  1. If the CSS selector and fields New tag fields are empty, no action is taken.
  2. If you fill in the CSS selector and New tagfields, we replace the html tag in the CSS selector field with the tag entered in the New tag column.

Example

CSS selectorNew tag
h1.myClassCspan

Original source code

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


Modified source code

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

Link obfuscation

keyboard_arrow_down

The recipe Link obfuscation recipe obfuscates an a href="" link by targeting it via a CSS selector.

How does it work?

  1. If the Targeted CSS selectors field is empty, no action is taken.
  2. If you add a CSS selector to the Targeted CSS selectors, we offend the link targeted by the selector.

Example

Targeted CSS selectors

a[href="/mentions-legales"]

Original source code

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>


Modified source code

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.

How does it work?

  1. If the Add your schema.org structured data field is empty, no action is taken.
  2. If you add structured data in the Add your schema.org structured data, we add them in the head tag of the page.

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

How does it work?

  1. If the Name and Content fields are empty, no action is taken.
  2. If you add structured data to the Name and Content, we add them in the head tag of the page.

Example

NameContents
og:titlePage title

Result in source code

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

Recipe Twitter Card recipe is used to add structured data of the open Twitter card type.

How does it work?

  1. If the Name and Content fields are empty, no action is taken.
  2. If you add structured data to the Name and Content, we add them in the head tag of the page.

Example

NameContents
twitter:titlePage title

Result in source code

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>
Legal NoticePrivacy PolicyContact usWe're hiring
TwitterLinkedInNewsletter