web-dev-qa-db-ja.com

CSSでmicrodataを非表示にしても大丈夫ですか？

テキストの多いhtmlドキュメントがあるとしましょう。 microdataを含む要素を持ち、それらの要素を非表示にして、ユーザーが実際にそれらを表示しないようにすることは「良い」（〜悪くない:)）ですか？

私がこれを持っているとしましょう：

<div style="display:none" itemscope...>some microdata describing div below</div>
<div> There is actual text that is described by microdata</div>

重要なのは、この方法で2番目のdivを説明する方が簡単な場合があるということです。テキスト全体を変更する必要はありません。いくつかの要素を追加して非表示にするだけです。 microdataの作成をサポートする単純なHTMLエディターを作成したいのですが、この方法は実装が簡単で、個人的にも使いやすいようです（最初に実際のコンテンツを作成し、次に注釈を付けます）。

htmlmicrodata
21
ladar

Microdataでマークアップされたコンテンツを非表示にすると、そのポイントが無効になります。これは、ページに既に表示されているコンテンツに関する追加情報を追加することを目的としています。これに対する主な議論は、人々は常に目に見えるコンテンツを更新することを忘れないが、しばしば彼らが見ることができないコンテンツを更新するのを忘れるので、隠された「メタ」コンテンツはしばしば時代遅れで不正確であるということです。代わりに、microdataは、表示されるコンテンツが何であるかを記述するアプローチを採用しているため、コンテンツが変更されると、生成されるデータも変更されます。この例を見てください 仕様から ：

<h1 itemprop="fn">
  <span itemprop="n" itemscope>
    <span itemprop="given-name">Jack</span>
    <span itemprop="family-name">Bauer</span>
  </span>
</h1>

表示されるコンテンツを変更しても、Microdataマークアップは実際には変更されません。

<h1 itemprop="fn">
  <span itemprop="n" itemscope>
    <span itemprop="given-name">Tim</span>
    <span itemprop="family-name">Berners-Lee</span>
  </span>
</h1>

したがって、Microdataは、ほぼ確実に、状況で使用したいものではありません。代わりに実際に何を使用すべきかは、この情報が何のために必要かによって異なります。サイトのスクリプトで処理するために非表示のデータを追加する場合は、代わりに data-*属性 。すべてのユーザーが表示する必要のない説明情報を追加する場合は、 [〜＃〜] aria [〜＃〜] の使用を検討してください。特にあなたの場合、 aria-describedby 。

7
robertc

schema.orgには、microdataを「隠す」ための実際の方法があります。

http://schema.org/docs/gs.html#advanced_missing

SEOに影響を与えようとしている場合、セマンティックマークアップデータをユーザーから「非表示」にしますが、それを機械可読に保つこと（ロボット/スパイダーの場合）は、目的をまったく損なうものではありません。

Schema.orgマークアップが適切にフォーマットされている場合、値を「非表示」にしても、Googleはインデックスのランキングにペナルティを課しません。

33
Rowe Morehouse

schema.org、したがってgoogleは[1]で公式に、非表示のコンテンツをマークアップしてはならないと述べています。

隠しテキストを除いて、多ければ多いほど良いです。一般的に、より多く
マークアップするコンテンツの方が優れています。ただし、原則として、Webページにアクセスするユーザーに表示されるコンテンツのみをマークアップし、非表示のdivやその他の非表示のページ要素のコンテンツはマークアップしないでください。

本文でもlinkタグとmeta htmlタグを使用して、ユーザーに表示されないコンテンツをマークアップできます。

メタタグを使用してmicrodataを非表示にします。

例えば、

<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Funky Skirt</span>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="price" content="100.00" />
        <link itemprop="availability" href="http://schema.org/InStock" />In stock
    </div>
</div>

[1] http://schema.org/docs/gs.html

7
vanthome

次のようなメタタグを使用できます。

<meta itemprop="VALUE" content="CONTENT" />

<meta itemprop="priceCurrency" content="USD" />

https://schema.org/docs/gs.html#advanced_missing

6
Arnaud Keyen

あなたは隠されたデータで何かをするつもりですか？ HTMLコメントまたはtitle属性を使用します。

HTMLコメント：

<!-- This is an HTML Comment -->
<div>Content</div>

タイトル属性：

<div title="some information describing div">Content of div</div>

もちろん、HTMLコメントは、クライアントに送られることを除けば、プログラミング言語のコメントと同じです。標準のtitle要素属性（すべてのhtml要素で使用可能）は、要素に関する追加情報を保持し、要素にカーソルを合わせるとツールチップのように使用されます。

たとえば、受け入れ率のHTMLは次のとおりです。

<div class="accept-rate cool" title="this user has accepted an answer for 4 of 6 eligible questions">67% accept rate</div>

カーソルを合わせると、「このユーザーは6つの対象となる質問のうち4つに対する回答を受け入れました」と表示されます。

1
Phoenix

Googleのペナルティについて話している場合は、作業しているリッチスニペットタイプのドキュメントを注意深く読む必要があります。

たとえば、製品のリッチスニペットを取得すると、ドキュメント（ https://support.google.com/webmasters/answer/146750?hl=en#offer_properties ）に従って、指定されたフィールドのみ：Google次の製品タグの特定の機械可読値を認識します。非表示の場合、Googleは無視しません。

  • カテゴリー
  • priceValidUntil
  • priceCurrency
  • 価格
  • 識別子
  • 状態

したがって、これらのフィールドの最良の方法は、メタタグで使用することです。

0
Maxime Elomari