Anne-Laure, cliente WebForGood, photo générique representative

Anne-Laure

Cliente WebForGood - Mission SEO axée autour des corrections d'erreurs rencontrées dans la Google Search Console

Neal, client WebForGood, photo générique representative

Neal

Client pour un projet SEO e-commerce sous Shopify

Nom prénom

email

voice

description

rgpd

Recevez des conseils pertinents, sans engagement et en toute confidentialité.


Parlez-nous de votre projet

Autres Articles

7 conseils pour optimiser votre boutique e-commerce pour le référencement naturel

👉  Comment optimiser une boutique e-commerce pour le SEO : 7 conseils pour dresser un plan d'action ⚙️

7 conseils SEO pour optimiser son e-commerce

Référencement SEO pour les sites e-commerce

Analyse Google Search Console d'un site Shopify

### Durée : 34 minutes les 2 vidéos

Vérification et analyse du site avec / via la Google Search Console

*   Propriété de validation

*   Balise de vérification

*   Donnée GSC après migration de site

*   Utilisation des paramètres URLs pour rechercher dans Google

*   Redirections

*   Google cache

*   Tag de Google Analytics

<div itemscope itemprop="VideoObject" itemtype="https://schema.org/VideoObject">
<div itemprop="name"> ###### Vidéo 1, introduction :</div>
<meta itemprop="uploadDate" content="2022-02-05" />
<meta itemprop="duration" content="PT6M52S" />
<video src="https://video.webforgood.fr/Verifier-GSC-Shopify-6min.mp4" type="video/mp4" controls playsinline title="Vérification GSC" poster="/images/etude-cas-GSC-shopify-video1.jpg"></video>
<meta itemprop="interactionType" itemtype="https://schema.org/WatchAction" />
<link itemprop="embedUrl" href="/blog/analyse-seo-ecommerce/" />
<meta itemprop="contentUrl" content="https://video.webforgood.fr/Verifier-GSC-Shopify-6min.mp4" />
<meta itemprop="thumbnailUrl" content="/images/etude-cas-GSC-shopify-video1.jpg" />
</div>

###### Vidéo 2, le corps du sujet :

<video src="https://video.webforgood.fr/GSC-Shopify-28min.mp4" type="video/mp4" controls playsinline title="La Google Search Console d'une boutique Shopify" poster="/images/etude-cas-GSC-shopify-video2.jpg"></video>

> [✉️ Contactez-nous et partagez vos commentaires ](/contact/)

***

### Autres services SEO pour Shopify :

[Coaching E-commerce](/coaching-seo-pour-e-commerce/)

[Corrections des données structurées](/corrections-des-donnees-structurees/)

[Amélioration de la vitesse du site Shopify](/optimisation-de-la-vitesse-du-site-shopify/)

[Coaching Google Search Console](/google-search-console-coaching/)

***




2 vidéos / 34 minutes - Préparer une analyse SEO pour Shopify avec la Google Search Console. 

Pré-analyse SEO Shopify avec Google Search Console

Analyse d'un site e-commerce Shopify avec la Google Search Console

You might also like

Speed and performance bulk testing with PageSpeed Insights API

Bulk Testing with PageSpeed API for Speed and Performance. Conduct multiple tests and get median results.

Bulk Performance Test with PageSpeed Insights API

## Index up to 200 URLs per day rapidly

By WebForGood

This tutorial is for those who wish to test out the Google Indexing API. It's suitable for novice users, website managers and webmasters alike. The [original tutorial is in French language on WebForGood](https://webforgood.fr/blog/tutoriel-google-indexing-api-nodejs/ "Google indexing API tutorial in French") 🇫🇷

### Table of content

*   [Concept](#concept)
*   [Quota](#quota)
*   [Before you begin](#before-you-begin)
*   [Summary for agencies, webmasters & devs](#summary-for-agencies-webmasters--devs)
*   [Step by step tutorial](#step-by-step-tutorial)
    *   [1 - Get the source code](#1---get-the-source-code)
    *   [2 - Google Cloud Platform](#2---google-cloud-platform)
        \- [a) Create an account in Google Cloud Platform](#a-create-an-account-in-google-cloud-platform)
        \- [b) Create a new project](#b-create-a-new-project)
        \- [c) Go to API and services](#c-go-to-api-and-services)
        \- [d) Create Credentials](#d-create-credentials)
        \- [e) Create a Service account](#e-create-a-service-account)
        \- [f) Get the private JSON Key](#f-get-the-private-json-key)
        \- [g) The JSON Key content](#g-the-json-key-content)
    *   [3 - Google Search Console](#3---google-search-console)
        \- [a) Open the console](#a-open-the-console)
        \- [b) Settings](#b-settings)
        \- [c) Go to Users and Permissions](#c-go-to-users-and-permissions)
        \- [d) The Service Account email](#d-the-service-account-email)
    *   [4 - Run the indexing script](#4---run-the-indexing-script)
        \- [a) Gather the URLs](#a-gather-the-urls)
        \- [b) Run the code](#b-run-the-code)

### Concept

The aim is to tell Google about new or existing pages, and get their status updated or indexed as soon as possible. You can process multiple URLs (pages) without having to inspect them manually in Google Search Console.

### Quota

200 URLs per day

## Before you begin

Ideally, you would test the API if your website is not in the JobPosting or BroadcastEvent niches. <a href="https://developers.google.com/search/apis/indexing-api/v3/quickstart" rel="noopener noreferrer" target="_blank">As per Google, the API is reserved for JobPosting and BroadcastEvent websites.</a>

You will need the following tools installed on your computer (Mac and PC versions avaiable):

*   Visual Studio Code or equivalent [download from Visual Studio website](https://code.visualstudio.com/ "Visual Studio Code editor")

*   Node JS [Website of Node JS](https://nodejs.org/fr/ "Site de Node JS")

*   And Google Search Console: make sure it is configured for your website and that you have **Owner** rights. [Start page of Google Search Console](https://search.google.com/search-console "Google Search Console")

## Summary for agencies, webmasters & devs

\*If you find this summary too vague, you can read the detailed \*[*step by step tutorial below*](#etapes-detaillees-pour-debutants)

*   Clone this [GitHub repository](https://github.com/swalker-888/google-indexing-api-bulk "Github repo") and run the command "npm i"

```
npm i
```

*   Create an account with **Google Cloud Platform > Console** and then create a new project

*   Search for the [Indexing API](https://console.cloud.google.com/apis/library/browse?q=indexing%20api) in the Library

*   Activate the API **and** its key

*   Create and activate the "Service Account". You should get the **email address of the service account** under the Credentials section.

*   Add this email address as **owner** to your **Google Search Console**

*   Back to Google Cloud Platform, go to "IAM and admin" section, select Service Accounts in the vertical menu on the left handside

*   Click on that email address and go to the Keys tab. Add Key > Create New Key > Choose **format JSON**

*   Allow the private JSON key to download to your computer. Open it in the code editor and copy all of its content and paste it in `service_account.json` by replacing its content. Remember you have downloaded that file from GitHub

*   You are now ready to start **adding the URLs** of the pages you wish to update onto `urls.txt`. Do not leave any empty lines.

*   Open the terminal et run the command `node index.js`

Rince and repeat.

## Step by step tutorial

Assuming you have followed the ["before you begin section"](#avant-de-commencer), proceed with the following steps.

### 1 - Get the source code

a) Download the source code from [Github](https://github.com/swalker-888/google-indexing-api-bulk "Github repo") onto your computer.

![](https://d33wubrfki0l68.cloudfront.net/cdfa124dd7640220aca02ad4e4ee16d0fda62bf0/b9723/images/github-repo-google-indexing-api.png)

b) Create a folder, let's call it "google-indexing-api" for ex, it doesn't really matter what you call it.

c) Click on Download from GitHub and unzip it in the folder you have just created. It should contain 5 files and 1 folder called node_modules.

*Here's an example:*

![](https://d33wubrfki0l68.cloudfront.net/776f43215aa32044d503d3c867c1a905ae56a9c5/89ae2/images/node-modules-et-le-script.png)

d) Open the folder with Visual Studio Code

Then open the terminal small window.

![](https://d33wubrfki0l68.cloudfront.net/46854108377936e89760367398b778a4bb2ae168/4e78e/images/ouvrir-terminal-command.png)

And run the command "npm i" to install the required modules. This is important.

![](https://d33wubrfki0l68.cloudfront.net/4a7a06a2ab67c8efb1f5f2308467b766571120e0/7ec7b/images/apres-ouverture-terminal.png)

It is normal that it should take some time to complete, as long as you're connected to the internet, you'll be fine, and while you wait for it to complete jump to the next step.

***

### 2 - Google Cloud Platform

This is where you create an account (it's free) and then a new project, in order to request the API and its keys, that we are going to need in Visual Studio to start making the requests for Google to index or remove pages.

You got that right, the script runs from your computer (connected to the internet of course).

###### a) Create an account in Google Cloud Platform

Click on "Console" after you have logged in [to the Google Cloud](https://cloud.google.com/ "Google Cloud Platform")

![](https://d33wubrfki0l68.cloudfront.net/b156732f6385147309f7617809d4eb90dc85a745/daf1b/images/cloud-console.png)

###### b) Create a new project

The name of the project is a must have, but the name of the organisation can remain as default "No organisation".

![](https://d33wubrfki0l68.cloudfront.net/9ace2b27cb2b73fa0598dd7c8e74d8a4678c4866/ef258/images/creer-projet.png)

###### c) Go to API and services

Under the vertical menu (left handside), Click on API and services then "Library".

Search with the word "Indexing" and select "Indexing API" .

![](https://d33wubrfki0l68.cloudfront.net/7473f78a2a4988858ff5644d363ff7d3ca62e5f0/798d3/images/api-services-bibliotheque.png)

Activate the API:

![](https://d33wubrfki0l68.cloudfront.net/f04a53b37f0785735133a961197415c48a29c65d/c0f8b/images/activer-api.png)

###### d) Create Credentials

Under the same window of API and services, Click on Credentials (left vertical menu). Click "+ Create Credentials" then "API Key" which you can save (but not mandatory).

![](https://d33wubrfki0l68.cloudfront.net/5a384a5ab3add567c9bd5f7108eebf76cbec736d/2c10a/images/creer-identifiants.png)

###### e) Create a Service account

This is a crucial step, but why?

Because it will generate the unique email address that we need to add to the GSC as owner so that all components are connected.

Give it a name that you can distinguish in the future

As for the ID, it does generate automatically by clicking the small icon on the right handside in that field

![](https://d33wubrfki0l68.cloudfront.net/7978ce196d1861396ea7e333c8b8683d45f5afa0/3f525/images/compte-de-service.png)

Click "Create and continue". A new window opens. Select the role as "Owner".

![](https://d33wubrfki0l68.cloudfront.net/d8ef1e954916859eb1367112e961ec35f0502a20/b8bac/images/role-proprio.png)

Click OK in blue to finalize, you'll see a page like this one below.

In the "Service accounts" section, copy the email address and save it somewhere you can go back to, and add it to the GSC as Owner.

But first we need its private key in JSON format. We will use it as the service_account.json file in a while.

![](https://d33wubrfki0l68.cloudfront.net/72ce86dc4fa4521a3fce5af5a230b53aaf5e5554/b3b0c/images/cle-et-compte.png)

###### f) Get the private JSON Key

In the same window, Click on the email address, a new window opens up.

Click on the KEYS tab (on top).

![](https://d33wubrfki0l68.cloudfront.net/cd29956e882ac041764408829a85906ab6543c06/2a897/images/cle-json\_1.png)

Click Add Key, then Create Key and select JSON format.

![](https://d33wubrfki0l68.cloudfront.net/3c8ae7f872a856e71c6eded4a355a28689b18260/f3295/images/cle-json\_2.png)

![](https://d33wubrfki0l68.cloudfront.net/cf586e9ecb690b35b6c2411b0b4eda0d8350db95/3d26f/images/cle-json\_3.png)

The JSON file will download to your computer and a message appears confirling that.

###### g) The JSON Key content

Copy all of the content of the JSON file after opening it in your code editor. Here's an example of how it should look like.

And paste the content onto the file `service_account.json`replacing all the original code that was downloaded from GitHub.

![](https://d33wubrfki0l68.cloudfront.net/1fc87a446f9ebb9f3bcf5b478a6841936782c020/5c2b4/images/cle-privee-json.png)

The `service_account.json` file should look like this:

![](https://d33wubrfki0l68.cloudfront.net/153d4fd1376bc47d2c806dad9a101e2fcee20b2b/e4c9e/images/copier-coller-cle-privee.png)

Wonderful, so far so good, you're almost there ⭐️

***

### 3 - Google Search Console

Again, the aim here is to add the email address of the Service Account as Owner of that particular Google Search Console account.

###### a) Open the console

You can visit the [Google Search Console](https://search.google.com/search-console "Google Search Console") and choose your website in question.

###### b) Settings

Visit the Settings page, found under the left handside vertical menu.

![](https://d33wubrfki0l68.cloudfront.net/3680e42b17f32130c6e66b36afc9125194a78f48/a89e6/images/gsc-proprio.png)

###### c) Go to Users and Permissions

Click on Add user, and set the Permission to Owner.

![](https://d33wubrfki0l68.cloudfront.net/e41d023668956a94525e2073ac24979b135455cc/67318/images/utilisateur-proprio.png)

###### d) The Service Account email

Add that email as owner

![](https://d33wubrfki0l68.cloudfront.net/00ae37e1eda7a9e935acf807469314c70be9efdb/92c85/images/ajouter-proprio.png)

💫 Congrats! You are set and ready to start indexing rapidly 200 URLs per day 🏆

***

### 4 - Run the indexing script

This is done from your Visual Studio Code or code editor.

###### a) Gather the URLs

Gather the URLs of the pages that you'd like indexed and paste them in the file called `urls.txt`. Do not leave empty lines.

Example :

![](https://webforgood.fr/images/Screenshot%202022-03-28%20at%2000.03.02.png)

###### b) Run the code

Now that the URLs are set in the file `urls.txt.`

The file `index.js` will do the work for us, we just need to run it. Here's how:

In the terminal window, type `node index.js` and hit enter

Here's an example response from the server:

![](https://webforgood.fr/images/Screenshot%202022-03-28%20at%2001.21.36.png)

In a few minutes/hours, your pages will be indexed ✨

***

Questions, comments, errors, something not working, not clear? Ask on [Discord](https://discord.com/invite/2tABYc3kDn "Discussions sur Discord") or Twitter[@webforgoodf](https://twitter.com/webforgoodf) or Facebook [@webforgoodf](https://www.facebook.com/WebForGoodFr)

Thank you for following along 🚀

Credits and thanks to Steve from Journey Further for the source code on GitHub.


Tutorial: How to use Google Indexing API, for fast and bulk indexing of URLs, using Node JS

Using Google Indexing API - English Tutorial

Vous trouvez cet article utile ? Vous avez des questions ou commentaires ? 


Prenez contact avec nous

L'ergonomie mobile : quelle relation avec le fichier robots.txt ?

Le rapport de l'ergonomie mobile dans la Google Search Console : quelle relation avec le fichier robots.txt ?

![Ergonomie mobile devenu un pilier dans le processus du référencement naturel SEO](/images/ergonomie-mobile.jpg)

## Le problème

Parfois nous faisons face à une erreur dans la Google Search Console (GSC), concernant l’ergonomie mobile.

Le test est simple : comment le blocage des feuilles de style dans le fichier robots.txt pourrait amener le robot Googlebot à ne plus “comprendre” l’ergonomie mobile de la page, malgré le fait qu'elle le soit, du moins pour les utilisateurs visitant le site (et c'est ça le plus important).

Alors c’est quoi le problème ? On ne veut pas que Googlebot comprenne que le site n’est pas adapté aux écrans mobiles (mobile first indexing est quelque chose de très différent). Google va indexer la page mais le ranking lui …. ? On garde pour un autre jour.

![rapport ergonomie mobile Google search console](/images/rapport-ergonomie-mobile-GSC-relation-avec-robots-txt-1536x812.jpg)

## L'exemple de WordPress

Dans l’exemple de WordPress, je vois souvent les dossiers `/wp-includes/` et `/wp-content/` sous la directive “Disallow”. Or ces dossiers contiennent les feuilles de style (fichiers se terminant par .css ou .min.css ou encore .css?vers=123) nécessaires au rendement et layout de la page. Et c'est là tout le jeu.

## Solution

> Le principe c’est de laisser libre cours aux robots des moteurs de recherche (et autres comme Apple et Facebook à mon avis) de venir et explorer les fichiers de feuilles de style sur le serveur.

En fait, personnellement, je ne bloquerai aucun dossier aux robots des moteurs de recherche, sur un site de taille petite ou moyenne. C’est tout à fait une autre histoire avec les sites de grand taille; on parle de plusieurs centaines de milliers de pages et plus (quelqu'un a dit crawl budget ?)

Dans l’exemple de WordPress, imaginons que le dossier `/wp-content/` doit rester loin des “yeux” des robots, on ajoute la directive “Allow” pour les fichiers CSS dans un dossier qui lui est sous “Disallow”.

### Exemple

`Allow: /wp-content/\*.css
Disallow: /wp-content/`

On finira avec cette vidéo montrant comment l’erreur de l’ergonomie mobile a été réglée avec l’ouverture à l’exploration des fichiers CSS dans le fichier robots.txt pour CDN.

Note: si vous utilisez un CDN assurez-vous que la balise canonique des fichiers pointe vers le nom de domaine et pas le domaine du CDN (cdn.123.service.fr par ex).

<video controls playsinline poster="/images/ergonomie-mobile.jpg" width="930" title="Relation entre l'ergonomie mobile et le fichier robots.txt">
<source src="https://video.webforgood.fr/Page-mobile-et-robots_txt-Googlebot.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Page-mobile-et-robots_txt-Googlebot.webm"
            type="video/webm">

</video>

### Dans cette vidéo :

<small style="color:grey;">
00:01 – Regardons ensemble quel est l’impact d’empêcher le Google Bot (robot explorateur de Google) d’explorer les feuilles de style et sa relation avec l’ergonomie mobile.

Je ne dis pas que c’est la seule raison, mais c’est quelque chose que je vois assez souvent : On fait un site, on ouvre l’indexation, on paramètre le fichier robots.txt et on essaie de “cacher” des dossiers importants (en les bloquant de l’indexation) qui eux contiennent les feuilles de style ou du javascript important pour “générer” ces feuilles de style.

01:03 – Et donc en empêchant les robots de lire ces dossiers là, on obtient un résultat négatif sur l’ergonomie mobile, puisque c’est les feuilles de style qui déterminent un bon nombre de l’ergonomie mobile (sauf dans le cas où le style est en directement déclaré inline dans l’HTML) sont “interdites” au robot, qui va comprendre notre HTML comme étant pas ergonomique.

02:08 – Et comme Google ne peut pas voir le style de la page, nous allons obtenir une erreur ou bien un avertissement pareil. Comme quoi la page n’est pas adaptée aux mobiles. Bref, pourquoi est-ce important ? Une page qui n’est pas adaptée aux téléphones mobiles, ce n’est pas une bonne expérience pour vos utilisateurs et risque de ne pas bien ranker, bien que quand l’utilisateur, lui, quand il se rend sur le site sur son téléphone, tout va bien.

02:50 – Exemple concret : Nous avons ici une page assez bien adaptée aux téléphones mobiles, que ce soit au niveau du menu, ainsi que le body (le texte principal), etc. Bloquons l’exploration des feuilles de style qui sont servies (dans ce cas) par le CDN.

03:47 – Voyons voir qu’est ce que cela va nous donner… la page est indexée mais le robot ne va pas voir la feuille de style parce qu’il ne peut même pas l’explorer.

04:29 – Résultat : L’ergonomie mobile n’est pas à la hauteur. Maintenant on va essayer d’ouvrir la feuille de style à l’exploration du robot de Google.

05:36 – On refait le test

06:35 – Résultat de la simulation, la page est adaptée aux mobiles.
</small>


Ergonomie mobile, pourquoi Google ne comprend pas la page comme adaptée aux écrans mobile ? Quelle relation avec le fichier robots.txt ?

Ergonomie mobile, pourquoi Google ne comprend pas la page ? Quelle relation avec robots.txt ?

Ergonomie mobile

Vitesse du site : besoin de conseils d'optimisation ?

L’astuce pour améliorer la vitesse d’une page web quand elle intègre une vidéo YouTube

#### L’astuce pour améliorer la vitesse d’une page web HTML ou WordPress quand elle intègre une vidéo YouTube

![Intégrer YouTube sans ralentir le chargement de la page](/images/video-youtube.jpg)

Comment l’intégration d’une vidéo YouTube ralentit-elle la vitesse de chargement du site : Les appels d’une vidéo intégrée (dans une page web sur votre site – "embeded video") vers YouTube sont nombreux et lourd en poids.

Voici un exemple d’une page qui ne contient que le code d’intégration \<iframe> d’une vidéo YouTube; à droite, on peut distinguer pas moins de 65 différentes requêtes / réponses faites par le navigateur vers / de YouTube, Google fonts, etc.

C’est le cas par exemple des vidéos insérées sur les pages produits de sites e-commerce comme Shopify ou WooCommerce. Voir l'article mini-audit SEO d’un site e-commerce Shopify en 5 vidéos / 153 minutes

Cela va sans dire… c’est lourd et lent 🐌 .

![Nombre de requêtes que YouTube demande à charger](/images/youtube-number-of-requests-jpg-1500%C3%97718.jpg)

### Accélérer le chargement des pages web contenant une vidéo YouTube.

Solution : limiter le chargement de toutes ces requêtes YouTube en affichant une image + le \[child-src]+ \[srcdoc].

`  srcdoc `   s'utilise dans le cas d'une `  iframe  `

### Petit concept

Le \[child-src] va définir les sources valides dans une iframe.

Sans rentrer trop dans la technique, voici ce que vous pourriez faire par ex.

Le principe c’est de demander la page avec un minimum de requêtes depuis et vers YouTube (ou autre). Et donc on “charge” l’image d’abord avec le petit bouton triangle “play”, et ce n’est qu’une fois cliqué que l’appel vers YouTube se déclenche et fait place à la vidéo même.

L’avantage c’est qu’on on gagne en vitesse et en réactivité sur la page en question; le désavantage, on demande à l’utilisateur de cliquer 2 fois avant de visionner la vidéo. À vous de choisir.

### Vidéo

*Vous pouvez allez à la minute 05min et 16sec dans cette vidéo pour voir le comportement exact de l’utilisateur sur cet exemple concret.*

<video controls playsinline poster="/images/video-youtube.jpg" width="930" alt="Intégrer YouTube sans ralentir le chargement de la page" title="Intégrer YouTube sans ralentir le chargement de la page">
 <source src="https://video.webforgood.fr/youtube-embed.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/youtube-embed.webm"
            type="video/webm">
</video>

<small style="color:grey;">
Chapitres de la vidéo :

01:26 Exemple des infos JSON

01:56 Copier le code HTML ci-dessous, et remplacer avec les bonnes références. Ajouter le style CSS pour la rendre responsive.

04:00 Copier coller dans une fenêtre HTML sur votre page pour l’intégrer
</small>

*A noter que le “width” / “height” peuvent s’ajuster selon vos besoins. Testez pour différentes tailles d'écran.*

### Comment chercher ces informations depuis la vidéo YouTube

Chercher le bout de JSON sur YouTube, pour trouver les URLs de l’image placeholder de la vidéo et les autres attributs (comme le titre, la durée, la description, etc). Voici la partie de l’URL que vous placerez tout au début avant l'URL YouTube.

` https://www.youtube.com/oembed?format=json\&url=  `

L'URL complète devient par exemple :

`https://www.youtube.com/oembed?format=json\&url=https://www.youtube.com/watch?v=DDROBLkTQ3c\&t=5s`

Pour une meilleure lecture des données, installez l'extension JSON-Handle Setting (sur Chrome ou Firefox).

Dès lors, nous avons bien plus d'infos sur la vidéo que nous souhaitons intégrer comme nous le démontre cette image.

![Obtenir les infos de la vidéo en format JSON](/images/exemple-YouTube-Format-JSON-pour-acquerir-les-infos.png)

> Nous allons remplacer  `/hqdefault.jpg`  par `/maxresdefault.jpg`

#### Le code HTML de la iframe de la vidéo YouTube

Le code pourrait être facilement insérer dans une page HTML, dans une section HTML sur WordPress (voir l’exemple ci-dessous), ou Shopify, etc.

On va ensuite définir la classe "resp-iframe" (vous pouvez l'appeler ce que vous voulez), dans la feuille de style CSS de votre site ou direct inline.

Il va falloir tester l’ergonomie mobile de la page après avoir inséré la vidéo (padding, position, etc) et voir ce qui marche le mieux pour la page en format mobile.

S’assurer d’abord que la page qui héberge la vidéo est mobile-friendly (voir la relation ergonomie mobile dans la GSC et fichier robots.txt  contenu libre).

Voici la partie iframe à intégrer : Bien entendu, il va falloir <mark>remplacer toutes les ID de la vidéo</mark> (la partie après /vi/ et la partie après /embed/ ), son \` title \` et son \` alt \`.

```
<div> <style> .resp-iframe { display: block; width: 100%; } </style> <iframe class="resp-iframe" width="850" height="480" child-src="https://www.youtube.com/embed/L3dYocCSU-E" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%;}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:red;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/L3dYocCSU-E?rel=0&amp;amp;showinfo=0&amp;autoplay=1&amp;loop=0&amp;enablejsapi=0> <img src=https://i.ytimg.com/vi/L3dYocCSU-E/hqdefault.jpg alt='S3 amazon expliqué par etc'><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" title="vidéo à propos de S3 "></iframe> </div>
```

### Résultat de l’optimisation du temps de chargement

Résultat, nous avons intégré une vidéo responsive en HTML et optimisé la vitesse de chargement de cette page web.

L’utilisateur clique sur l’image, la page commence à afficher les éléments YouTube et on peut visionner la vidéo sans ralentir la vitesse du site. Nous avons allégé les requêtes initiales et rendu l’expérience utilisateur plus agréable.

#### L’aspect gênant sur mobile

Sur du format mobile, le fait de devoir cliquer 2 fois avant de jouer la vidéo pourrait rendre certaines utilisations moins intéressantes. Le premier clic se fait pour demander les fichiers de la vidéo et le 2<sup>e</sup> clic pour jouer la vidéo.

#### Tester le format mobile

Testez sur différents navigateurs comme Firefox, Safari et Chrome, et surtout en format mobile. J'utilise [LT Browser de Lambatest.com](https://www.lambdatest.com/lt-browser) version gratuite.

Le premier clic permet de “demander” les requêtes YouTube de se charger, et le deuxième clique joue la vidéo. Mais en général, et pour des serveurs mutualisé et surtout des vidéos en haut de la page, cette solution est adaptée à plein d’utilisation.

Visionnez ici le comportement sur mobile : premier clic à la seconde 2 puis la demande de la vidéo = deuxième clic à la seconde 4 qui joue la vidéo :

<video controls playsinline width="250">
<source src="https://video.webforgood.fr/2clicks.webm"
            type="video/webm">
    <source src="https://video.webforgood.fr/2clicks.mp4"
            type="video/mp4">

</video>


Améliorer la vitesse d’une page web même avec YouTube intégré

Comment intégrer une vidéo YouTube sur WordPress sans ralentir le chargement ?

Questions, commentaires, corrections ? 

Google Search Console, SEO Audit, SEO Technique

![Cas pratiques SEO à visionner format vidéo](/images/CAS-PRATIQUES-EN-SEO-947x532.png)

#### Préparation pour un audit du site

Suite à une mise à jour de l'algorithme de Google, et un passage vers un nouveau thème pour une boutique Shopify, et après avoir changé de ligne d'activité, un site perd pas mal de son index.

Ici on partage quelques notes en format vidéo, sans pré-étude, pour trouver des fils et se construire un plan de redressement.

Pour commenter ou poser vos questions, [contactez-nous.](/contact/ "Contact")

###### Durée : plus de 150 minutes en 7 vidéos

*   Généralités UX
*   Généralités ergonomie
*   Mots-clés ahrefs
*   Risque de Spam / script malveillants
*   Plan du site
*   Google Search Console
*   Bing / Yahoo
*   Titres et balises

##### On y couvre des thématiques SEO tels que :

Observations UX et généralités

Google Search Console, Plan du site, Pages 404, redirections 301, DUST (Duplicate URL, Same Text)

Simulation robot de crawl, Vérifications des images, Vérifications des pages en Google cache, Google Search Console, Bing, SEO Powersuite, Erreurs type Soft 404 dans la Google Search Console, Statistiques sur l’exploration du site, et Données structurées produits.

Un mot sur le spam + des Analyses Ahrefs et Google Search Console, et Fichier Robots.txt

Couverture et performance dans la Google Search Console, Aw-snap file viewer (un petit bijoux qui n’est malheureusement plus)

**Vidéo 1 :**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 1 - Généralités">
    <source src="https://video.webforgood.fr/Video1_Generalitees.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Video1.webm"
            type="video/webm">
</video>

**Vidéo 2 :**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 2">
    <source src="https://video.webforgood.fr/Video2_langues_images.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Video2.webm"
            type="video/webm">
</video>

**Vidéo 3 :**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 3">
    <source src="https://video.webforgood.fr/Video3_titres_balises_meta_description.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Video3.webm"
            type="video/webm">
</video>

**Vidéo 4 :**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 4">
    <source src="https://video.webforgood.fr/Video4_Bing_yahoo.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Video4.webm"
            type="video/webm">
</video>

**Vidéo 5 :**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 5">
    <source src="https://video.webforgood.fr/Video5_produit.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Video5.webm"
            type="video/webm">
</video>

**Vidéo 6 : Bonus**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 6">
<source src="https://video.webforgood.fr/Video6.mp4"
type="video/mp4">
<source src="https://video.webforgood.fr/Video6.webm"
            type="video/webm">

</video>

**Vidéo 7 : Bonus**

<video controls playsinline width="930" poster="/images/CAS-PRATIQUES-EN-SEO-947x532.png" title="Vidéo 7">
    <source src="https://video.webforgood.fr/Video7_suite_GSC_possibilites.mp4"
            type="video/mp4">
<source src="https://video.webforgood.fr/Video7.webm"
            type="video/webm">
</video>


Visionnez une préparation d'audit SEO d'un e-commerce sur Shopify. 7 vidéos et 150 minutes.

7 vidéos audit SEO e-commerce sur Shopify

Préparation pour un audit SEO Shopify e-commerce (7 vidéos)

Core Web Vitals results for multiple page via PageSpeed API

Testez en masse plusieurs URL et effectuez plusieurs tests dans la même exécution calculant la valeur médiane

Tutoriel : Tester les performances de plusieurs pages du site en même temps

Google Indexing API

Questions fréquentes

name

Détails

updates

Commentaires ou questions ?

Indexée apres demande Google Indexing API

Voici un tutoriel accessible aux gérants de sites web débutants et chevronnés, et pour ceux qui souhaitent tester l'API d'indexation de Google.

<small><a href="/blog/en/google-indexing-api-tutorial-english/" title="Google Indexing API tutorial, with Node JS, in English">Read this tutorial in English 🇬🇧 🇺🇸  / Version anglaise disponible</a></small>

### De quoi s'agit-il :

<details style="cursor: help;" text="citation" class="alert alert-primary" role="contentinfo"><summary>Pour citer JC Chouinard … (*développer le paragraphe*) </summary><p style="background: #2f2f2f;color: #efefef;padding: 10px;"> l'API d'indexation est une interface de programmation d'application qui permet aux propriétaires de sites d'informer Google lorsque des pages sont ajoutées, modifiées ou supprimées. Cela permet à Google d'indexer instantanément n'importe quelle page Web. Elle est principalement utilisé pour les contenus de courte durée tels que les offres d'emploi et les articles de presse.

Lors de l'utilisation de l'API d'indexation, Google donnera la priorité à ces URL à explorer et à indexer par rapport aux autres.

Qu'est-ce qu'une API ?
Une API, ou Application Programming Interface, est un moyen de communication entre divers composants logiciels. C'est une méthode dans laquelle les applications donnent accès à leurs données de manière structurée, sans avoir besoin d'interagir avec l'interface utilisateur.</p></details>

Pour savoir plus sur le concept de cette technique de référencement naturel, c'est par ici sur la page du [service Google Indexing API](/google-indexing-api/), ou sur <a href="https://developers.google.com/search/apis/indexing-api/v3/using-api?hl=fr" title="Google Indexing API" target="_blank" rel="noopener noreferrer">la documentation Google</a>

> Si vous avez des questions ou vous ne trouvez pas les bonnes ressources, n'hésitez pas à me contacter 👇 : question exemple,  "comment [paramétrer la Google Search Console](/google-search-console-coaching/)" ou autre aide SEO technique.

Remerciements à Steve de Journey Further pour le code source.

<div style="background: #F3F6F4;padding:10px;">
### Table des matières

*   [Le principe](#le-principe)
*   [Les limites ou quotas](#les-limites-ou-quotas)
*   [Avant de commencer](#avant-de-commencer)
*   [Pour les agences, webmasters et développeurs](#pour-les-agences-webmasters-et-developpeurs)
*   [Étapes détaillées pour débutants](#etapes-detaillees-pour-debutants)
*   [FAQ](#faq-tutoriel-indexing-api)

    *   [1 - Obtenir le code source](#1---obtenir-le-code-source)
    *   [2 - La Google Cloud Platform](#2---la-google-cloud-platform)
        *   [a) Créer un compte Google Cloud Platform](#a-creer-un-compte-google-cloud-platform)
        *   [b) Créer un nouveau projet](#b-creer-un-nouveau-projet)
        *   [c) Naviguer vers API et services](#c-naviguer-vers-api-et-services)
        *   [d) Créer des identifiants](#d-creer-des-identifiants)
        *   [e) Créer un Compte de service](#e-creer-un-compte-de-service)
        *   [f) Obtenir la clé JSON](#f-obtenir-la-cle-json)
        *   [g) Le contenu de la clé JSON](#g-le-contenu-de-la-cle-json)
    *   [3 - La Google Search Console](#3---la-google-search-console)
        *   [a) Ouvrir la console](#a-ouvrir-la-console)
        *   [b) Paramètres](#b-parametres)
        *   [c) Section Utilisateurs et associations](#c-section-utilisateurs-et-associations)
        *   [d) Le compte de service](#d-le-compte-de-service)
    *   [4 - Exécuter le script d'indexation](#4---executer-le-script-dindexation)
        *   [a) Récolter les URLs](#a-recolter-les-urls)
        *   [b) Exécuter le code](#b-executer-le-code)

</div>
### Le principe

Faire indexer multiple URLs (pages) en masse sans avoir recours à la demande manuelle sous la Google Search Console.

### Les limites ou quotas

200 URLs par jour (et 100 URLs par lot de requêtes envoyées)

## Avant de commencer

Vous aurez besoin de ces outils :

*   Visual Studio Code ou un équivalent installé <a href="https://code.visualstudio.com/" title="Visual Studio Code editor" target="_blank" rel="noopener noreferrer">Site de Visual Studio</a>

*   Node JS installé <a href="https://nodejs.org/fr/" title="Site de Node JS" target="_blank" rel="noopener noreferrer">Site de Node JS</a>

*   La Google Search Console est paramétrée pour le site en question et vous avez un accès "**propriétaire**". <a href="https://search.google.com/search-console" title="Google Search Console" target="_blank" rel="noopener noreferrer">Site de la Search Console</a>

<div style="background: #fff6e5;padding: 10px;">
## Pour les agences, webmasters et développeurs

<i>Vous pouvez [passer à la section grand public](#etapes-detaillees-pour-debutants) si les infos ici vous paraissent vagues</i>

*   Cloner le repository depuis <a href="https://github.com/swalker-888/google-indexing-api-bulk" target="_blank" title="Github repo" rel="noreferrer noopener">Github</a> et lancer la commande "npm i"

```
npm i
```

*   Créer un compte puis un projet sur **Google Cloud Platform > Console**

*   Chercher dans la bibliothèque et créer l'API Indexing

*   Activer l'API **et** sa clé

*   Activer et créer le "Compte de service", de façon à obtenir sous la section "Identifiants" la clé et une **adresse email Compte de service**.

*   Ajouter cette même adresse email comme **propriétaire** au compte **Google Search Console** du site en question

*   Toujours dans Google Cloud Platform, aller sur la section "IAM et administration", sélectionner Comptes de services depuis le menu vertical à gauche

*   Sous la section CLÉS > ajouter une clé > créer une clé > **format JSON**

*   La clé privée est maintenant téléchargée sur votre ordinateur. Ouvrir le fichier JSON et copier / coller son contenu sur le fichier `service_account.json` obtenu depuis GitHub, en écrasant le contenu initial.

*   Vous êtes prêt à commencer les demandes de requêtes vers Google, il suffit d'**ajouter les liens URLs** des pages souhaitées à être indexée dans le fichier `urls.txt`

*   Ouvrir le terminal et lancer `node index.js`

Répéter l'opération pour les différents sites que vous gérez, avec de nouvelles instances.

</div>

## Étapes détaillées pour débutants

Après avoir suivi l'étape [avant de commencer](#avant-de-commencer), continuez avec les étapes ci-dessous.

### 1 - Obtenir le code source

a) Télécharger le code source depuis ce lien <a href="https://github.com/swalker-888/google-indexing-api-bulk" target="_blank" title="Github repo" rel="noreferrer noopener">Github</a>

![](/images/github-repo-google-indexing-api.png)

b) Créer un dossier sur l'ordinateur et appelons-le "google-indexing-api" par ex, peu importe le nom du dossier.

c) Cliquer sur Download ZIP dans Github, et sauvegarder dans ce dossier créé sur l'ordinateur, et finalement faire décompresser le dossier ZIP pour obtenir le dossier modifiable. Le dossier doit contenir 5 fichiers et 1 dossier node_modules.

*Voici un exemple du contenu :*

![](/images/node-modules-et-le-script.png)

d) Ouvrir le dossier avec Visual Studio Code

Après avoir ouvert le dossier dans Visual Studio Code, lancer le terminal des commandes.

![](/images/ouvrir-terminal-command.png)

Ensuite saisir la commande npm i pour installer les modules.

![](/images/apres-ouverture-terminal.png)

Il est normal que ça prenne un peu de temps, assurez-vous que vous êtes connecté à internet.

***

### 2 - La Google Cloud Platform

C'est là que nous allons créer un nouveau projet, demander l'API, et obtenir les clés publiques et secrètes afin de pouvoir les "brancher" dans notre projet sur l'ordinateur et commencer à faire les requêtes d'indexation - ou suppression - vers Google.

Vous l'avez déjà bien compris, le script s'exécute depuis votre ordinateur même (à condition d'être connecté sur internet évidemment).

###### a) Créer un compte Google Cloud Platform

Cliquer sur Console après connexion avec un compte Google dans <a href="https://cloud.google.com/" target="_blank" title="Github repo" rel="noreferrer noopener">la plateforme Google Cloud</a>

![](/images/cloud-console.png)

###### b) Créer un nouveau projet

Le nom du projet est essentiel, mais l'organisation peut très bien suivre la valeur par défaut "Aucune organisation".

![](/images/creer-projet.png)

###### c) Naviguer vers API et services

Sous le menu vertical à gauche, cliquer sur API et services et puis "Bibliothèque".

Faites la recherche du mot clé "Indexing" et choisissez "Indexing API" .

![](/images/api-services-bibliotheque.png)

Bien entendu, il faudra activer l'API :

![](/images/activer-api.png)

###### d) Créer des identifiants

Dans la même fenêtre API et services, cliquer sur Identifiants (menu vertical à gauche). Au milieu de l'écran en haut, on va cliquer sur "+ Créer des identifiants" et ensuite "Clé API" que vous pouvez sauvegarder mais ce n'est pas nécessaire (il n'est pas nécessaire de la sauvegarder mais il est obligatoire de la créer).

![](/images/creer-identifiants.png)

###### e) Créer un Compte de service

Une étape cruciale, c'est celle de la création du "Compte de service". Pourquoi ?

Parce-que cela va nous générer l'adresse email que nous allons utiliser ensuite dans la Google Search Console pour autoriser la demande des requêtes pour votre site.

Donner un nom identifiable au nom du compte afin de le distinguer.

Pour l'ID, elle se génère automatiquement en cliquant la petite icône à droite.

![](/images/compte-de-service.png)

Cliquer "Créer et continuer". La fenêtre des autorisations s'ouvre. Choisir l'option du rôle comme "propriétaire".

![](/images/role-proprio.png)

A ce stade on peut cliquer sur le bouton bleu "OK" pour finaliser et une page pareille à celle ci-dessous apparaît.

Sous la section "Comptes de service", il faudra copier l'adresse email et de préférence la sauvegarder d'une façon sécurisée, pour ensuite l'ajouter à la Google Search Console en tant que rôle "propriétaire".

Mais avant de passer à cette étape, il nous faut la clé publique en format JSON que nous allons utiliser dans le fichier service_account.json.

![](/images/cle-et-compte.png)

###### f) Obtenir la clé JSON

Sous la même fenêtre des identifiants, cliquer sur l'adresse email, une nouvelle fenêtre s'ouvrira.

Cliquer sur l'onglet "clés".

![](/images/cle-json\_1.png)

Cliquer Ajouter une clé > puis sur Créer une clé > ensuite choisir le format JSON.

![](/images/cle-json\_2.png)

![](/images/cle-json\_3.png)

C'est alors qu'un fichier JSON va se télécharger sur votre ordinateur. Vous verrez le message "Clé privée enregistrée sur votre ordinateur".

###### g) Le contenu de la clé JSON

Copier tout le contenu de ce fichier JSON (en l'ouvrant avec Visual Studio par ex OU notepad mais surtout pas Word ou Pages). Voici un exemple du contenu de ce fichier JSON.

Je sélectionne tout le contenu et je l'écrase (donc en remplaçant le contenu existant par défaut) dans Visual Studio sur le fichier `service_account.json`

![](/images/cle-privee-json.png)

Le fichier `service_account.json` doit ressembler à ceci :

![](/images/copier-coller-cle-privee.png)

Bravo si vous êtes à cette étape, on est presque prêt ⭐️

***

### 3 - La Google Search Console

Notre but c'est d'ajouter l'adresse email récupérée ci-haut dans la Google Search Console, comme "propriétaire" du compte.

###### a) Ouvrir la console

Accéder à la <a href="https://search.google.com/search-console" target="_blank" rel="noopener noreferrer" title="Google Search Console">Google Search Console </a> et choisissez le site en question.

###### b) Paramètres

Sous le menu vertical à gauche, défiler vers le bas et cliquer sur Paramètres.

![](/images/gsc-proprio.png)

###### c) Section Utilisateurs et associations

Cliquer sur Utilisateurs et associations > Ajouter un nouvel Utilisateur (bouton en bleu à droite en haut de l'écran).

![](/images/utilisateur-proprio.png)

###### d) Le compte de service

Ajouter l'adresse email copiée auparavant et cliquer sur Ajouter.

![](/images/ajouter-proprio.png)

💫 Félicitations, le paramétrage est fait 🏆

***

### 4 - Exécuter le script d'indexation

L'exécution du script, donc la demande d'indexation (ou suppression) de plusieurs pages se fait depuis votre ordinateur, dans votre Visual Studio Code.

###### a) Récolter les URLs

Récolter les URLs des pages qu'on aimerai faire indexer et les coller sur le fichier `urls.txt`

Exemple :

![](/images/Screenshot%202022-03-28%20at%2000.03.02.png)

###### b) Exécuter le code

Donc à présent nous avons les URLs qu'on souhaite faire indexer dans le fichier `urls.txt.`

En exécutant le fichier `index.js`, l'environnement que vous venez de créer va faire les demandes à Google pour faire indexer ces pages. Je simplifie par soucis de brièveté.

Sous la fenêtre du terminal de commandes, saisir node index.js

Et voici un exemple d'une "réponse" positive du serveur :

![](/images/Screenshot%202022-03-28%20at%2001.21.36.png)

Dans quelques minutes / heures, les URLs demandées seront indexées ! ✨

***

<h6 style="background: #5b68f2;color: #efefef;padding: 10px;">Questions, commentaires ? Venez en discuter sur <a href="https://discord.com/invite/2tABYc3kDn" target="_blank" title="Discussions sur Discord" rel="noopener noreferrer">Discord</a></h6>

Merci 🚀


Tutoriel Indexation rapide et en masse avec l'API d'indexation par Google, via Node JS

Tutoriel Google Indexing API avec Node JS

👉  On couvre le SEO technique et contenu. Vous y trouverez des exemples et conseils en référencement naturel

✨ Articles et vidéos pour comprendre le référencement naturel