Cet article de blog est destiné aux développeurs backend qui souhaitent apprendre les bases du référencement technique. Cet article de blog est destiné aux développeurs backend qui souhaitent apprendre les bases du référencement technique.
Une équipe en train de brainstromer
En tant que développeur backend, je me concentre principalement sur la mise en œuvre de nouvelles fonctionnalités, la correction de bogues, l'optimisation des requêtes SQL, etc. Mais qu'en est-il du référencement ? Eh bien, je n'ai jamais appris cela. C'est un ensemble de compétences complètement différent, un travail à part entière. Par curiosité, et parce que j'ai eu l'occasion de construire un tout petit site statique d'une page, j'ai pris le temps d'apprendre les bases du référencement. Gardez à l'esprit que je ne suis pas en train d'élaborer des stratégies avancées, il s'agit plutôt de points de repère pour s'assurer que vous ne vous tirez pas une balle dans le pied. Voici donc les choses que j'ai apprises.
Avoir un balisage valide (à la fois HTML et CSS)
Il s'agit d'un élément de base, mais nous faisons tous des erreurs. Utilisez des outils qui vérifient l'absence d'erreurs dans votre code HTML et CSS et corrigez-les. C'était un gros problème à l'époque où les navigateurs web n'étaient pas si intelligents. C'est moins un problème aujourd'hui, mais les moteurs de recherche (je veux dire Google) n'apprécient pas les balises invalides.
Charset
Annoncez le charset dans la balise <head>.
Si c'est UTF-8 : <meta charset="utf-8">
Réduire la durée de chargement des assets
Compression
Il faut privilégier les ressources légères. Comprenez les images, réduisez les CSS et les JS et utilisez les versions CDN lorsque c'est possible.
Page speed Insight peut vous aider : https://developers.google.com/speed/pagespeed/insights/?hl=fr
Pour ceux qui comprennent le français, vous pouvez en savoir plus sur la compression des images ici : https://capsens.eu/blog/optimiser-les-images-pour-le-web-66f2a4824f28.
Activez ensuite la compression GZIP au niveau du serveur HTTP : https://seositecheckup.com/articles/how-using-gzip-compression-helps-your-sites-seo
Mise en cache
Votre serveur HTTP possède des capacités de mise en cache que vous devez exploiter. Comme cela est spécifique au serveur, je ne peux que vous conseiller de lire la documentation appropriée. Par exemple, si vous utilisez nginx, cherchez nginx caching.
Si cela vous prend trop de temps, assurez-vous au moins que vous définissez correctement l'en-tête HTTP ETag.
CSS à la fin de <head>, JS à la fin de <body>
Vous voulez charger le CSS très tôt, car il a un grand impact sur l'expérience utilisateur. Javascript, d'un autre côté, peut être vraiment lourd à charger ; il peut attendre. Vous ne voulez pas que l'utilisateur attende que tous les actifs soient chargés avant de voir quoi que ce soit sur son écran. Laissez-lui au moins un contenu statique, puis Javascript interviendra lorsqu'il sera chargé. De même, lorsque cela est possible, chargez vos scripts JS de manière asynchrone.
Si votre CSS est trop lourd, chargez la partie critique de if à la fin de <head> et le reste après la ligne de flottaison. Nous appelons la ligne de flottaison la limite de ce que les utilisateurs voient lorsqu'ils chargent la page sans la faire défiler.
Utilisez des outils pour mesurer la vitesse de chargement de votre site Web
https://developers.google.com/speed/pagespeed/insights/
Et corrigez les choses quand vous le pouvez. C'est important.
Plan du site
Un sitemap est un fichier XML qui répertorie toutes les pages publiques afin que les moteurs de recherche puissent les indexer. Si vous n'en avez jamais entendu parler, vous pouvez créer votre premier plan du site à l'aide d'outils tels que https://www.xml-sitemaps.com. J'avais l'habitude de croire qu'il n'était pertinent que pour les sites Web comportant de nombreuses pages, mais Google veut un sitemap même pour un site Web à une seule page (pour en savoir plus, consultez la section Google Search Console ci-dessous).
robots.txt
Ce fichier n'a pas beaucoup d'impact, mais il ne coûte pas cher. Il n'y a donc aucune raison pour que vous n'en ayez pas un. Il s'agit simplement d'un moyen d'indiquer à Google que vous respectez les normes Internet.
Le fichier robots.txt est un fichier texte qui doit être accessible au public à l'adresse https://www.mywebsite.com/robots.txt. Il donne aux moteurs de recherche des règles d'indexation en liste blanche et en liste noire. Vous pouvez également déclarer explicitement l'itinéraire vers votre plan du site dans ce fichier (Plan du site : http://www.mywebsite.com/sitemap.xml).
Le fichier robots le plus simple serait le suivant :
User-agent: *
Disallow:
Sitemap: http://www.mywebsite.com/sitemap.xml
Un exemple de fichier Robots.txt
Titre
Il apparaît dans les recherches Google, les onglets de navigateur, etc. Vous avez intérêt à avoir un titre génial. Gardez à l'esprit que vous devez avoir un titre différent pour chaque page de votre site Web et qu'il doit comporter moins de 60 caractères.
Petit conseil : Google comprend quand quelqu'un recherche "comment faire", "critique", "meilleur" et d'autres mots clés (on pourrait aussi les appeler des modificateurs). Utilisez-les à bon escient.
<title>Meilleure recette de cookies aux pépites de chocolat 2019</title>
Balises Méta
Auteur
Le dernier petit site web que j'ai fait était destiné à promouvoir une petite entreprise unipersonnelle. L'ajout d'une balise méta d'auteur ne peut pas faire de mal.
<meta name="author" content="John Doe">
Description
Il s'agit d'un résumé de votre page Web. C'est généralement ce que les moteurs de recherche affichent sous le titre de votre page dans les résultats de recherche.
<meta name="description" content="Lorem ipsum">
Cartes Twitter
Aidez Twitter à rendre votre page Web partageable.
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@yoursite” />
<meta name=”twitter:title” content=”Your Title” />
<meta name=”twitter:description” content=”Your description.” />
<meta name=”twitter:image” content=”https://where-your-image-is-hosted/name.jpg” />Un exemple de carte Twitter
Open Graph
Aidez les réseaux sociaux à rendre votre page Web partageable.
Ajoutez d'abord l'attribut xmlns:og à la balise <html> :<html xmlns:og="http://ogp.me/ns#">
Ajoutez ensuite les balises méta suivantes sous <head> :
<meta property="og:title" content="Your webpage title">
<meta property="og:description" content="Your webpage short description">
<meta property="og:site_name" content="Your website name">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.your-website.com">
<meta property="og:image" content="https://www.your-website.com/images/cover.jpg" />
<meta property="og:locale" content="en_US">Un exemple de balises OpenGraph
Balise de lien canonique
Disons que vous avez la même page accessible à partir de deux URL différentes :
https://mywebsite.com/somepage
https://www.mywebsite.com/somepage
Du point de vue de Google, il s'agit de contenu dupliqué. Google n'aime pas le contenu dupliqué.
Une balise <link> canonical résout ce problème en indiquant au moteur de recherche quelle est l'URL principale.
<link rel="canonical" href="https://www.mywebsite.com/somepage">
Soyez prudent avec cela car Google n'indexera pas les autres URL. Maîtrisez-en les subtilités ou ne l'utilisez pas.
JSON-LD
Il s'agit d'un excellent outil pour déclarer un grand nombre d'informations sur votre entreprise. Il peut contenir le type d'entreprise que vous gérez, l'adresse, le numéro de téléphone, les coordonnées géographiques exactes (pour les cartes), etc. Il va également sous <head> :
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "https://schema.org/XXX",
"address": {
"@type": "PostalAddress",
"addressLocality": "XXX",
"addressRegion": "XXX",
"postalCode": "XXX",
"streetAddress": "XXX"
},
"description": "Your website description",
"name": "Your website name",
"image": "https://www.your-website.com/cover.jpg",
"telephone": "XXX",
"geo": {
"@type": "GeoCoordinates",
"latitude": "XX.XXXXX",
"longitude": "X.XXXXX"
}
}
</script>Un exemple de fichier json/LD
Il y a beaucoup d'informations que vous pouvez déclarer ici, il suffit de jeter un coup d'œil à la documentation : https://schema.org (la boîte de recherche est utile aussi).
Microdonnées
JSON-LD donne des informations sur une page ou un site web. Les microdonnées annotent le contenu de la page. Gardez à l'esprit que les moteurs de recherche, aussi puissants soient-ils, n'ont pas encore des capacités de compréhension de niveau humain. Nous devons les aider à comprendre le contenu que nous exposons afin qu'ils puissent nous aider à obtenir la portée que nous recherchons.
Vous voulez en savoir plus ? Lisez la documentation : https://html.spec.whatwg.org/multipage/#toc-microdata
Attribut ALT des images
Outre les noms de fichier des images, les moteurs de recherche utilisent les valeurs alt pour déterminer ce que représente chaque image. C'est également un autre moyen d'inclure des mots clés dans votre page Web (à condition de ne pas en abuser).
Console de recherche Google
Les outils et rapports de la Search Console vous aident à mesurer le trafic et les performances de recherche de votre site, à résoudre les problèmes et à faire briller votre site dans les résultats de recherche de Google.
Les outils et rapports de la Search Console vous aident à mesurer le trafic et les performances de recherche de votre site, à résoudre les problèmes et à faire briller votre site dans les résultats de recherche Google.
Il s'agit d'une activité incontournable. Créez votre compte et suivez les étapes. Vous allez :
Enregistrer votre site Web sur https://search.google.com/search-console/about
ajouter une balise méta google-site-verification à votre document HTMLTélécharger sur votre serveur un fichier que Google va générer pour vous.
Enregistrer votre sitemap
Conception Web réactive
Google privilégie les conceptions réactives. En effet, de nombreux utilisateurs consultent aujourd'hui votre site Web à l'aide de leur smartphone plutôt que d'un ordinateur. Pour éviter les maux de tête, je vous suggère d'adopter une approche "mobile-first" lors de la conception de nouveaux sites web.
Quelques documents : https://developers.google.com/web/fundamentals/design-and-ux/responsive/
HTTPS
Google a officiellement déclaré que c'est l'une des nombreuses choses qu'il vérifie. Et cela ne coûte pas un centime : https://letsencrypt.org/
Évitez les popups
Comme les humains, Google n'aime pas que quelque chose surgisse et empêche l'utilisateur de lire le contenu qu'il cherche à atteindre.
Allez au-delà du référencement technique
Nombreux sont ceux qui croient encore que le référencement consiste à insérer de nombreux mots clés dans une page Web. En fait, Google déteste cela.
Mon dernier conseil serait d'aller au-delà des techniques de référencement : une excellente expérience utilisateur est le meilleur des référencements (organiques). Créez régulièrement du contenu de qualité, donnez aux utilisateurs ce qu'ils veulent, comme ils le veulent. Ils passeront ainsi plus de temps sur votre site, ce qui réduira votre taux de rebond, vous attirera des backlinks, etc. Google vous récompensera pour cela.
Si certains d'entre vous veulent en savoir encore plus sur le sujet et concevoir une véritable stratégie de référencement, laissez-moi vous donner quelques mots-clés pour guider vos prochaines recherches :
Google Panda
Google Penguin
Google Pigeon
Google Colibri
Google Payday Loan
Google Mobilegeddon
Google Fred
Qu'est-ce que c'est ? Les algorithmes de Google qui contribuent au classement de vos pages Web. Oui, le PageRank n'est plus seul depuis longtemps maintenant.
Le référencement est vraiment un sujet vaste et en constante évolution, et un seul article de blog ne peut pas tout couvrir. J'espère que ces conseils pour débutants vous aideront à vous lancer.
Merci de votre lecture !