このツールを使ってサンプルのウェブページに構造化データ マークアップを追加します。 詳細 はじめに、データ タイプを選択し、マークアップするページの URL または HTML ソースを貼り付けます:

SEOにおいて重要なのは、Googleのクローラーの情報を伝えるだけではなく、検索結果に表示されたタイトルや説明文などのスニペットによって読者の目を引きつけることも重要です。HTMLで構造化データというマークアップ手法をとることで、検索結果に普通より詳細な情報を表示するリッチスニペットを表示することができます。リッチスニペットは他の検索結果より読者の目を引き寄せやすくなり、結果的にクリックする確率が高まり、訪問者が増えることにつながるのです。そこで、今回はその構造化データやリッチスニペットについて説明します。スポンサーリンク SEOにおいて重要な構造化データとリッチスニペットリッチスニペットとは？スニペットとは、検索結果に表示されるタイトルや説明文のことです。そして、リッチスニペットとは、HTMLの構造化データのマークアップによって、普通のスニペットに詳細な情報を追加して表示できるスニペッ

HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど

検索結果のクリック率5％上昇！構造化データでリッチスニペットを表示する方法 2014.05.16 2016.05.19 おすすめ リッチスニペットは検索結果に様々な情報を表示できる リッチスニペットとは リッチスニペットを使うには リッチスニペットを使ってみる 1.リッチスニペットとは Google の検索結果にはページタイトルと共にページに関する情報が表示されます。一般的に description であったり Google の作成したサマリーであったりしますがその部分にページのより詳しい情報を表示することができるので、検索ユーザーはそのページの内容を把握しやすくなります。これがリッチスニペットです。 ページタイトルや要約（description）だけでなく、著者情報やGoogle＋のフォロワー数も表示されます。 通販サイトの場合は商品の詳細情報を Google に通知することでその情報を

更新されたエントリーがあります。 psn.hatenablog.jp 構造化テストツールが新しくなり、機能変更・追加が行われたというお話で、今までOKだった記述がNGになったというネタを見て「これはこういう意味ですよ。」という解説を書いておかないとなぁと考えていたら一週間くらい過ぎそうなので、いい加減書いておきます。 構造化テストツールのチェックが厳しくなった？ パンくずリストの部分で起こっているようです。 厳密に言えばそうなります。 この部分ですね。きちんとリンクを置かないとエラーが表示されるようになった。というお話のようです。 そういえば、このエントリーを書いてもシブタクさん気づかないですね。 IDコールできません。 そもそもどういう事だろう？ 一例として、簡単にパンくずを表現すると カテゴリ > 今見ているページのタイトル このような表現になります。 HTML+microdataでマ

photo credit: infocux Technologies via photopin cc nanapi, Retty, リブセンス, 食べログ運営の価格.comなど現在有名になってきているサービスは、そのほとんどがSEOの強い会社です。スタートアップはお金がないですし、広告費をそこまで出せません。ECサイト、求人サイト、CGMのテキストベースメディアやテキストベースのキュレーションメディアではSEOは必須です。 皆さん既にSEO対策されていると思いますが、今回は食べログの検索結果を元に 表示回数×CTR=トラフィックのCTRの上げ方(RichSnipets)にポイントを絞って書いていきます。 フロントエンドの方々や、SEOに詳しい方々は結構前から言われているので今更感はあると思いますが、ここでは 簡単なマークアップの方法と実例、対応するとどう良いのかについて書いています。 Ri

HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。 最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。 <div itemscope> <p>僕の名前は<span itemprop="name">山田太郎</span>です。</p> </div> この文書をWebブラウザで表示しても、 僕の名前は山田太郎です。 と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。 Microdataとは、文書の内容に対して機械に

Web・IT・ニュース・雑談などさて前回は schema.orgが一体何なのか、どう使うのか、簡単に書かせて頂きました。 しかしやはり僕たちは、どれだけ作業を効率化できるかっていうところに興味がありますよね。 最終的には拡張性を考えると手打ちが一番早いような気もしますが、 そこはスルーして便利なサイトをご紹介！！ 生成サイト リッチスニペットがサイトへの導線としてとても有効であることはわかった。 しかしサイト上の細かい情報、例えば会社情報や製品情報、 それらをすべて構造化データバークアップするというのはかなり骨の折れる作業。 そこでそんなめんどくさがり屋さんのために マークアップを自動でやってくれるサイトを紹介しちゃいます！ 構造化データ マークアップ支援ツール Googleが提供しているサービスがこれです。 今回は「商品」を選びSchema.orgでマークアップする前のHTM

We are excited to introduce the new Overwatch Esports program and the Overwatch Champions Series. Watch our video update and head to our blog to learn more about what is next for Overwatch Esports in 2024. Join the epic battle between the AUTOBOTS and DECEPTICONS! Collect exclusive memorabilia and turn your heroes into TRANSFORMERS with unique collab cosmetics. Reinhardt leads the charge as Optimu

これだけは押さえてほしい構造化データ2つのポイント 難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。 検索エンジンがページの内容を理解しやすくなる 検索結果に様々な要素が表示されるようになる(場合がある) 検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。 そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニ アルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを参考にして、検索結果に表示していま

前編ではHTML5のアウトラインを綺麗にする、というお話でした。アウトラインを綺麗にすれば、検索エンジンにコンテンツの階層構造がどうなっているのか、正しく教えることができます。 けどそれだけでは1つ1つのまとまりが一体何を表しているのかが不明です。 schema.orgに準拠することで、そこに何が書かれているのか、を検索エンジンに教えることができます。 schema.orgとは schema.org はGoogle, Microsoft, Yahoo!などの検索エンジンベンダーが集まってマークアップ方式を標準化している組織とその標準化された仕様を文書化しているサイトです。 例えば「ここは著者のことを書いています」「これは著者の名前です」「この記事が公開されたのはこの日時です」などなど、HTMLの機能だけでは伝えきれない詳細な情報をクローラに伝えるための手段が色々定義されています。 ちなみに

SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi

[対象: 上級] Googleは、検索結果でのサイト内検索ボックスの表示方法と機能を改良しました。 オートコンプリートも利用可能です。 より目立つ表示に 検索結果に表示されたそのサイト内のページをさらにサイト内検索する検索ボックスは以前から一部のサイトを対象に提供されていました。 そのサイト内検索ボックスを上部に配置し、より目立つデザインにしたのが今回の改良です。 上は公式アナウンスで例として出されている“YouTube”の（モバイル検索の）検索結果です。 サイトリンクよりも上の位置に、大きめの虫眼鏡アイコンが付いたサイト内検索ボックスが表示されています（左）。 通常の検索のようにオートコンプリートで検索キーワードを提案してくれます（右）。 そのサイトのサイト内検索へリダイレクト 新しいサイト内検索ボックスで検索すると、そのサイト独自のサイト内検索の結果にリダイレクトされます。 従来のサイ

[対象: 上級] この記事では、JSON-LDをシンタックスに用いたschema.orgの記述方法について詳しく解説します。 CSS Niteで講演 2014年9月20日（土）に、CSS Nite LP36 powered by In-house SEO Meetup 「ビジネスに活用できる2014年SEOトレンド」がベルサール神田 イベントホールで開催されました。 僕は出演者として登壇し、セマンティック検索と構造化データ、schema.orgをテーマに公演しました。 このなかで、JSON-LDの使い方についても説明しました。 [撮影：飯田昌之] 参加者には録画した動画とスライドが提供されています。 年内には（無償で）一般公開される予定です。 ですが、JSON-LDを使ったschema.orgをもっともっと多くのサイト管理者に使ってもらうことが僕の希望です。 3か月近くも待たせたくありませ