Rendre mon WordPress propulsé par AJAX explorable

9

J'ai lu ce qui suit et j'essaie d'appliquer ce schéma à mon site Web exécutant WordPress: http://code.google.com/intl/fr-CA/web/ajaxcrawling/index.html

Si vous visitez mon site Web à http://www.visualise.ca/, vous verrez qu'il charge les messages dans la page d'accueil et l'url devient http://visualise.ca/#!/anne-au-cherry lorsque ce le message est chargé. Une version statique du même contenu est disponible pour le robot à http://visualise.ca/anne-au-cherry mais si un visiteur utilisant un navigateur le visite, il sera redirigé vers http://visualise.ca/#! / anne-au-cherry (cela se fait avec javascript).

Afin de fournir au robot d'exploration le nécessaire, ?_escaped_fragment_=j'ai utilisé un hack WordPress que j'ai trouvé sur le net: http://www.wordpress-fr.net/support/sujet-54810-add-action-parse-request et maintenant le GoogleBot peut voir le contenu de mes pages propulsées par AJAX. Je pensais que tout était fait.

Mais lorsque je colle un lien de publication sur Facebook (c'est-à-dire), il ne peut pas lire le contenu de la page, j'ai donc deviné que mon site Web ne respectait pas vraiment le schéma décrit dans la documentation de Google, car Facebook le soutenait (si vous collez http : //twitter.com/#! / gablabelle ça marchera). Donc, depuis que j'utilise le plugin jQuery.address pour obtenir mon hashbang (#!), Je suis allé sur leur site Web et j'ai téléchargé leurs exemples de fichiers pour voir quelles étaient les différences entre leurs fichiers et les miens et j'ai réalisé qu'ils utilisaient probablement une fonction php pour créer les instantanés HTML nécessaires: https://github.com/bartaz/jquery-address/blob/master/samples/crawling/index.php parce que c'est pourquoi, je suppose, Facebook ne peut pas lire le mien.

<?php

    error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));

    $fragment = $_REQUEST['_escaped_fragment_'];
    $file = 'data/' . (isset($fragment) && $fragment != '' && $fragment != '/' ? preg_replace('/\//', '', $fragment) : 'home') . '.xml';
    $re = '/(^<[^>]*>)|(\n|\r\n|\t|\s{2,4})*/';

    $handle = fopen($file, 'r');
    if ($handle != false) {
        $content = preg_replace($re, '', fread($handle, filesize($file)));
        fclose($handle);
    } else {
     $content = 'Page not found!';
        header(php_sapi_name() == 'cgi' ? 'Status: 404' : 'HTTP/1.1 404');
    }

?>

Donc, je suppose que je pourrais peut-être utiliser une fonction php similaire pour servir les instantanés HTML au lieu d'utiliser le hack WordPress, mais je devrais l'adapter à WordPress. Le problème est que je ne suis pas programmeur et j'ai fait de mon mieux jusqu'à présent.

Mes articles sont dans ce format: http://visualise.ca/#!/anne-au-cherry et la version statique est disponible à http://visualise.ca/anne-au-cherry (Where anne-au-cherry est le slug du post et change en fonction de la page que nous consultons).

Donc ma question est quelqu'un pourrait-il confirmer que je suis sur la bonne voie et si possible aider à créer cette fonction php?

Merci beaucoup pour votre temps et votre aide!

Gab
la source
5
Avez-vous pensé à générer un plan du site? Par exemple, Yoast WordPress SEO génère automatiquement un plan du site pour votre contenu et le soumet à Bing, Google et Yahoo ...
+1 à l'idée du plan du site. Je suis toujours confus quant au paramètre d'URL qui est transmis pour montrer le site à Google, cependant. Pourriez-vous coller une URL qui comprend à la fois a) le contenu de la page et b) s'exécute sans JavaScript? Si cela n'existe pas, Google ou Facebook n'ont rien à explorer.
brandwaffle

Réponses:

4

Plus précisément EVITER en utilisant « Hashbang » ( « #! ») Afin de rendre les sites WordPress AJAX explorables.

Vous ne voulez vraiment pas utiliser la méthode "hashbang" sur un site WordPress.

Le "! #" Ressemble plus à un patch hacky pour les sites qui ne peuvent pas fournir d'analogue statique à sa version AJAX. Son utilisation en général n'est pas recommandée par Google à moins qu'aucune alternative ne soit disponible.

Il n'y a aucun avantage à implémenter un système de hashbang dans WordPress. Une solution AJAX front-end pour WordPress devrait contourner le schéma d'URL existant (pas de hachage, pas de coup).

Résumé: WordPress est naturellement explorable; ne le cassez simplement pas à l'aide de hash-bangs.

WraithKenny
la source
1

Si vous faites spécifiquement référence à Facebook qui n'affiche pas correctement les métadonnées de votre page, vous devriez regarder le plugin OpenGraph pour WordPress, car il ajoutera les métadonnées d'attribut og: appropriées. http://wordpress.org/extend/plugins/opengraph/

Vous pouvez également ajouter un lien comme celui-ci dans l'en-tête

<link rel="canonical" href="link_back_to_real_post_url">

Et voyez si cela fait quelque chose.

Je dois cependant demander, pourquoi faites-vous cela? Twitter a fait l'objet de critiques importantes pour cette structure d'URL, précisément parce qu'il est difficile d'explorer. Ne dis pas que tu ne devrais pas le faire, mais plutôt curieux de savoir quelle est la raison :)

gaufre
la source
1

Ce que j'ai fait, c'est de ne pas utiliser de hashbangs comme WraithKenny l'a suggéré.

Utilisation du plugin d'adresse jQuery avec la méthode $ .address.state (value) afin de définir le chemin de base du site Web utilisé dans la gestion d'état HTML5 et la méthode $ .address.value (value) afin de définir le courant lien profond, j'ai pu faire ce que je souhaitais.

http://visualise.ca/

Les publications (cliquez sur une vignette d'image) sont chargées via AJAX et l'URL change en même temps, les publications existent par elles-mêmes en utilisant, bien sûr, la même structure de permalien, donc elle est entièrement explorable.

Le seul problème sera pour les navigateurs plus anciens qui verront, je pense (doit être vérifié), les hashbangs.

Comme je ne suis pas développeur, il m'a fallu beaucoup de temps pour comprendre. : - / Mais je suis assez content des résultats maintenant ;-)

Adresse jQuery: http://www.asual.com/jquery/address/

Gab
la source
1
Jetez un œil au plugin jQuery pjax. github.com/defunkt/jquery-pjax Il est très similaire mais se chargera de charger le contenu pour vous, etc. Voici un exemple de ce que j'ai fait avec pour un thème Twenty Eleven Child github.com/chrisguitarguy/pjaxy
chrisguitarguy