web-dev-qa-db-ja.com

既にコンテンツがあるページでJSON-LDを使用する方法は?

CSS、JS、およびPHPのスキルをテストするために作成したWebサイトがあります。単純なHTMLタグでデータを記述しました。 MicrodataRDFa 、および JSON-LD について聞いた。そして可能な限り、構造化データにJSON-LDを使用することをお勧めします。

そこで、Schema.org Microdata形式で、HTMLタグにさまざまな属性を追加するように指示したいだけです。これは、既に記述されたHTMLタグに属性を入れるだけで実行できます。しかし、Googleが推奨するJSON-LDを使用したい場合、どうすればよいですか?

HTMLタグから削除してscript形式(JSON-LDで定義されている)でコンテンツ全体を書き換える必要がありますか?

たとえば、下の画像には、CSSのプロパティと単純なHTMLタグで記述したコードの出力と、このためのコードのスニペットが含まれています。

Code output

<h2>Timing</h2>
    <p><?php echo $Timing; ?></p>
</div>
<div class="site-info">
    <h2>Days</h2>
    <p><?php echo $OpeningDays; ?></p>
</div>
<div class="site-info">
    <h2>Bus Stand</h2>
    <p><?php echo $BusStandName; ?></p>
</div>
<div class="site-info">
    <h2>Bus Numbers</h2>
    <p><?php echo $BusNumbers; ?></p>
</div>
<div class="site-info">
    <h2>Tariff</h2>
    <p><?php echo $Fees; ?></p>
</div>

ページの実際のデザインに影響を与えずに、JSON-LDの構造化データにするために、コードを編集する必要があります(たとえば)。

3
Siraj Alam

MicrodataまたはRDFaに問題はありません

まず、MicrodataまたはRDFaの使用に問題がない場合は、Googleの推奨事項を無視してください。 Microdata/RDFaの代わりにJSON-LDを使用する必要があるのは、次の2つのケースだけだと思います。

  • クライアント側のJavaScriptで構造化データを追加する必要がある場合。
  • Microdata/RDFaの属性を既存のHTML要素に追加するのが難しい場合。

それ以外の場合は、コンテンツを複製する必要がないため、JSON-LDの代わりにMicrodataまたはRDFa( comparison )を使用することをお勧めします。

ケースを正しく理解している場合、JavaScriptを使用して追加することはないようです。既存のHTML要素に属性を追加するのは簡単だと思われます(個別のscriptを追加するよりも簡単です)要素)、RDFaを使用することをお勧めします。

JSON-LDを追加する方法

既存のHTML /コンテンツには触れません。代わりに、あなた

この目的でJSON-LD PHPライブラリを使用したくない場合は、HTMLの生成方法と同様のJSON-LDを生成できます。

あなたのページのどこかにこれがあれば、人の名前を表示できます

<div>
  <p>Name: <?php echo $Name; ?></p>
</div>

これをJSON-LD scriptに追加して、この人物とその名前を追加できます

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "<?php echo $Name; ?>"
}
</script>

比較のため:Microdataを追加する方法

<div itemscope itemtype="http://schema.org/Person">
  <p>Name: <span itemprop="name"><?php echo $Name; ?></span></p>
</div>

比較のため:RDFaを追加する方法

<div typeof="schema:Person">
  <p>Name: <span property="schema:name"><?php echo $Name; ?></span></p>
</div>
3
unor