HTML5一覧

SEO(検索エンジン最適化)のために「リッチスニペット」を導入!

リッチスニペット・Microdata・schema.org

Untitled by dandandanRyan, on Flickr
(schema.org ──早すぎたんだ!)

結論: リッチスニペットの導入は、最近の SEO には欠かせない。しかし、schema.org に手を出すのは まだ早い!

まず、この記事で言う「SEO」と「スニペット」とは、下のように決めてしまいます。ずいぶん限定的なようですが、必要にして十分だと思う。

  • SEO: Google 検索の結果有利に表示されること
  • スニペット: Google の検索で表示されたページの説明文

もっと言えば、自分のなかでは、「SEO = Google に好かれること」と思っています。

「リッチなスニペット」と「普通のスニペット」との違いは、下の記事を見れば すぐに分かるでしょう。

Google ウェブマスター向け公式ブログ: リッチ スニペットの導入について

──そう、具体的に言えば、検索ページで「ちょっと情報が増えるだけ」なのです。しかし、その すこしの差が検索した人の「ん?」に つながり、新たな訪問者を生み出す きっかけになる。

では、具体的に導入例を見ていきましょう──。

続きを読む


YouTube の「埋め込みコード」を Valid にする! HTML5 時代編

YouTube 動画の「埋め込みコード」

YouTube 動画の新旧「埋め込みコード」
リトルモンスターなら──貼らずには いられない)

YouTube で公開されている動画をブログで紹介したいぜ! ──ブロガ (Blog + er) なら、食欲と同じレベルで湧いてくる欲求ですよね。たぶん。

全ブロガの 98 割は、YouTube が提供する標準の「埋め込みコード」で満足することでしょう。「みんなと一緒」は、この国でも・あの国でも、絶対的な正義なのです。

ところが──、今も昔も、ゆーちゅーぶ先生が教えてくれるコードは、(X)HTML 的に・W3C 的に「よろしくない」。

そこで、以前は下の User Script を利用していました。これを GreasemonkeyScriptish などから使うと、Valid な HTML コードを出してくれます。

Valid YouTube Embed for Greasemonkey

しかし、現在のユーチューブは仕様が変更されました。

このスクリプトを使うには、わざわざ以前の埋め込みコードを使用するという項目にチェックを入れる必要があります。──この記事の上にある画像を参照してくださいね。

その上、ユーザ・スクリプトを利用しても、それほどクリーンなコードでもない……。

今回は、イイ感じに埋め込みコードを変更する方法──のヒントを紹介します。ちょっと歯切れが悪いのは、続きを読んでの お楽しみ……。

続きを読む


UTF-8 の文字化け対策! 「美乳」ではなく「†(ダガー)」を使う

文字化けと対策

Fight Mojibake!!!
(これからも── Mojibake と戦い続ける)

「文字化け」しているウェブサイトは、最近では見なくなりました(と思いたい)。

大昔──、まだ人類が石のヤリでマンモスと戦っていたころは、何度も何度もウェブ・ブラウザの「文字コード」を手動で変更していましたよね。何もかもが懐かしい──。

石のヤリ:
Internet Explosion ──もとい Internet Explore 6
マンモス:
Yahoo!ジオシティーズ

──いや、両方とも世間では健在ですけれど。

ウェブ上の文章が異常な状態で表示される原因は、おもに「文字コード」の問題です。ソフトウエアと人間の両方が成長することで、じょじょに改善されているけれど──。

文字化け – Wikipedia

Unicode 版「美乳テーブル」

ところが、まだまだ文字は化ける!

そこで、UTF-8 時代の「おまじない」として、次のページで面白いアイデアを紹介しています。

Unicode 版美乳テーブルを探せ

これをちょっとだけ改変して、利用してみました。

続きを読む


HTML5 に未対応の IE9 未満でも JS なしで マークアップする方法

HTML5 と IE

HTML5 logo with American Sign Language
オレンジ色の──にくいアンチクショウ

ウェブ・デザインの世界では、そろそろ HTML5 への移行が進みつつあります。まだ主流にはならないけれど、完全に無視するのは もったいない。

HTML5 を学ぶには、下のページが最適です:

さて、HTML5 の世界へ入門するにあたって、最初の難関は IE への対応でしょう。IE8 以下(IE9 未満)は HTML5 の新しい要素を認識できないため、そのままでは CSS で装飾できません。装飾系男子には困った問題だ。(ドヤァ

下で紹介するシンプルな JavaScript を利用することで、オールド・タイプな IE でも HTML5 の新しいタグを CSS でデザインできます。こちらは一般的な解決方法ですが、JavaScript を切られていると効果がない

そこで今回の目玉として、HTML5 用のタグでマークアップして、なおかつ JS を使わずに IE8 以下でも CSS でスタイリングする方法(※後述)を説明します。

2011-12-17T15:04:37+09:00 追記

中途半端な知識で小生意気なコメントを残したら、あの小飼弾さんに取り上げられました! 頭がフットーしちゃいそうなほど うれしい!

404 Blog Not Found:備忘録 – 本blogをHTML5にするためにやったこと

ただ、 100 文字以内という制限があるはてなブックマークでは、完全に意図を伝えられません。上の記事と関連しているため、今回の記事を加筆・修正しました。

続きを読む


livedoor Reader へ SSL 認証で自動ログインする方法

livedoor Reader 自動ログイン

livedoor Reader へ自動的にログインする HTML ファイルを作ったので、必要な方はご利用ください。

http://asiamoth.com/download/html/ldr_auto_login.html.txt

使い方は下の通りです。最後の呼び出した段階で、自動的に livedoor Reader が開きます。

  1. 適当な場所へ保存
  2. ファイルを開く
  3. *** で囲まれた場所を、自分のID とパスワードに書き換える
  4. 拡張子を「.html」へ変更
  5. ブラウザから呼び出す(ブックマークなど)
参考

下記のページを参考にして作成した。思ったより簡単で、ほかのページにもすぐ応用できる。

自動ログイン用HTML文書 – パソコン遊戯

また、id:amachang の影響でHTML5(の DOCTYPE 宣言)にした。まったく意味はないが……。

HTML5 の DOCTYPE 宣言って IE6 でも標準モードになるんですね – IT戦記

余談だけど Another HTML-lint は HTML5 に対応していない。対応が待たれるところだ。作者にビールをおごると良いかもしれない。

Another HTML-lint gateway

続きを読む