Extended HTML WAI-ARIAとMicrodataでHTMLを拡張する 2016年3月5日@Frontend Conference 2016 Soichi Masuda / @masuP9
WordPressのパンくずリストをMicrodataに対応させるカスタマイズを紹介します。 1.Microdataとは Microdataとは、HTML文書の中にメタデータを埋め込むためのHTML5の仕様です。 概要は下記の記事をご覧ください。 Movable TypeのパンくずリストをMicrodataに対応させる方法 で、以前、WordPress用のパンくずリストを作るカスタマイズを紹介しました。 WordPressのカテゴリーアーカイブページでパンくずリストを表示する この記事のフォーマットを元にカスタマイズ方法を紹介します。 記事中でテンプレートタグの説明は割愛していますので上記のページをご覧ください。 2.function.phpに関数追加 下記のget_category_parents_with_microdata()という関数を丸ごとコピーしてfunction.phpに追加
[レベル: 中級] Googleはモバイル検索で、すべての結果にURLの代わりにパンくずリストを表示するように仕様を変更しました。 また、ドメイン名の代わりにサイト名を表示することがあります。 Official Google Webmaster Central Blog: Better presentation of URLs in search results モバイル検索結果ではパンくずリストを表示 下のモバイル検索結果では、URLのところがすべてパンくずリストで表示されています。 とはいえ、もともとPCからの検索でもパンくずリスト表示だったのなら、モバイル検索特有の機能とはいえません。 比較してみましょう。 こちらのPCからの検索結果では、通常どおりにURLがそのまま表示されています。 スマートフォンから検索するとこのようになります。 少々わかりづらいのですが、パンくずリストっぽく変
こんにちは、金田です。台風が心配ですね。 地元の香川県は、台風があまり直撃しない地域なのでドキドキします。 さて、「パンくずリスト」をご存知でしょうか? コーダーの方ならご存知の方も多いと思います。 では、SEOに最適なmicrodataを用いたマークアップをご存知でしょうか? この記事でご紹介させていただきます。 それではまずパンくずリストにいて、wikiで確認してみましょう。 パンくずリスト(breadcrumb list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。 日本語では「パンくずリスト(breadcrumb list)」だが、英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的。「パンくずリスト」という名前は、童話『ヘン
[対象: 上級] この記事では、SMX Advanced 2014で参加した「セマンティック・構造化データ」のセッションをレポートします。 スピーカーは、Disney IntaractiveのインハウスSEOをやっているJeff Preston(ジェフ・プレストン)氏です。 プレストン氏は、Disneyグループ全体のサイトを管理しています。 セッションでは、Disneyサイトが実装している以下の構造化データの実装について話しました。 Open Graph Twitter Cards schema.org 僕たちにとって、特に重要なschema.orgだけにフォーカスしてレポートします。 Disneyが実装しているschema.org 動画 動画 (schema.org/Movie) の構造化データを、たとえばMaleficentのページではマークアップしています。 schema.org/M
This domain may be for sale!
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が検索結果画面にパンくずリストを出すようになって随分立ちます。 当ブログの場合は結構前に出るようになっていたので、特に何もせずに放っておいたのですが、先日「SEOまとめ」片川氏(@seomatome)の記事「ul(リストタグ)とmicrodata構造化マークアップでパンくずリストにこだわりを」を読んでいて、やはり当ブログにも導入しておこうと思い導入してみました。 今まで当ブログでは「WordPressにプラグインなしでパンくずリストを表示させる方法」を元にしてパンくずリストを設置しており、それをカスタマイズしたかったのですが、親子のカテゴリーに上手くmicrodataの記述を行えなかったので断念し「Breadcrumb NavXT」を使うことにしました。もっと簡単な方法もあるかもしれませんが、以下では私なりの方法をご紹介します。 ※マークアップに関しては「Breadcrumb
型の階層構造 このページに全ての型を表示しました 星印が付いている型は複数の親を持ち、一度拡張されています。 DataType(データタイプ) | Boolean | Date(日付) | Number(数字) | | Float | | Integer | Text(テキスト) | | URL Thing(もの、最も包括的な型): name, url, image, description | CreativeWork(クリエイティブな作品): about, accountablePerson, aggregateRating, alternativeHeadline, asspciatedMedia, audio | audio, author
これだけは押さえてほしい構造化データ2つのポイント 難しいイメージのある構造化データですが、ざっくりまとめるとこの2つがポイントになります。 検索エンジンがページの内容を理解しやすくなる 検索結果に様々な要素が表示されるようになる(場合がある) 検索エンジンは人間と同じようにサイトのテキストを理解することができません。もちろんある程度はわかるはずなのですが、完璧とはいきません。そこで、テキストに”意味”のマークアップを行い、検索エンジンがテキストを理解できるようにするというのが、構造化データの基本的な考えになります。 そして、検索エンジンがテキストを理解できるようになると、その情報を使って検索結果に様々な要素を表示できるようになるのです。例えば、「コンビニ アルバイト」などで表示されるGoogleしごと検索(Google for jobs)も構造化データを参考にして、検索結果に表示していま
[対象: 中〜上級] Googleマップにおけるローカル検索のSEOで知っておきたい情報をこの記事では解説します。 2日間のSMX Advanced 2013に参加した翌日、タイアップで開かれた「Local University Advanced」に参加しました。 Local University (Local U)は、ローカル検索に焦点を絞ったワークショップです。 メンバーには、ローカル検索業界のエキスパートたちが顔をそろえています。 今回のLocal University Advancedには、GoogleマップのJoel Headley(ジョエル・ヘッドリー)氏が招かれました。 Headley氏は、簡単にGoogleマップについて話した後に、参加者からの質問に答えてくれました Headley氏から聞いたGoogleマップSEOの最新情報をこのあとシェアします。 Local Uは小規模
[対象: 中〜上級] この記事では、構造化データの情報を調査、確認するために使える便利なGoogle Chromeの拡張を紹介します。 次の4つになります。 Semantic inspector Microdata.reveal Microdata/JSON-LD sniffer SchemaDump Semantic inspector Semantic inspectorは、アドレスバーの右端にあるアイコンをクリックするとMicrodataでマークアップされているそのページの構造化データを表示してくれます 個人的には、Semantic inspectorがいちばん見やすいように思います。 ちなみに、フッターにあるコピーライトを見ると日本人の方が開発したようですね。 Microdata.reveal Microdata.revealも、Semantic inspectorと同じようにアド
構造化データ マークアップは、MicrodataやRDFなどを利用して、schema.orgやMicroformatsなどのスキーマを設定する手法です。 構造化データ マークアップを行うことで、Googleのリッチスニペットの露出を高めるなどの効果が挙げられます。 Googleが提供しているツールを利用した構造化データ マークアップの導入方法を紹介します。 今回の目標 Microdataなどの具体的なマークアップの方法にはあまり触れず、ツールを利用して、構造化データ マークアップを行います。 またGoogleの検索におけるリッチスニペットの最適化を目標としています。 リッチスニペット スニペットとは、検索結果の表示される数行のテキストのことですが、さらに詳細な情報を表示したものが「リッチスニペット」になります。 Googleの検索結果でパンくずリストや商品画像、レビューなどが表示されるのを
どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか? 確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね(特にWeb担のような無機質なURLの場合は)。 最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです(「リッチスニペット」と呼ばれるもの)。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。 そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。 ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。 <a
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 イベント(Event)の構造化データ Google のイベント機能を活用すると、ユーザーは Google 検索結果や他の Google サービス(Google マップなど)からイベントを見つけ、参加しやすくなります。この機能には多くのメリットがあります。 よりインタラクティブな結果: イベントが Google のイベント機能の表示対象となり、ロゴ、イベントの説明などを目立たせることができます。 検出とコンバージョンの機会を増やす: ユーザーは、イベント情報を参照し、クリックしてサイトにアクセスするための新たな手段を利用できます。詳しくは、Google 検索からのトラフィックが前年比で 100% 増加した Eventbrite の事例をご覧ください。 コンテンツのマークアップ方法によっては
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く