J’ai intégré Passedevant en tant que stagiaire en développement web dans le cadre de mes études à MyDigitalSchool. Mon stage va durer du 1er février au 31 juillet. Je dois développer des outils SEO qui seront intégrés à la plateforme Atelier Boost.
Le web scraping qu’est-ce que c’est ?
Le web scraping permet d’extraire du contenu de sites web via à un script ou programme. Les contenus extraits sont souvent utilisés pour faire des analyses SEO (search engine optimization). Alors voilà, maintenant que vous savez ce qu’est le web scraping, vous devez bien vous demander : mais pourquoi faire du web scraping ? La réponse est simple, je vais utiliser des techniques de web scraping dans le but de développer un outil SEO. Si vous voulez en apprendre plus sur l’outil et les techniques de web scraping, restez avec moi.
Un outil SEO d’analyse on page
Les technologies
J’ai décidé d’utiliser le JavaScript, car c’est un langage que j’affectionne et qui permet de faire du front-end et du back-end et disposant de beaucoup de librairies qui me seront bien
utile. Je vais donc utiliser nodeJs + Express pour créer mon serveur et mon api et pour mon scrapper je vais utiliser la librarie nodeJs « puppeteer ». Puppeteer permet de contrôler le
navigateur web chrome ou chromium. C’est une librairie développée par Google, qui permet surtout d’automatiser les tests effectués sur son site web quand il est en phase de
développement.
Analyse des données de la page
L’outil va permettre de récupérer et d’afficher toutes les données de la page. Donc, sortir tout le texte des balises h1, h2, p, a etc. Grâce à toutes ces données, l’outil va afficher un rapport
permettant de voir si la page respect les codes SEO. C’est-à-dire si la page ne contient bien que 1 seul h1, si la page a le bon nombre de titres, s’il manque des attributs alts aux images
par exemple. L’outil va compter le nombre de chaque balise ainsi que le nombre de caractères
dans chacune des balises.
Analyse des occurrences et concurrentielle de la page
L’outil va permettre de compter les occurrences de chaque mot ou groupe de mots dans la
page afin de ressortir les mots clés de la page. L’analyse concurrentielle permettra à l’utilisateur de comparer le contenu de sa page avec les
concurrents les mieux classés dans Google. Il pourra donc prendre les mesures nécessaires
pour optimiser son référencement auprès de Google.
On commence le code
Extraction des données de la page
La première étape pour créer l’outil est l’extraction de toutes les données de la page. Pour cela j’extrais tout le texte de la page et je classe ce texte par type de balise. Une opération qui
semble simple, mais qui a nécessité un peu de test et de recherche. En effet, la méthode pour extraire les balises ne sont pas toutes les mêmes, j’ai donc dû créer une fonction par type de
balise. Un petit exemple pour chercher tout le texte présent dans les balises <p></p> de la page.
const puppeteer = require('puppeteer'); //on initialise puppeteer dans le
code
(async () => {
const browser = await puppeteer.launch(); //on lance le navigateur web
const page = await browser. newPage () ; //on ouvre un nouvelle onglet
await page.goto (« https://example.com ») ; //dans cette onglet on se rend
sur la page https://example.com
const p = await page. $$ eval ('p', element => element.map(el =>
el.textContent)) ; //on récupère le texte dans les balises <p></p> que l’on
stock dans le tableau nommé p
await browser. close () ; //on ferme le navigateur web
}) () ;
Une autre difficulté a été d’avoir des données propres afin que tout traitement et analyse sur celle-ci soit juste. Alors on enlève toutes les majuscules, tout les [.,/#!$ %^&*;:{}=-
_`~()@»\+?><\] et autres caractères non pertinents, on enlève aussi les espaces doubles.
On compte encore et encore
Une fois que j’ai des données propres, je vais compter les occurrences des mots et des groupes de mots dans mes données pour pouvoir identifier les mots clés de la page. Il est très
facile de compter et faire ressortir les occurrences pour un mot unique. Mais pour les groupes de mots, c’est une autre histoire. En effet, imaginons qu’il y a écrit 5 fois dans la page « Comment rédiger un contenu SEO friendly », il va aussi y avoir écrit 5 fois « Comment rédiger », « Comment rédiger un », « Comment rédiger un contenu » et ainsi de suite. J’ai donc dû faire une fonction afin de garder que la plus grande occurrence et retirer les occurrences inutiles.
On nettoie le tout
Une fois que mon script est fonctionnel, je me retrouve avec ce que l’on appelle un code spaghetti, c’est un code long, qui s’imbrique, compliqué et qui n’est pas vraiment optimisé,
tout marche bien. Mais si je souhaite rajouter des fonctionnalités, ou qu’un autre développeur reprend le code, le code va devenir de plus en plus long, il va être difficile de rajouter des
fonctionnalités, il ne va pas pouvoir être facilement mis à jour et maintenable dans le temps. J’ai donc passé mon temps à optimiser le code, le fragmenter afin qu’il soit plus facile à lire,
plus digeste.