Forums Développement Multimédia

Aller au contenu

Besoin de conseils concernant le référencement d'un site web

CODE referencement

12 réponses à ce sujet

#1 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 13 November 2015 - 13:31 PM

Bonjour,

Je travaille actuellement sur une boutique en ligne pour l'un de mes amis.
Ce n'est pas vraiment le genre de projet sur lequel je me sens à l'aise : je suis plutot un expert de la balise canvas piloté par javascript.

Au début, j'avais l'intention de faire son site en full-canvas, mais je suppose qu'un site "full-canvas" souffre des même problème de référencement qu'un site full-flash et j'ai donc, après réflexion, mis de coté cette approche.

A la place, je demande a ma page php de générer du contenu html avec toutes les infos dont j'ai besoin sans aucune mise en forme, mais j'utilise les balises de description du html5 telle que la balise 'nav' et je crée un évenement 'onload' sur le body qui appelle une fonction JS qui :

- parse mon contenu html et me convertis tout ça en objet plus intuitif à utiliser que le DOM
- supprime chaque élément contenu dans le body
- recrée tout le contenu en js, avec ou sans canvas (selon les cas)

Fonctionnellement parlant, ça marche.
Mais je suis surpris par le code source de la page : je m'attendais à trouver le contenu généré par php ainsi que le code JS qui recrée tout le site, mais j'obtiens l'équivalent html du code source écrit en JS...

Du coup, je me demande comment fonctionne le référencement (c'est un sujet qui ne m'a jamais intéressé, je n'y connais rien à rien...) : est ce que le robot de google voit le code généré par php ? ou est ce qu'il voit la version généré lors du body.onload ?

Merci d'avance pour votre aide !

#2 Goabonga

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 2724 messages

Posté 13 November 2015 - 14:16 PM

Slt,

Aujourd'hui les bots kiff les structured-datas, tu peux passer direct par du ld+json n'oublies pas la meta description, d'injecter un title unique et utilises un sitemap.xml !

#3 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 13 November 2015 - 14:53 PM

Salut Goabonga ! :)

Merci pour ta réponse !
Je viens de regarder tes liens, je ne savais pas que les structured-datas existaient, et ça m'a l'air parfait ! :)

Juste pour être sûr...
Dans l'exemple donné dans cette page
https://developers.g...customize/logos

Ou dois je placer ma balise script ? (dans le header ? dans le body ? dans ma balise image ? )

Merci encore

#4 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 15 November 2015 - 22:35 PM

Je viens de trouver comment obtenir le "vrai code source", celui généré par php ! :)

Il suffit de temporiser un peu l'effacement du contenu du body et la re-génération du contenu en JS.
Dans la fonction appelée au moment de body.onload, j'execute le code qui efface et recrée tout dans un setimeout avec un delay d'une milliseconde, et ça fonctionne comme prévu :)

#5 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 19 November 2015 - 18:12 PM

Coucou,

Juste une chose, ne perds pas de vue que c'est une boutique en ligne, ce qui veut dire qu'il est plus important que ça marche partout, sur n'importe quel appareil, et que ça bénéficie de toutes les astuces de référencement possibles pour générer du trafic et donc du chiffre potentiel. A première vue Google s'en sort bien avec le JS, mais ce n'est pas forcément le cas de tout le monde et ça donne du travail en plus au navigateur (donc à la machine cliente)... bon après c'est toi qui vois, c'est juste une remarque au passage ;)

Quelques infos qui pourraient t'intéresser :

http://www.e-systeme...avascript/1375/
https://varvy.com/mo...script-seo.html
https://support.goog...ical_guidelines
http://www.journaldu...ools-0514.shtml
https://builtvisible...-framework-seo/

#6 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7065 messages

Posté 19 November 2015 - 18:50 PM

salut tlecoz

une question:
pourquoi parser la page html pour céer un "objet plus intuitif à utiliser que le DOM" ?
si j'ai bien compris tu as la main sur le php, pourquoi ne pas générer/remplir directement un/des objet(s) js ?

sinon je suis d'accord avec Monsieur Spi, qu'apporte t'on systeme par rapport à une page html "classique" ?

a+

#7 Monsieur Spi

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 6996 messages

Posté 19 November 2015 - 20:06 PM

Hello,

Citation

sinon je suis d'accord avec Monsieur Spi, qu'apporte t'on systeme par rapport à une page html "classique" ?

Même si je suis d'accord, j'apporterai une nuance, je dirais plutôt "que n'apporte PAS ton système" par rapport à un système de base... en gros es-tu sûr de pouvoir utiliser tous les bons outils SEO avec cette méthode, et est-ce qu'elle ne risque pas de te faire perdre plus de temps pour les mettre en œuvre / mettre à jour / suivre / ... ? Rien que le fait d'avoir un script à charger en plus et du boulot à donner au navigateur avant d'afficher correctement la page me semble moins adapté. Est-ce que la régénération du contenu en JS est prise en compte par les robots ? Si oui, quel est l'impact en SEO ? Faut-il prévoir à la fois la structure en PHP/HTML, la supprimer puis la recréer en JS ? Comment ça se passe pour la partie Responsive ? Si c'est JS qui gère en front, que voient les robots de cette partie ? Comment se gèrent les modifs apportées à la structure au cours de la vie du site (CMS ou intervention sur le code JS) ?

Je suis curieux et ça m'intéresse, petit test rapide, que donne ton site test avec quelques testeurs SEO basiques :

https://support.goog...r/6066468?hl=fr
https://www.woorank.com/fr
https://validator.w3.org/
https://www.site-analyzer.com/
https://moz.com/researchtools/ose/
http://seositecheckup.com/

#8 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 21 November 2015 - 01:47 AM

Hello !

"pourquoi parser la page html pour créer un "objet plus intuitif à utiliser que le DOM" ?"

Car je ne me sens pas assez compétent en html/css pour gérer un site responsive qui tienne la route....

Par ailleurs, le fait de procéder ainsi me permet de gerer beaucoup plus précisément le "juice linking" car au lieu d'utiliser une balise <a> pour chaque boutons principal, rubrique et sous rubrique du site, je peux en mettre uniquement sur les boutons en lien avec le contenu de la page actuelle, ce qui me permet de maximiser la pertinence du référencement des pages.

In fine, dans la version généré par JS, il y a bien un lien sur chaque bouton (c'est plus pratique pour naviguer dans le site) mais ce n'est pas le cas dans le code source réel de la page (via clic droit / afficher la source ==> ce que voit le robot de google)

Maintenant que j'en suis là, je me pose une autre question : est ce que le nombre de fois ou une page est visitée (sans passer par un moteur de recherche, en restant sur le site et en navigant dessus) a une incidence sur le référencement ?

Par exemple, si je charge toute la BDD en une fois et que je construis le site dynamiquement entièrement coté client lorsqu'on clic quelque part (sans recharger la page donc), le nombre d'accès au serveur va chuter (c'est le but). En terme de rapidité d'accés aux données, c'est mieux, mais est ce que ça change quelque chose pour le référencement, je ne sais pas...

"Rien que le fait d'avoir un script à charger en plus et du boulot à donner au navigateur avant d'afficher correctement la page me semble moins adapté"
Je pense qu'il faut relativiser... JS peut piloter des centaines de milliers d'objets actualisé 60 fois par seconde... Créer une centaine d'élément au lancement ne représente quasiment aucun travail.
La version du site renvoyé par php est purement textuelle. C'est plus un xml référençable qu'une page web.
Le fait d'afficher une image via JS plutot que via la balise <img> ne me parait pas plus compliqué pour le navigateur : il fait appel aux même objets.

" Est-ce que la régénération du contenu en JS est prise en compte par les robots ?"
Non. Le robot interprete exclusivement les balise html, pas le JS ni le CSS.

"
Faut-il prévoir à la fois la structure en PHP/HTML, la supprimer puis la recréer en JS "
C'est ce que je fais

"
Comment ça se passe pour la partie Responsive ?"
Je le gère en JS avec la même méthodologie qu'un site full-flash (sans utiliser du tout le css donc)


"Si c'est JS qui gère en front, que voient les robots de cette partie ?"
Les robots ne voient pas le JS, ni le code généré par le JS. Il voit le code que l'on voit quand on regarde la source de la page.


"Comment se gèrent les modifs apportées à la structure au cours de la vie du site"
Le contenu est stocké dans une BDD, le code JS s'appuie sur le code généré par php pour générer la page coté client. Le code JS est donc autonome.

Mais bon, j'en suis au tout début là... Je me demande encore si mon approche est correcte à vrai dire...


#9 APPGirault123

    Ceinture Blanche

  • Members
  • Pip
  • 2 messages

Posté 23 November 2015 - 08:29 AM

A eviter aussi sur une boutique en ligne : la duplication de contenu.
Les descriptions copiées collées du site constructeur sont à éviter. Il faut privilégier une réécriture des descriptions produits.
Mais cela peut demander beaucoup, beaucoup d'énergie

#10 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 23 November 2015 - 16:37 PM

Je confirme.
Et il n'y a pas que les robots. Sur cette page on peut télécharger la dernière version des Guidelines que doivent respecter les raters (évaluateurs) humains de Google lorsqu'ils évaluent un site ou une page : http://googlewebmast...ity-rating.html
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#11 tlecoz

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 3486 messages

Posté 23 November 2015 - 21:46 PM

Merci pour ces retours !

Finalement, j'ai décidé de laisser tomber la version JS dont je parlais au dessus...
J'ai toujours pensé que j'arriverai à échapper au html/CSS mais finalement je me dis que c'est l'occasion...
C'est dommage car j'ai passé les 3 derniers mois à créer un framework JS/Canvas reprenant l'intégralité - ou presque - des fonctions disponible dans Flash et je me réjouissais à l'idée de m'en servir mais j'ai trop de doutes quant au référencement...

Je suis en train de coder un outil en php pour faciliter l'écriture des CSS, je le posterai ici tout à l'heure au cas ou ça intéresse quelqu'un.
(ça permettra de créer des variables réutilisable en CSS et même d'utiliser des fonctions ; le php sert à lire le fichier source, enlever les variables / fonctions du code et boucher les trous avec les valeurs qui vont bien)

Je comprend à peu près la logique du html/css mais je pense que je reviendrais dans le coin vous demander de l'aide parce que des fois cette logique m'échappe... :)

EDIT :
" on peut télécharger la dernière version des Guidelines que doivent respecter lesraters (évaluateurs) humains de Google lorsqu'ils évaluent un site ou une page"

Merci, je ne connaissais pas mais.... 160 pages de pdf ?!
Pas sur que j'arriverais à trouver le courage de les lire :)


#12 JRB

    abracadabrantesque

  • Members
  • PipPipPipPipPipPipPipPip
  • 1864 messages

Posté 24 November 2015 - 10:39 AM

Voir le messagetlecoz, le 23 November 2015 - 21:46 PM, dit :

Merci, je ne connaissais pas mais.... 160 pages de pdf ?!
Pas sur que j'arriverais à trouver le courage de les lire :)
Les introductions sont en général suffisamment concises pour en comprendre l'esprit, ensuite c'est bourré d'exemples dont la lecture n'est pas indispensable si on n'est pas un rater.
Acrobate du PDF, InDesigner et Photoshopographe
abracadabraPDF.net

#13 paodao

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 7065 messages

Posté 24 November 2015 - 17:38 PM

salut

Citation

ça permettra de créer des variables réutilisable en CSS et même d'utiliser des fonctions ;

tu devrais regarder du coté de less et sass, ce que tu veux faire existe déjà ;-)
et si cela t'interesse tu peux aussi regarder npm et gulp/grunt (pour generer automatiquement les css lors de changement, recharger les pages... )

a+



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP