web-dev-qa-db-fra.com

Générer par programmation des balises pour marquer le contenu comme paywalled

Nous essayons d'implémenter la fonctionnalité d'échantillonnage flexible pour aider le moteur de recherche à indexer le contenu paywall.

L'exemple de Google Developper est clair mais peut-être trop simple: https://developers.google.com/search/docs/data-types/paywalled-content

Sur la plupart des sites Web avec paywall d’entrée, le texte est tronqué et un ellipsis est ajouté au milieu de la phrase. C'est un paragrapah moitié gratuit/moitié paywalled.

Je me demande comment/où ajouter les classes CSS pour marquer ce contenu paywall.

Dans l'exemple suivant, le deuxième paragraphe est moitié gratuit/moitié paywallé.

Voici la version gratuite (tronquée):

<div class="content">

  <p>this is free and visible for any body</p>

  <p>this is <b class="underline">half free...</b></p>

</div>

Voici la version complète avec le marqueur paywall:

<div class="content">

  <p>this is free and visible for any body</p>

<p>this is <b class="underline">half free</b>
   <span class="paywall"><b class="underline">half paywalled</b> content </span></p>

  <p class="paywall">this is visible only if you paid</p>
</div>

Si oui, cela peut vraiment devenir difficile. Nous devons fermer toutes les balises en attente, insérer le reste dans une span avec la classe paywalled, puis rouvrir toutes les balises précédentes et appliquer à nouveau le même code CSS,…

Y a-t-il un moyen de gérer cela simplement? Peut-on marquer le paragraphe "moitié/moitié" comme paywalled? Marquons-nous le paragraphe "moitié/moitié" comme visible et uniquement le suivant comme paywalled?

BTW, je vais devoir générer ces balises avec le marqueur CSS automatiquement, voilà le défi. Ajouter un marqueur CSS sur un exemple est facile, je me demande comment le générer par programme.

htmlpaywall
3
poussma

Je ne suis pas tout à fait sûr de ce que vous demandez, donc vous devrez peut-être modifier votre question et la rendre plus évidente, mais si je ne me trompe pas, il y a tellement de façons d'aborder cette question, mais vous devez sortir de l'idée ' En fermant les éléments, JSON-LD est beaucoup plus flexible que le schéma en ligne.

Un exemple: 

/* CSS */
.top, middle, bottom { 
    font-size: 16px;
}
.top { }
.middle { }
.bottom { }
.paywall-half span span {
    color: green;
}
.paywall-half span {
    color: black;
}
.paywall-half span:not(.hidden) { 
    color: red;
}
<div class="content">
    <div class="top">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
    <div class="middle paywall-half">
        <p>Donec pede justo, <span>fringilla vel, aliquet nec</span>, vulputate <span>eget, arcu. <span class="hidden">In enim justo, rhoncus ut, imperdiet a, venenatis vitae</span>, justo. </span>Nullam dictum felis <span>eu pede mollis pretium</span>. Integer tincidunt.</p>
    </div>
    <div class="bottom paywall-full">
        <p>ras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</p>
        <p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.</p>
    </div>
</div>
<script>
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.org/article"
  },
  (...)
  "isAccessibleForFree": "False",
  "hasPart": [
    {
      "@type": "WebPageElement",
      "isAccessibleForFree": "False",
      "cssSelector": ".paywall-half .hidden"
    }, {
      "@type": "WebPageElement",
      "isAccessibleForFree": "False",
      "cssSelector": ".paywall-full"
    }
  ]
}
</script>
1
Simon Hayter