初心者向けschema.org講座 « NAVER Engineers' Blog
NHN Japan ウェブサービス本部の「キョウ」と申します。 NAVERサービスのマークアップ等を担当している、「突っ込みづらいキャラ」で有名な男ですw 今回はマークアップエンジニアやSEOエンジニアの中で注目を集めている、 schema.orgについてご説明させていただきます。 この記事を読んでいる方の中には「schema.org公式サイト（英）」 「schema.org 日本語訳」をご覧になった方も多いと思いますが・・・ 皆様理解できましたか？ 正直難易度が高いと思うので、初心者向けに内容を砕いて説明していきます。 目次 1. schema.orgとは？ 2. schema.org導入メリットは？ 3. schema.org 初心者向けQ&A 4. schema.org実践編 5. 最後に 1. schema.orgとは？ 簡単に説明すると、schema.orgの仕様通りにH
機械がHTML文章の中のメタデータをより認識しやすくする「Microdata」 | DevelopersIO
機械がHTML文章の中のメタデータをより認識しやすくするための仕様です。 具体的には「itemscope」や「itemprop」などの特殊な属性を利用します。この属性を利用して、HTML文章内の情報を意味づけすることができます。 Microdataのサンプル <section itemscope> <p itemprop="name">Ryuichi Nonaka</p> <p itemprop="age">24</p> <p itemprop="desc">都内で働く気ままなWeb制作者です。</p> <p itemprop="image"><img src="profile.png" alt="プロフィール画像" /></p> </section> Microdata専用の属性 以下を見てもらえればわかるように、Microdataはアイテム（item）という単位を重要視します。 ite
head要素以下でのitemprop属性 - Weblog - Hail2u.net
Microdataではitemprop属性を使ってプロパティーを追加する。HTML標準仕様の変更によってbody要素以下でもlinkやmeta要素を使えるようになったので、どうでも良いマークアップを追加してCSSで隠して誤魔化すとかしなくても大体なんとかなるようになった。しかしその一方でlinkとmeta要素はitemprop属性と同時にrel属性やname属性を使うことはできない。そのため例えば<meta name="description">タグにitemprop="description"を追加してWebPageスキーマのプロパティーとして追加するなどということは無理。 <html lang="ja-JP" itemscope itemtype="http://schema.org/WebPage"> <head> <meta content="This is a foo." nam
a要素でのitemprop属性
Microdataではitemprop属性を指定された要素からどうやって値を選択するか厳密に決められていて、それに外れた書き方はできない。metaやtime、img要素の場合はまぁそうなるよねみたいな感じなんだけど、a要素だけがちょっと。 仕様では、a要素でitemprop属性を使った場合その値はhref属性の値を絶対URLに変換したものとなっている。そのため以下のようには書けない。 <address itemscope itemtype="http://schema.org/Person"> Copyright © 2012 <a href="http://example.com/about/" itemprop="name url"> John Doe </a> </address> MicroformatsのhCardのような感覚では書けないということで、以下のようにspa
schema.org 日本語訳 - 始めましょう！
ウェブサイトを作っているほとんどの人がHTMLタグについてご存じでしょう。一般的に、HTMLタグはブラウザーに対してタグ内の情報をどのように提示するかを指示します。例えば、<h1>Avatar<h1>とすれば、ブラウザーは文字列Avatarを大見出しとして表示します。しかし、HTMLタグはこの文字列が何を意味するかについての情報は与えられません。Avatarは大ヒットした映画のことかもしれませんし、インターネット上のプロフィール画像のことを指すかもしれません。このために、検索エンジンが関連した内容を見つけるのが難しくなってしまうのです。 Schema.orgは、ウェブサイトを、Google、Microsoft、Yahoo!などの巨大な検索エンジンでヒットさせるために使える用語集を提供するものです。 Schema.orgの用語集とmicrodata formatを使用すれば、HTMLに情報を
HTML5のパンくずマークアップについて | HTMLMEETING
トロントでワーホリ中のしまえるです。 HTML会議は毎週末の夜中に4人でひっそり開催中です。とっても楽しい！ 先々週に盛り上がった内容、HTML5でのパンくずのマークアップの話をします。 W3Cのサイトを見るとこう書いてます。 2011年10月5日時点でののWorking Draftを見ました。 4.13.2 Bread crumb navigation This specification does not provide a machine-readable way of describing bread-crumb navigation menus. Authors are encouraged to just use a series of links in a paragraph. The nav element can be used to mark the section
Microdata + schema.org を実際に使ってみる
schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabulary) を提供しようというものです。この schema.org の語彙を利用して、実際のマークアップに Microdata を追加する具体例をいくつか考えてみました。 schema.org の アイテム型 (item type) は 階層 (hierarchy) のかたちで定義されています。型ごとに独自の プロパティ が定義され、上位の型のプロパティは下位の型に引き継がれます。最上位は Thing という汎用の型で、name、url、image、description というもっとも基本的なプロパティが定義されています。そしてその下に CreativeWork、Event、
Googleの検索結果ページでパンくずリストを表示するmicrodataの使い方 | 初代編集長ブログ―安田英久
どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか？ 確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね（特にWeb担のような無機質なURLの場合は）。 最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです（「リッチスニペット」と呼ばれるもの）。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。 そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。 ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。 <a
WordPress のブログサイトで microdata に対応したパンくずリストを表示するコード
WordPress で作られたブログならば以下のコードを貼りつけるだけで microdata に対応したパンくずリストを自動的に吐き出すことができます。各個別ページで出力すれば良いので、一般的には single.php に貼り付けます。 <div class="breadcrumbs"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php bloginfo('url'); ?>" itemprop="url"> <span itemprop="title"><?php bloginfo('name'); ?></span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a
コーディングとSEOの概念が変わるかもしれない、Microdataについての概要 - kojika17
6月2日、Google、Microsoft、Yahoo!の検索大手3社が協力して、構造化データマークアップの標準化に乗り出しました。 長期的な最終目標は、幅広いフォーマットのサポートとしているようですが、まずはHTML5のMicrodataに集中するようです。 Microdataが新しいWebの歴史の礎の1つとなるかもしれません。 以前にも「MicrodataとMicroformatsの違いについて」取り上げましたが、今回は実際にMicrodataでどうなるのか、ご紹介致します。 Microdataとは何か？ マークアップ言語であるHTMLは「見出し(h1,h2,h3... )」「段落(p)」「リスト(ul,ol,li)」などの文章構造を示すことができても、「人の名前」「肩書き」「地域」などを示すことができません。 それらをHTMLでメタデータとして追加する方法のひとつとして、HTML5の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
