web-dev-qa-db-ja.com

コンテンツをペイウォールとしてマークするためのプログラムによるタグの生成

検索エンジンが有料コンテンツのインデックスを作成できるように、柔軟なサンプリング機能を実装しようとしています。

Google Developperの例は静かですが、多分簡単です： https://developers.google.com/search/docs/data-types/paywalled-content

リードインペイウォールのあるほとんどのWebサイトでは、テキストが切り捨てられ、文の途中に省略記号が追加されます。これは、半分が無料、半分がペイウォール付きのパラグラパです。

このペイウォールコンテンツをマークするためにCSSクラスを追加する方法/場所を知りたい.

次の例では、2番目の段落は半分が無料/半分がペイウォールです。

こちらが無料版です（一部省略）：

<div class="content">

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

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

</div>

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>

はいの場合、これは本当に注意が必要です。保留中のタグをすべて閉じ、残りをspanでpaywalledクラスでラップしてから、以前のタグをすべて開き、同じCSSを再度適用する必要があります…

それを簡単に処理する方法はありますか？ 「ハーフ/ハーフ」段落をペイウォールとしてマークできますか？ 「半分/半分」の段落を可視としてマークし、フォローウォールのみをペイウォールとしてマークしますか？

ところで、CSSマーカーを使用してこれらのタグを自動的に生成する必要があります。これが課題です。サンプルにCSSマーカーを追加するのは簡単です。プログラムで生成する方法を知りたいです。

htmlpaywall
3
poussma

私はあなたの質問が何であるか完全にはわかりませんので、あなたはあなたの質問を編集し、より明確にする必要があるかもしれませんJSON-LDはインラインスキーマよりもはるかに柔軟です。

例：

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