web-dev-qa-db-fra.com

Comment désactiver Safari Reader dans une page Web

Je suis curieux d’en savoir plus sur ce qui déclenche ou non l’option Lecteur de Safari. Je ne prévois pas de mettre en œuvre quoi que ce soit qui pourrait le désactiver, mais curieux comme exercice technique.

Voici ce que j'ai appris jusqu'à présent en jouant avec les bases:

  • Vous avez besoin d'au moins unHtag
  • Il ne va pas par le nombre de caractères seul mais par le nombre de balises P et la longueur
  • Cherche probablement des pauses de phrase ''. et autres critères

Safari fournira le "Lecteur" si, avec une baliseHet les éléments suivants:

  • 1Ptag, 2417 caractères
  • 4Ptags, 1527 caractères
  • 5Ptags, 1150 caractères
  • 6Ptags, 862 caractères

Si vous soustrayez 1 caractère à l’un des éléments ci-dessus, l’option «Lecteur» n’est pas disponible.

Je dois noter que le nombre de caractères de la baliseHjoue un rôle, mais ne l’a malheureusement pas réalisé lorsque j’ai déterminé les résultats ci-dessus. Supposons plus de 20 caractères pourHtag et soient corrigés dans les résultats ci-dessus.

Quelques autres choses intéressantes:

  • Définir <p style="display:none;"> pourPtags les supprime du compte
  • Définir display sur none, puis les afficher 230 ms plus tard avec Javascript évite également l'option Lecteur.

Je serais intéressé si quelqu'un peut déterminer cela complètement.

htmlsafari
32
donohoe

“Vous avez besoin d'au moins un élément <h*>” - ceci est tout simplement incorrect. Voici un exemple: http://mathiasbynens.be/demo/safari-reader-test-3

Ma réponse à l’autre question de Safari Reader fournit quelques informations supplémentaires.

Vous pouvez également liremon article de blog sur l'activation de Safari Readerpour toutes mes conclusions sur le sujet.

7
Mathias Bynens

L'ajout de balises à des balises potentiellement "lisibles", telles que p et div, peut amener l'algorithme Readability à ignorer la balise, abaissant ainsi le score, si bien qu'il ne déclenche pas l'affichage de l'icône Lecteur.

Pour ce qui est de la source de lisibilité, les attributs id et class constituent un élément à cet égard, dans la mesure où ils correspondent aux modèles sur les données combinées de ces deux attributs. Par exemple, ajouter une classe "comment", comme si

<p class="myClass comment">...</p>

fera en sorte que cet élément soit ignoré. Le schéma correspondant aux candidats "improbables" est le suivant:

/combx|comment|disqus|foot|header|menu|rss|shoutbox|sidebar|sponsor/i

Le fait de placer des indicateurs sur les éléments susceptibles d’ajouter au score de lisibilité peut vous permettre de désactiver l’icône Lecteur.

10
Quantastical

Voir http://code.google.com/p/arc90labs-readability/source/browse/trunk/js/readability.js pour "le code" pour plus de lisibilité.

2
Vincent Flanders

Voici ce qui a fonctionné pour moi: 

J'ai placé tout le contenu à l'intérieur d'une balise ol. 

<ol style = "padding:0;margin:0"> 
   my content
</ol>

D'après ce que j'ai lu ailleurs, le lecteur est en partie déclenché par le nombre de mots d'une page, mais il ne compte pas les mots dans un ol. 

2
user984003

Découvrez ce post: http://www.jangro.com/items/how-to-block-safari-5s-new-reader-and-bite-off-your-nose/

1
willem

Selon Le registre , Safari Reader est basé sur le projet open source Lisibilité . Vous pourrez peut-être regarder dans le code pour trouver des indices.

1
pb.

J'avais une div à l'intérieur qui englobait tout mon contenu. La transformer en élément et ajouter une classe pour supprimer tout le remplissage créé par le bouton Suppression du lecteur de mon site mobile.

0
abelito

Cela ressemble à un algorithme assez complexe à celui adopté par le lecteur Safari. Je suppose que quelque chose de plus simple reste derrière. Très probablement un document bien W3C avec quelques bonnes pratiques en matière de référencement comme celui que vous avez mentionné.

Je crois quelque chose comme ça:

  1. Au moins un H1
  2. balises <p> ouvertes et fermées, et en suivant correctement chaque balise de titre
  3. une couche contenant générale

Très probablement, le lecteur est à la recherche de quelque chose qui se rapproche du nouveau HTML 5 / spécifique, donc un article appelant une classe ou quelque chose comme ça.

Il est intéressant de comprendre pourquoi Apple n’a rien révélé à ce sujet.

0
Andrea Moro

Je l'ai fait fonctionner en supprimant les balises <p>, en les changeant en balises <div>.

Je pense que les balises <p> indiquent au navigateur qu'il y a du texte à lire.

J'ai laissé les balises <h> et elles-mêmes n'ont pas amené le lecteur.

0
user10068278