このブログの記事は構造化データとしてマークアップをしていましたが、それを改めてGoogleさんのRich Snippets for Articlesに対応したという話です。 Rich Snippets for Articlesが表示されたイメージ via Enabling Rich Snippets for Articles | Structured Data | Google Developers これまでは microdataの記法で下記の4項目を schema.org/BlogPosting としてマークアップしていました。 記事タイトル (name) 公開日 (datePublished) 本文 (articleBody) URL (url) ※()内はプロパティ 上記でも構造化データとしては間違ってはいないのですが、Rich Snippets for Articlesでは、記
Pelletkachels waren ooit eenvoudige apparaten voor verwarming, maar ze hebben een opmerkelijke evolutie doorgemaakt sinds hun bescheiden begin in de jaren ’80 van de vorige eeuw. In dit artikel duiken we diep in de geschiedenis van pelletkachel, bespreken we de belangrijkste mijlpalen en ontwikkelingen op het gebied van subsidiemogelijkheden en werpen we een blik op de transformatie tot moderne en
ここでは Web ページにメタデータを記述する RDFa について簡単に説明します。 「メタデータ（metadeta）」というのは「情報に関する情報」といった程度の意味で，特に RDF/RDFa の場合は，検索エンジンなどの機械が理解可能な（machine-understandable）情報を記述することを目標にしています。 まずは RDF から RDF から RDFa へ RDFa の基本的なルールと語彙 Dublin Core Terms Friend of a Friend Creative Commons Rights Expression Language 付録： Open Graph まずは RDF から RDF（Resource Description Framework）は情報を「主語（ subject）」，「述語（predicate）」，「目的語（object）」の3つに
[対象: 中級] この記事では、構造化データを実装するときに利用する、schema.orgやMicrodata、RDFaなどの役割とその違いについて、構造化データの初級者にわかりやすいように簡潔に説明します。 セマンティックの専門家が読むと「正しくは〜だ」とツッコミが入るかもしれませんが、僕たちは専門家ではありません。 SEOのために構造化データを利用するぶんには十分な理解が得られるはずです。 まず次の2つの質問を見てください。 Q1: 「schema.org」と「RDFa」ってどっちがいいの？ Q2: 「Microdata」と「RDFa」ってどっちがいいの？ Q1は答えられない質問です。 答えられないというのは、「どちらがいいか甲乙つけがたい」からではなくて質問として成り立っていないからです。 対して、Q2は「Microdataを勧める」または「RDFaを勧める」と答えることができます。
Using ARIA W3C Working Draft 04 May 2017 This version: https://www.w3.org/TR/2017/WD-using-aria-20170504/ Latest published version: https://www.w3.org/TR/using-aria/ Latest editor's draft: https://w3c.github.io/using-aria/ Previous version: https://www.w3.org/TR/2017/WD-aria-in-html-20170418/ Editors: Steve Faulkner, The Paciello Group, sfaulkner@paciellogroup.com David MacDonald, CanAdapt Solutio
【注意】 このドキュメントは、W3CのRDF Primer W3C Recommendation 10 February 2004の和訳です。 このドキュメントの正式版はW3Cのサイト上にある英語版であり、このドキュメントには翻訳に起因する誤りがありえます。誤訳、誤植などのご指摘は、訳者までお願い致します。 First Update: 2005年9月27日 RDF入門 W3C 勧告 2004年2月10日 本バージョン: http://www.w3.org/TR/2004/REC-rdf-primer-20040210/ 最新バージョン: http://www.w3.org/TR/rdf-primer/ 旧バージョン: http://www.w3.org/TR/2003/PR-rdf-primer-20031215/ 編集者: Frank Manola, fmanola@acm.org Er
普段の癖でSumallyを開いた時にWeb Inspectorを立ち上げるとconsole.logにメッセージがあることに気がついた。 なんだこれｗｗ 「We need couple of talented geeks. Are you the one? Check this out」 「探しものはなんですか？見つけにくいものですか？HTMLの中も、JSの中も、探したけれど見つからないのにまだまだ探す気ですか？それより僕と働きませんか？」 「コードやHTTPの通信を見て、まだまだ改善の余地あるな、と思ったあなた！僕らのチームに参加しませんか？」 「おおっと！Web Inspectorでチェックですか！そういう精神好きです。僕らのチームに参加しませんか？」 「We want you for our engineering team. Check this out」 うまいけど僕はそこで上記の
WAI-ARIA をマークアップに取り入れるはじめの一歩として、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら紹介します。 この記事は、Web Accessibility Advent Calendar 2013、4日目の記事です。ベタな内容なのでもしかすると他の方とかぶるかもしれませんが、気にせずいきます。 とはいっても、WAI-ARIA の仕様をすべて詳細に取り上げるのは大変なので、まずは WAI-ARIA を既存のマークアップに取り入れる際に、扱いやすい項目についてピックアップしつつ、それぞれのサンプルソースを挙げながら、紹介してみたいと思います。まだ WAI-ARIA をマークアップに取り入れたことがない方が、初めて使うきっかけになれば幸いです。 WAI-ARIA の仕様は下記にあります
この春頃からMicrodataを試してみたりHTML5にかかわる機会が増えてきたので、いずれ実施しようと考えていたサイト全ページの書き換えを敢行しました。スタイルシートはごく一部を除いてほとんど従来のまま。ページ自身のメタデータほかの構造化データは、Schema.org語彙を中心にして表現しています。 Microdataの記述 今回使ったMicrodataの一部を紹介しておきます。Microdataは、文書内に記述されたものごとの特徴を表す名前-値の対（プロパティ）のグループをアイテムと呼び、基本単位として扱います。 アイテムと型 Microdataの場合、まず最初にアイテムの範囲（スコープ）をitemscope属性で示します。文書のメタデータを表現したいので、html要素にこの属性を加えて全体を一つのアイテムとします（itemscopeは真偽値属性で属性名のみを記述しますが、XHTML構
meta 要素に対する Microdata の指定について、過去に書いた記事に間違いがあったので修正とその解説。また、itemprop 属性もつ meta 要素や link 要素の body 要素内での使い方に関しても解説してみます。 もうちょっと早く書こうと思ったんですけどこんなに間が空くとは…… 去年の末、HTML5 Advent Calendar 2012 の記事として、「Microdata を使ってみよう。サンプルソースで学ぶ Microdata」 を書いたんですが、その中で 2箇所ほどサンプルソースに間違いがあるのをご指摘頂いて修正したんですね （ご指摘感謝です）。 そのうち、1つの間違いは単純な記述抜けというか、ミスだったんで置いといて、もう1つ、私が meta 要素に対して itemprop 属性を指定したサンプルで、同じ要素に name 属性をあわせて指定してたのをご指摘頂
Webページの内容が、"何を意味するのか"をコンピュータが効率よく情報を収集・解釈できるようにする構想を「セマンティックWeb」「セマンティック(X)HTML」などと呼びます。 セマンティックHTMLを始めるにあたりMicroformatsとMicrodataの違いについて、"どう違うのか"分かりづらかったのでまとめてみました。 そもそもMicroformats、Microdataとは？ マークアップ言語であるHTMLは文章構造を表すことはできますが、意味までは表現できません。 例えば、人の名前や住所、電話番号といったものにHTML要素でマークアップすることはできません。 ただしMicroformatsとMicrodataを使うことにより、このような意味づけを可能にし、コンピュータも可読できるセマンティックなHTMLドキュメントを作成することができます。 Microformats、Micr
W3C が策定中の HTML 5.1 仕様、および HTML Canvas 2D Context, Level 2、HTML Microdata 仕様が更新されました。HTML Microdata 仕様に関しては、今回の更新で WG Note となっています。 10月29日付けで W3C の HTML 5.1 仕様が更新されました。 加えて、HTML Canvas 2D Context, Level 2、および HTML Microdata の仕様も 同日付けで更新されています。 HTML Working Group updated HTML 5.1, HTML Canvas 2D Context, Level 2, and HTML Microdata ： W3C News また、ほぼ同時にですが、11月1日付けで WHATWG の HTML(5) 仕様も更新され、blockquote
W3Cは本日2013/08/23、RDFaに関連する3つの仕様を勧告しました。勧告といえば、W3Cにおける仕様成熟度の最終段階。仕様はこれにて一旦完成です。 HTML+RDFa 1.1 RDFa 1.1 Core – Second Edition XHTML+RDFa 1.1 – Second Edition RDFaとは、コンテンツのメタデータを記述するためのフォーマットであるRDF (Resource Definition Framework) を、要素の属性（attribute）で指定できるようにした仕様です。HTML Microdataと競合する仕様ですが、Microdataと異なり、RDFaは（もともとXML由来の技術であった）RDFの流れを組むため、XHTMLをはじめとするXML文書全般でも利用が可能であるなどの違いがあります（その代わりMicrodataのような、JavaSc
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
<g> <g> <defs> <rect id="SVGID_1_" x="-468" y="-1360" width="1440" height="3027" /> </defs> <clippath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;" /> </clippath> </g> </g> <rect x="-468" y="-1360" class="st0" width="1440" height="3027" style="fill:rgb(0,0,0,0);stroke-width:3;stroke:rgb(0,0,0)" /> <path d="M13.4,12l5.8-5.8c0.4-0.4,0.4-1,0-1.4c-0.4-0.4-1-0.4-1.4,0L12,10.6L6.2
フッターのアイコンをSVGにした。GitHubにリポジトリも作っておいた。ぴくせる・ぱーふぇくとってなんでしたっけ……。 暗い背景向けの白いアイコンのみだけど、まぁそこは普通のSVGなのでエディターで開いてfillプロパティーの値を変えれば好きな色に変更できる。二種類ある矢印系には全方位を用意しなかったけど、transform属性でrotate()関数を利用して方向を調節できるのでそれで(若干中心をずらしてあるのでtranslate()も併用した方が良い)。 shape-rendering: crispEdges with crispEdges (Left) vs. w/o crispEdges (Right) Deliciousのアイコンはrect要素を組み合わせたものなので、そのままでは拡大・縮小すると端がぼやけることがある。そういう時はみんなが独自実装したCSSのimage-rend
この文書はRDFa Lite 1.1 (W3C Recommendation June 07 2012)の一部を日本語に訳したものです。正確な仕様についての情報を得たい方は、上記URLを参照してください。 Table of Contents 1. はじめに 2. 属性 2.1 vocab、typeof、property 2.2 resource 2.3 prefix 1. はじめに RDFaの完全な文法 [RDFA-CORE] は、人間関係や場所、イベントなどの構造化されたデータをHTMLやXML文書でかなり複雑な形で表現する事ができるよう、基本的なものから高級なものまで様々な機能を規定しています。それら高級な機能は時に構造化されたデータについてあまり詳しくない制作者によるRDFaの利用を難しくしています。この簡略化されたバージョンのRDFaは構造化データの世界の優しい手引きで、Webペー
Table of Contents Foreward Basic Marking License metadata License metadata with license image Attribution metadata More metadata: Title, type, and subjects. Individual Objects on a Page Text Block Images Video HTML5 video with one source tag and metadata HTML5 video with multiple source tags Non-HTML5 video Datasets CC BY dataset, with license and attribution metadata CC0 dataset, with license and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く