祭りの案内ページを見て「楽しそう！」って思いましたのでSNS（ソーシャルネットワーク）で友だちに教えてあげたくなったとします。
視覚的デザインは賑々しく楽しそうですね。必要かと思われる情報は網羅されているようです。ちょっとスクロールすると交通規制情報やシャトルバスの案内も記載されています。よく知らないヒトもこれを見ればだいたいなんとかなるかな、と思ってSNSにURLを書いたら……
こんなでした！
渋川市／第31回渋川へそ祭り
www.city.shibukawa.lg.jpJavaScriptが無効なため一部の機能が動作しません。動作させるためにはJavaScriptを有効にしてください。またはブラウザの機能をご利用ください。
あちゃー d(+_+)b
自動的に引っ張ってくる画像が残念なのは見逃すとして、情報として「JavaScriptが無効なため……」じゃないでしょう。アナログ的に考えるならば、自動的に拾う仕組みが稚拙で未熟であることについて追求するべきところかなと思いますが、実際には仕様が決まっているわけです。その仕様を無視するからこういうことになるのです。
「規格」に強いはずのニッポン人。何がいけなかったのか、ソースを見てみましょう。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>渋川市／第31回渋川へそ祭り</title> <meta name="author" content="渋川市" /> <link href="/shared/style/default.css" rel="stylesheet" type="text/css" media="all" /> <link href="/shared/style/shared.css" rel="stylesheet" type="text/css" media="all" /> <link href="/shared/style/color/color0.css" rel="stylesheet" type="text/css" media="all" id="tmp_color" title="default" class="tmp_color" /> <link href="/shared/style/color/color1.css" rel="alternate stylesheet" type="text/css" media="all" title="darkblue" class="tmp_color" /> <link href="/shared/style/color/color2.css" rel="alternate stylesheet" type="text/css" media="all" title="yellow" class="tmp_color" /> <link href="/shared/style/color/color3.css" rel="alternate stylesheet" type="text/css" media="all" title="black" class="tmp_color" /> <link href="/shared/templates/free/style/edit.css" rel="stylesheet" type="text/css" media="all" /> <link href="/shared/images/favicon/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <script type="text/javascript" src="/shared/js/jquery.js"></script> <script type="text/javascript" src="/shared/js/gd.js"></script> <script type="text/javascript" src="/shared/js/shared.js"></script> </head> <body class="format_free"> <div id="tmp_wrapper"> <noscript> <p>JavaScriptが無効なため一部の機能が動作しません。動作させるためにはJavaScriptを有効にしてください。またはブラウザの機能をご利用ください。</p> </noscript>
実際にこう書かれています（前後を適当に省略しました）。主に指摘すべきはこんなところです。
<meta name="description">が無い<meta property="og:description">も無い
もちろん、<meta property="og:image">も無い<body>の一番始めに書かれているのは「JavaScriptが無効なため……」
ヒトの目に見えるものの次に、同じくらい重要なこと
ソースコードは実際にヒトの目にふれる機会が少ないために軽視されがちで、可否の判断をする担当者も知識があるヒトばかりとは限らないため、どうしても見てくればかりに注目してしまい、その構造にまで目が行き届かないことが多々あります。
未だ混沌としているウェブの世界においては、「見たニンゲン様がそれでよければ良し」という、印刷屋さん的な考え方ではうまく乗り切ることができず、ニンゲン様と同じくらいに
- 検索エンジン（Googleなど）
- SNS（Facebook、twitterなど）
も、重要視すべき項目です。
じゃあ、何をどうすればいいの？
アレが無い、コレも無い、と前述しましたが、あるべきものがあった方がいいわけです。個人的には、そういうあれやこれやがあるおかげでなかなか本文にたどり着かないソースになることに疑問を感じていますが、機械的に読み取る内容について理解しておくべきでしょう。
大雑把に言えば、このような感じに読み取られているようです。
<meta property="og:description">の内容を探しに行く- 無ければ、
<meta name="description"> を探しに行く - それでも無いならば、本文
<body>の始めに書かれていることを参照する
全くこの通りということでもないようですが、ざっとこんなところです。
「description」を記述する！ 必ず！
これら「description」に書かれた内容が、検索エンジンやSNSでタイトルに続いて表示される「概要」として機能しています。ですので、面倒なら <meta name="description"> だけでもいいので、【このページを1行で言うならば！】という内容を記しておくべきです。提案書におけるサブタイトルみたいなものです。
<meta name="description" content="このページを1行でまとめた超要約">
お忘れなく！ マストです。まあ、できれば、og:description のあった方がいいですので、二重になりますけどこうですね。
<meta name="description" content="このページを1行でまとめた超要約">
<meta name="og:description" content="このページを1行でまとめた超要約">
同じことを何度も書くのは屈辱的ですし、邪魔臭いですよね。将来的にはもうちとスマートな仕様になってくれることを期待します。
<noscript> の位置
<noscript> とは、JavaScript が実行されなかった時にかわりに表示される代替テキストです。「JS はすべてのヒトが使えるようになっているわけではない」という下位互換のサービス精神で設計されるというよりも、「お前！ JS がオフになってるぞ」という警告に用いられがちです。
JS は手動でオフにしなければたいていメジャーなブラウザでは使える状態ですので、冒頭にこの警告が表示されるのはまったくお節介なことなのです。でも、確認する発注者もたいていは JS が使える状態で閲覧して確認しますから、この要らないメッセージについて差し挟むべき意見が無く、カンタンにスルーされてしまいます。
でも、できればこんなどうでもいいメッセージはなるべく最後の最後でよくて、それでもファーストビューに表示したいのであれば CSS で position とかして工夫をすれば見えるところに表示できます。
何よりも、JS が動かなければ内容が伝わらないようなページを作らないこと、JS が無いと困る場合にはその都度その項目ごとに対処をすることが必要ですね。
そして、装飾とかアクセス解析とか、コンテンツにべつに影響ない話ならば、わざわざ目に見える場所に警告を表示することもないのです。
言うべき重要項目をなるべく先に言うくせをつけましょう
HTML の概念的な基本は、主に英語のヒトたちによって規定されています。英語やその周辺言語での語順は、まず結論を述べてから枝葉を説明します。それは文においても文章となってもやはり「まず結論から」なのです。
このへんは、クライアントや投資家にプレゼンするのと同じ手法ですね。
まさか、「JavaScriptが無効なため……」が最重要ということはあり得ず、むしろ本文とは関係ない、ちょっとした参照情報なので、もっと後のほうでよいのではないかと考えます。
同じことを何度も書くのは、本当は不納得
仕様がそうだから仕方なくそうしていますが、<meta property="og:description"> と <meta name="description"> は、同じ内容になるはずです。こういう二重敬語みたいなことを無駄に冗長に書き込まなければならないということは、はたして閲覧者のためと言えるかと考えると、かなり疑問です。<head> 要素が長すぎて、大袈裟に言うならば昔のケータイならばそれだけで容量オーバーしちゃうんじゃないかとヒヤヒヤします。
検索エンジンや SNS はそれほどおバカさんじゃないと信じ、なるべくならば <meta property="og:description"> を省略したいと思っています。
OGP の他の要素については、ogp.me を参照してください。
……と力説したところで、グーグル先生が運営していらっしゃる blogger なんて、けっこうひどいままだよな。<p> タグも有効とは言えないし、やる気あるのかな。マネタイズの方法について迷走しすぎてどうでもよくなっちゃったかな？
