Programmatically generating tags to mark content as paywalled

Question

We are trying to implement the flexible-sampling feature to help the search engine to index paywalled content.

The example on Google Developper is quiet clear but maybe to simple: https://developers.google.com/search/docs/data-types/paywalled-content

On most website with lead-in paywall, the text is truncated and an ellipsis is added in the middle of sentence. This is a half free / half paywalled paragrapah.

I am wondering how / where to add the CSS classes to mark this paywall content.

In the following example, the second paragraph is half free / half paywalled.

Here is the free version (truncated):

<div class="content">

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

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

</div>

Here is the full version with the paywall marker:

<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>

If yes, this can really get tricky. We need to close all pending tags, wrap the rest in a span with the paywalled class, then re-open all the previous tags and re apply the same CSS, …

Is there a way to handle that simply? Can we mark the "half/half" paragraph as paywalled? Do we mark the "half/half" paragraph as visible and only the follwing as paywalled?

BTW, I'll have to generate those tags with the CSS marker automatically, this is the challenge. Adding a CSS marker on a example is easy, I am wondering how to programmatically generate it.

Answer 1

I'm not fully sure what your asking so you may need to edit your question and make it more obvious but if I'm not mistaken then there are so many ways you can approach this but you need to get out of the idea of 'closing' elements, JSON-LD is much more flexible than inline Schema.

An example:

/* 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>