2012-01-18 6 views
19

私は、多くのテキストを持ついくつかのHTML文書を持っているとしましょう。それは "いいですか"(〜悪くない:))は、ユーザーが実際にそれらを見ることができないように、マイクロデータを含む要素を持ってそれらの要素を隠すことですか?CSSでマイクロデータを隠すことはできますか?

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

ポイントは、この方法は、第二のdivを記述する方が簡単かもしれないということです。

はのは、私がこれを持っているとしましょう。テキスト全体を変更する必要はなく、いくつかの要素を追加して非表示にするだけです。私はマイクロデータの作成をサポートするシンプルなHTMLエディタを作成したいと思います。この方法は実装が簡単で個人的に使いやすいようです(最初に実際のコンテンツを作成し、注釈を付ける)。

答えて

7

Microdataでマークアップされたコンテンツを非表示にしておくと、ページ上に既に表示されているものに関する追加情報を追加することを目的としています。これの主な議論は、人々は常に目に見えるコンテンツを更新することを常に忘れないが、見ることができないコンテンツを更新することをしばしば忘れるため、隠された「メタ」コンテンツはしばしば時代遅れであり不正確である。代わりにMicrodataは可視コンテンツであることを記述するアプローチをとるため、コンテンツによってデータが変更された場合は変更が生成されます。この例from the specを取る:あなたはミクロマークアップの表示内容どれを変更しない場合は、実際に変わる

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

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

だからミクロは、あなたがあなたの状況で使用するものをほぼ確実ではありません。あなたが本当に代わりに使うべきものは、この情報を求めたいものに正確に依存します。スクリプトで処理するために隠しデータをサイトに追加する場合は、代わりにdata-* attributesを使用します。すべてのユーザーが見る必要のない説明的な情報を追加する場合は、ARIAの使用を検討してください。特に、あなたの場合、aria-describedby

+3

私は同じ質問があります。私は4ページを持っています。ページにブレッドクラム情報を追加する必要がありますが、ブレッドクラムはウェブページに表示されないようにしています。しかし、Googleのリッチスニペットが表示するデータが表示されます。 – user1769790

1

隠されたデータで何かをするつもりですか?私はHTMLコメントやタイトル属性を使用したいと思います。

HTMLのコメント:

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

title属性:

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

HTMLのコメントがあり、もちろん、単なるプログラミング言語のコメントのように、彼らはクライアントに通過する点が異なります。標準のtitle要素の属性(すべてのhtml要素で利用可能)は、要素に関する追加情報を保持し、要素の上にカーソルを置くとツールチップのように使用されます。あなたの受け入れ率のために例えば

、HTMLがアップしている:あなたはそれの上にカーソルを置くならば、それは「このユーザは4〜6の対象と質問のための答えを受け入れた」と言う

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

+0

を、彼らは他の目的およびミクロ(またはRDFaのなど)に使用されるので、おかげで、残念ながら、私はミクロを必要とするより良い方法を提供していますタイトルやコメント以外の意味情報を追加する – ladar

29

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

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

あなたは、ユーザーからのごセマンティックマークアップデータを「隠し」が、機械可読それを維持SEOに影響を与えるためにしようとしている場合(ロボット/クモのための)は、目的をまったく破るものではありません。

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

+0

Googleがこれを尊重しているかどうかは分かりますか?私が開発したウェブサイトでは、コンテンツホルダーは

で、カレンダーのように設計されています(Googleでイベントのリッチスニペットを使用したい)ので、イベントはそれぞれの日/日付の中に含まれています。 を使用することができない意味があります...そうでないと、Googleは1つの方法でしかイベントを表示できないという点で狭いです。 –

+0

リッチフォーマットのページで、このリッチスニペットのコンテンツをユーザーから隠してはならないと明示しているので、私は尋ねています... –

+1

@BrenoSalgado Googleは完全にSchema.orgをサポートしています: – Swivel

7

schema.orgので、正式にあなたが隠されたコンテンツをマークアップするべきではないと、[1]に述べるグーグル:

詳細は隠されたテキストを除いて、より良いです。一般的には、マークアップするコンテンツが多いほど
になります。ただし、一般的なルールとして、 は、ウェブページを訪問したユーザーには表示されるコンテンツのみをマークし、隠しdivのコンテンツやその他の隠しページ のコンテンツにはマークを付ける必要がありません。

あなたはユーザーには見えないべきであるコンテンツをマークアップするために、体内でもlinkmeta htmlタグを使用することができます。

あなたはメタタグを使って、ミクロを非表示にします。

例えば、

<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

+0

彼らのドキュメンテーションは "一般的なルール" - 決して言わない - と彼らはあなたのSEO戦略の一環として隠されたコンテンツを使用してキーワードのものにしようとしていないか、またはペナルティの領域にさまよっています。独自の目的のために隠されたコンテンツを使用することはできますが、「一般的なルール」を破りたい場合は、キーワード密度のランキングでは行わないでください。 –

0

我々は、Googleのpenalitiesについて話している場合は、carefulyリッチスニペットのドキュメントを読むためにきたあなたが取り組んでいるタイプ。私は唯一の指定されたフィールドをドキュメント(https://support.google.com/webmasters/answer/146750?hl=en#offer_properties)以下の製品リッチスニペットを取る場合などによって

は、:隠されたとき Googleは、Googleが無視されていない以下の製品タグの特定の機械可読値を認識します。

  • カテゴリ
  • priceValidUntil
  • priceCurrency
  • 価格
  • 識別子
  • 条件

ので、これらのフィールドのための最善の方法は、メタタグでそれらを使用することです。あなたはこのようなメタタグ、使用することができます

関連する問題