JSON-LDでschema.orgの構造化データ導入をより簡単に
Updated 2015.06.16 / Published 2015.04.24 構造化データは、Webサイトのコンテンツを構造的に把握できるように提示するもので、代表例としてGoogleやBingの検索サービスが構造化データを機械的に抽出・利用しています。Googleではリッチスニペットの名称で、検索結果画面上にイベント、レシピ、レビューなどのメタデータが表示でき、人目を引けることで注目しているWeb制作者も多くいることでしょう。その構造化データの記述方法にはMicrodata、RDFa、JSON-LDの3つが存在し、中でもGoogleが推奨するJSONベースのデータ形式で記述できるJSON-LDであればより簡単に導入することができます。 各構造を表す語彙を定義するschema.org 構造化データにおいてGoogleやBingの検索サービスがサポートしている各構造を表す語彙を定義して
リッチ スニペットと構造化データについて - ウェブマスター ツール ヘルプ
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 Developers
Send feedback Stay organized with collections Save and categorize content based on your preferences. Structured data markup that Google Search supports Google uses structured data to understand the content on the page and show that content in a richer appearance in search results, which is called a rich result. To make your site eligible for appearance as one of these rich results, follow the guid
次世代Webはブラウザの外にある
10月18日、法政大学にて次世代 Web カンファレンスが開催されました。Web に関わる技術について徹底的に話し合うイベント。セッションすべてディスカッションで勉強会というより話を聞きに行くというニュアンスが近いかもしれません。8 月に UX をテーマに議論する会を開きましたが、今年はこうした『会話』を軸にしたイベントに興味を惹かれます。 今回は、「デザイニングWebアクセシビリティ」の著者である太田良典さん（@bakera）、RDFの専門家でありコントラバス演奏者である神崎正英さん（@_masaka）と Webアクセシビリティをテーマに 1 時間ほど話をしました。私は Web アクセシビティの専門家ではありませんが、株式会社インフォアクシアの 植木真さんとのポッドキャストがキッカケで呼んでいただきました。3 者異なる視点から、Web アクセシビリティの現在と未来について話し合いました。
<mark>－HTML5タグリファレンス
<mark>タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。 <strong>や<em>のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。 <mark>は、作者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用します。 例えば、検索結果画面で文書中の検索ワード部分をハイライト表示する場合などに適しています。 ■HTML4.01からHTML5へのバージョンアップによる変更点 mark要素は、HTML5から新たに追加された要素です。 ■使用例 HTMLソース <h2><em>機能</em> の検索結果</h2> <p> HTML5では、これまでのHTML 4と同じようなHTML文書を作成する<mark>機能</mark>が改良されているのに加えて、ウェブアプリケーションを開発するための様々な仕様が新たに
HTML5 におけるアウトラインに関して簡単解説
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは？ アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
そろそろちゃんとやっとくHTML5入門【2014/2/14版勧告候補】 - Qiita
参考にするリファレンスについて とほほやHTML5リファレンスは最新の草案を反映しておらず内容が古い。 HTML5.JPにリストされていない要素は廃止もしくはHTML5.1に移動のため一旦削除されているので注意が必要。 HTML5.1各要素別メモも参考になる。 HTML5の要素 新要素はこれだけ section,nav,article,aside,header,footer,main,figure,figcaption,video,audio,source,canvas,mark,time,data,ruby,rt,rp,rb,rtc,wbr,bdi,details,summary,template,dialog,progress,meter,output,datalist,keygen [HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita 正式に仕様入りした要素
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
Guide to HTML Semantic Markup
2014年8月17日 HTML, Webサイト制作 連載企画「実践で学ぶWebサイト制作ガイド」も佳境を迎え、今回いよいよHTMLマークアップの段階に突入します！「デザインは好きだけど、コーディングは苦手…」という人も、焦らず少しずつ記述していけばちゃんと形になります！お手持ちの「TextEdit」や「メモ帳」などのテキストエディタツールを開いて、さっそく始めましょう！ ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その6 目標：正しいページ構造のHTMLが書ける 必要なもの：Windows メモ帳 や、Mac OS Text Editなどの文章エディタツール。もちろんAdobe DreamweaverなどのWeb系オーサリングソフトがあるならそれでOK 対象レベル：HTMLの基礎知識がある・基本的なHTMLタグが手打ちで書ける 目次 誰のため？何のため？We
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yu Morita, President, ux director at Turucame ltd. | SlideShare