Webmastering et SEO

Webmastering et SEO (4)

Il y a quelques jours, j'ai écrit un petit article concernant le partage de vos URL sur les réseaux sociaux. Mon article porté essentiellement sur le formatage de vos données, afin que les réseaux sociaux puissent en extraire les informations que ces derniers jugent utiles. Pour effectuer cette opération "magique", enfin pas si magique que cela, les outils sociaux se base sur le protocole Open Graph, les outils ne font que de parser la page proposée au partage, afin d"'en extraire certaines balises. J'en ai parlé sur ce même blog il y a maintenant 2 jours, mais je me suis rendu compte que je ne suis pas allé en profondeur dans mon article.

Pour commencer, un peu d'histoire.

Le protocole Open Graph a été créé par la société Facebook, en s'inspirant de Dublin Core (vocabulaire sémantique pour exprimer les données), des micro formats et du format RDFa. Je ne doute pas que vous connaissez toutes ces abréviations, mais si cela n'était pas le cas, sachez que les micros formats permettent, au cœur d'un élément comme une page web, d'incorporer des méta-données (pour faire simple, des donnéees qui portent sur la forme et non le fond de l'article). Ainsi moteur de recherche, en ce qui concerne les microformats, pourront intégrer de nouvelles données complémentaires ou données contenues par votre page comme l'auteur, le poids de la page, sa date de dréation.....
Parmi ces micros formats nombreux, on peut retrouver, par exemple, une adresse mail d'une personne, sa carte de visite numérique, un calendrier pour un événement... Le site internet wikipédia a un très bon article sur les microformats, j'y reviendrai peut-être ultérieurement.
Revenons désormais à Open Data graph. Comme je le disais dans mon article dernier, une des fonctionnalités de ce système permet, lorsque vous collez une URL dans un champ de publication d'un réseau social, d'aller rechercher directement des informations situées sur la page, afin d'en afficher un court résumé avec une image, un lien hypertexte, le nom du site ou encore la description de la page.
recpauto
 

Mais, me direz-vous, en quoi joue Open Graph protocol ?

En fait, ce protocole va vous permettre, dans votre page web, d'intégrer des informations complémentaires dans les balises meta de votre en tête de votre page HTML, afin de pouvoir spécifier certaines informations complémentaires. Le site Open Data graph protocol détaille l'ensemble des balises que nous pouvons rajouter, mais iton les principales comme le titre de votre article ou votre page, son type, éventuellement une image illustrant votre article, ou encore bien entendu l'URL de la page. Entre parenthèses, c'est grâce à la balise og: image que des réseaux sociaux comme Facebook arrivent à en extraire l'image principale à afficher sur votre post que vous êtes en train de préparer.
Deux types de métadonnées Open Data graph sont bien distinctes :  des métadonnées basiques comme le titre, le titre de votre page une image ou encore l'URL de votre page, mais d'autres métadonnées complémentaires peuvent apparaître comme un fichier audio, une description, quelques informations complémentaires relatives à la langue anglaise comme le fait d'avoir un hiatus ou non dans le déterminant débutant le titre de votre page, (en d'autres termes, faut-il un N derrière le a pour traduire "un" en français), mais vous pourrez aussi trouver des informations relatives à la  localisation de votre page c'est-à-dire sa langue et son territoire d'origine, le nom du site d'origine, éventuellement une vidéo de votre page que vous êtes en train de partager peut contenir. Pour toutes ces données que je viens de citer, vous ne pouvez mettre qu'une seule information à chaque fois. Si votre page contient plusieurs vidéos, seule l'une d'entre elles peut-être intégrée à la balise meta.
Chacun des champs que je viens de citer, contiennent des paramètres, et même aussi être composée de données structurées. Derrière la balise meta sur la même ligne, on peut y retrouver le type du partage de votre fichier comme une image, sa longueur, un texte alternatif pour les navigateur n'affichant pas les images (oui oui ca existe encore !), ou encore d'autres informations concernant la possibilité d'adjoindre à votre page web, un fichier MP3.
De ce fait, en partageant sur les réseaux sociaux, Facebook (ou un autre) pourra et saura quoi mettre en avant sur le post qu'il est en train de créer. Il existe beaucoup d'autres méta et je ne peux que vous conseillez de regarder le site https://ogp.me, dont les acronymes, vous l'aurez compris, signifie Open Graph Protocol. Ce site particulièrement bien fait, classe en une et seule unique page l'ensemble des métadonnées que vous pouvez à joindre sur votre page web.
Pour les développeurs et celles qui veulent tester vos données Open Data graph, il est bon de savoir qu'il existe tout comme pour langage HTML, des validateurs vous permettant de savoir si votre code Open Data grâce est correct ou pas. Sur lamême page que j'ai cité, vous retrouverez plusieurs liens vers des sites internet permettant cette validation. D'ailleurs, Google et Facebook ont, eux aussi, un outil de validation de ce type.
En préparant mon article, je me suis aussi poser la question de savoir si des CMS comme joomia, posséde lui aussi des solutions pour intégrer les métadonnées. Je ne m'intéresse à titre personnel qu'à des outils gratuits. Effectivement, le groupe de développeur tchèque Phoca propose un outil permettant d'intégrer beau données Open Graph sur votre site. Je ne l'ai pas testé personnellement je ne sais donc pas ce que cet outil vaut.
En tout cas, pour celles et ceux qui se posent est encore la question de savoir comment Facebook génère ce petit encart avec nos titres de la page, l'image principale de la page, le lien vers la page que vous souhaitez proposer à vos "followers" sur Facebook, la solution vous est désormais connue.

Je ne sais pas vous, mais moi, je ne suis déja demandé à plusieurs reprises quelle était la "magie" qui engendrait ce que les réseaux sociaux "composent" lorsque vous partagez une url ? Vous savez, le ... truc, bidule, enfin le machin dont je le retiens jamais le nom (dites le mois si vous retrouvez le nom, envoyez mon un message sur Facebook que je corrige mon mot). Aller une image explicative.

copie ecran

Mais c'est quoi le truc de ce tour de magie ? J'avais déja vu une API qui permettait de générer ces petites "bulles" (dont je ne retrouve toujours pas le nom) sur les réseaux sociaux. Mais comment Facebook génère t il ce cadre ? D'où sort il les données ?

La réponse tient en un mot : Open Graph Protocol. Bon, en 2021, je doute qu'il y ait encore des gens qui ne le connaisse pas mais dans le doute, je résume. L'Open Graph Protocol est... un protocol. Oui oui.. Un protocole mis en place les les mastoddontes des réseaux sociaux qui se sont entendus pour partager des méta données que vous implémentez sur votre page web. Simple en fait. Vous pouvez retrouver le protocole (en une page !) à l'adresse https://opengraphprotocol.org/

Mais après .

Et ben une fois qu'on intégre des méta dans une page, méta bien codifiées, il ne reste plus qu'à en faire une extraction par régex (encore faut il maitriser, ce qui est loin d'être mon cas) pour recomposer un encadré synthétique, publié sur votre post. Un simple bout de html en quelque sorte..

Pour répondre à ma question posée dans le titre, il sufffit donc "tout simplement" à ce que votre code HTML dans son head comporte les méta décrites dans l'opengraph protocole, afin de recomposer cet encart synthétique, à partir d'une URL. Ces données sont à placer dans le <head></head> de votre page.Et ca tombe super bien car pour connaitre l'url, c'est vous qui la collez dans le cadre de partage du réseau social. Il intercepte la saisie et si cette dernière semble être une URL, il compose le cadre.

Facile non ?

 

Depuis quelques temps déjà, depuis que j'ai découvert cet outil, je l'utilise pour mon autre site internet que je souhaite suivre, notamment au niveau de sa mise en ligne et du taux d'inactivité de la part de mon ancien hebergeur.  En effet, nous avions découvert pas mal de coupures web sur la plate-forme sur laquelle nous étions hébergés.
L'outil Host-tracker permet en effet de suivre l'état de votre site internet, à savoir s'il se trouve en ligne, ou si votre site internet a été déconnecté du web. En effet, pour des raisons techniques ou de maintenance, votre hébergeur peut ne pas mettre en ligne le site internet en question.
Le site internet Host Tracker que je vous présente aujourd'hui à plusieurs niveaux d'abonnements. Comme à notre habitude nous allons visualiser la partie gratuite de ce site. La grande différence entre la version gratuite et payante de Host-Tracker, se situe dans le fait du nombre de tests réalisés en une heure pour savoir si le site suivi est toujours en ligne ou pas. Dans la version gratuite, il n'est pas possible de faire plus de 2 tests par heure. Ce qui est déjà pas mal pour suivre un petit site non professionnel.
Le principe est relativement simple. Après avoir créé votre compte gratuit sur le site, vous pouvez renseigner l'ensemble des sites vous appartenant, que vous souhaitez suivre.  Toutes les demi-heures, HostTracker va regarder si votre site est en ligne ou pas. Lorsqu'il détecte une absence de réponse du serveur, vous allez recevoir par mail à l'adresse que vous avez indiqué lors de votre abonnement, une notification vous stipulant que votre site internet ne répond pas.
Pour l'ensemble des sites que vous suivez, vous avez la possibilité, de vous abonner ou non, à des notifications par mail. Vous pouvez recevoir un mail lorsque votre site ne répond pas, mais aussi recevoir un mail lorsque suite à une non-réponse, votre site redevient en ligne.
Host Tracker vous permet même d'intégrer à votre site Internet ou du moins à une page web, un petit widget permettant d'afficher sur une ligne de temps, le nombre de downtime ou en uptime, et de maintenance.
Vous pouvez bien entendu spécifier et configurer vos alertes pour plusieurs sites totalement différents, vous pouvez bien entendu prendre un abonnement, permettant de regarder avec une plus grande fréquence, si votre site est en ligne ou pas. Par défaut, dans la version gratuite, la fréquence minimale est de 30 minutes, pas moins.
Au niveau de la tarification, vous avez plusieurs packs possibles de 14 dollars à 99 dollars pour 6 mois. Je vous laisse regarder les dernières tarifications de chacune des offres proposées, la différenciation de la tarification reposant essentiellement sur des fonctionnalités supplémentaires ainsi que les intervalles de monitoring comme je disais
Nous pouvons passer de 30 à 5 voire 1 minute(s) d'intervalle. Notons qu'il existe une fonctionnalité payante personnelle à 5 dollars par mois, caché par des fourches, il faut cliquer sur un petit bouton pour la voir apparaître, avec un ensemble de fonctionnalités qui correspond plus précisément aller à gestion d'un petit site web personnel comme celui sur lequel vous êtes en train de lire ce magnifique article.
samedi, 05 septembre 2020 15:27

Position des marqueurs statistiques dans une page web

Écrit par

Une petite réaction face à un message que j'ai vu passer sur un forum concernant le CMS Joomla.

En effet une personne demandait où mettre un marqueur de statistiques web (Analytics en l'occurence) de manière à pouvoir prendre facilement en compte les statistiques concernant vos visiteurs sur votre site.
Étant donné que le marqueur fourni par Google est écrit en langage JavaScript, et donc n'éxécutable que sur un client web, en clair, un vrai navigateur (contrairement aux statistiques hébergeurs qui prennent en compte des requettes http), nous aurions tous tendance à mettre ce marqueur en haut de page, presque dans l'en-tête de la page, en d'autres termes dans le <head>
Et c'est ici précisément là que je ne suis pas trop d'accord avec cette façon de faire et je m'explique pourquoi. Si nous utilisons des CMS par exemple ou même du code développé soi-même, et que dans ce même code ou au chargement de la page de votre CMS, une erreur survient au moment du chargement de la page (y compris un timeout), votre marqueur analytique se trouvant en haut de votre page, avant l'erreur, la prise en compte statistique va être faite.
Personnellement, mais cela reste mon point de vue, je ne suis pas trop d'accord pour prendre en compte dans mes statistiques, un visiteur qui va tomber sur une erreur de ma page. En effet, ce visiteur a-t-il véritablement visité ma page ? Je pense que non, même s'il est bien venu sur cette même page. L'erreur qu'elle aura produite lors de son chargement fait que je ne suis pas d'accord pour le prendre en considération dans mes statistiques cette visite.
Bien sûr, cela reste ouvert à discussions...