綾小路龍之介の素人思考

[xhtml] html や xhtml や SEO やアクセシビリティのハブ

html や xhtml や xml の文法、css や xsl によるレイアウト、SEO 関係やサイト訪問者のアクセシビリティ、そのほかサイト作成に関するポリシー的なものについてのハブ

目次

[アクセスアップ] 1 年でアクセス数を 10 倍にするには 1 ヶ月の伸び率 21% を 1 年キープ

google analytics では、アクセス数の 1 ヶ月の伸び率を表示してくれる。でも、その伸び率を続けたら 1 年でどのくらいアクセス数が増えることが期待されるかと言うことに関しては表示してくれない。

1 年でアクセス数を 10 倍にしたいと思ったときに 1 月当たりの伸び率がどのくらい必要なのかわからなくなる場合がある。そうでないにしても今の伸び率をキープできたら 1 年でどのくらいアクセス数が伸びるのかを知りたい場合がある。そこで下のようなテーブルを作ってみた。このテーブルを参照すれば、「1 年で 10 倍にしたければ 1 ヶ月当たり 21% の伸び率を 1 年キープすることが必要」とわかる。例えば現在の伸び率が 10% の場合、この伸び率をを 1 年間キープできれば 1 年後には大体 3 倍くらいになっていることが期待できる。

長期的目標を短期的目標にして、コンスタントにセルフチェックすることが重要。

目標と月当たりの伸び率
123456789101112
1.011.021.031.041.051.061.071.081.091.101.121.13
1.021.041.061.081.101.131.151.171.201.221.241.27
1.031.061.091.131.161.191.231.271.301.341.381.43
1.041.081.121.171.221.271.321.371.421.481.541.60
1.051.101.161.221.281.341.411.481.551.631.711.80
1.061.121.191.261.341.421.501.591.691.791.902.01
1.071.141.231.311.401.501.611.721.841.972.102.25
1.081.171.261.361.471.591.711.852.002.162.332.52
1.091.191.301.411.541.681.831.992.172.372.582.81
1.101.211.331.461.611.771.952.142.362.592.853.14
1.111.231.371.521.691.872.082.302.562.843.153.50
1.121.251.401.571.761.972.212.482.773.113.483.90
1.131.281.441.631.842.082.352.663.003.393.844.33
1.141.301.481.691.932.192.502.853.253.714.234.82
1.151.321.521.752.012.312.663.063.524.054.655.35
1.161.351.561.812.102.442.833.283.804.415.125.94
1.171.371.601.872.192.573.003.514.114.815.626.58
1.181.391.641.942.292.703.193.764.445.236.187.29
1.191.421.692.012.392.843.384.024.795.696.788.06
1.201.441.732.072.492.993.584.305.166.197.438.92
1.211.461.772.142.593.143.804.595.566.738.149.85
1.221.491.822.222.703.304.024.915.997.308.9110.87
1.231.511.862.292.823.464.265.246.447.939.7511.99
1.241.541.912.362.933.644.515.596.938.5910.6613.21
1.251.561.952.443.053.814.775.967.459.3111.6414.55
1.261.592.002.523.184.005.046.358.0010.0912.7116.01
1.271.612.052.603.304.205.336.778.5910.9213.8617.61
1.281.642.102.683.444.405.637.219.2211.8115.1119.34
1.291.662.152.773.574.615.947.679.8912.7616.4621.24
1.301.692.202.863.714.836.278.1610.6013.7917.9223.30
1.311.722.252.943.865.056.628.6711.3614.8819.5025.54
1.321.742.303.044.015.296.989.2212.1716.0621.2027.98
1.331.772.353.134.165.537.369.7913.0217.3223.0330.64
1.341.802.413.224.325.797.7610.4013.9318.6725.0133.52
1.351.822.463.324.486.058.1711.0314.8920.1127.1436.64
1.361.852.523.424.656.338.6111.7015.9221.6529.4440.04
1.371.882.573.524.836.619.0612.4117.0023.2931.9143.72
1.381.902.633.635.006.919.5313.1518.1525.0534.5747.70
1.391.932.693.735.197.2110.0313.9419.3726.9237.4352.02
1.401.962.743.845.387.5310.5414.7620.6628.9340.5056.69
1.411.992.803.955.577.8611.0815.6222.0331.0643.7961.75
1.422.022.864.075.778.2011.6416.5323.4733.3347.3367.21
1.432.042.924.185.988.5512.2317.4925.0035.7651.1373.12
1.442.072.994.306.198.9212.8418.4926.6238.3455.2179.50
1.452.103.054.426.419.2913.4819.5428.3341.0859.5786.38
1.462.133.114.546.639.6914.1420.6530.1444.0164.2593.81
1.472.163.184.676.8610.0914.8321.8032.0547.1269.26101.81
1.482.193.244.807.1010.5115.5523.0234.0750.4274.62110.44
1.492.223.314.937.3410.9416.3024.2936.2053.9380.36119.74
1.502.253.385.067.5911.3917.0925.6338.4457.6786.50129.75

[css] 色指定用のcssファイル

色指定を個別にする場合にタグのstyle属性の属性値にbackground:#FF0000とか指定する。例えば下のような感じ。

<div style="background:#FF0000; color:#00FF00;">背景色が赤で文字色が緑</div>

でも、統一的な外観をキープするためにはclass指定したほうがいいと思う。そこで下のような内容のファイルを作ってhtmlファイルからは外部cssファイルとして参照する。

.bg00{ backgrond:#FF0000; }
.co00{ color:#00FF00; }

その上で、上で挙げた例を書き換える。class属性の属性値にスペース区切りでclassを複数指定すれば指定されたclassが組み合わされて適用される。異なるclassで同じcssの属性に対して指定が行われている(css属性値の衝突する)場合は、後に指定したclassの属性が優先される。

<div class="bg00 co00">背景色が赤で文字色が緑</div>

もし、よく出来たブラウザとwebサーバがあるのなら、すべての色コードについてこのようなclassを作っておいても良いかもしれない。そうすればファイルサイズを小さく出来たり、データ転送量も減らせるかもしれないから。でも、この方法のポイントは統一的な外観を作ること。なので、いくつかの良く使う色と属性についてこのようなセットを作っておくことこそ本来の意味があると思う。

  1. OZACC.blog: CSS ひとつの要素に複数のクラス
  2. css 複数 class - Google 検索

Google co-opの検索用ソースをW3C Markup Validatorでクリアさせる方法

僕はこれで引っかかった。このページはXHTML+MATHML+SVGでDOCTYPE宣言しているので、scriptタグのsrc属性を書く場合は、空白を&nbsp;と&を&amp;のように記述せねばだめなようだ。「ようだ」というのはDTDをしっかり読んでないから。ということで下のようなコードがあった場合

http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ja

これを下のように書き換える。

http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja

この解決策は正攻法だが、対応していないブラウザがあるらしい。いつだめになるかわからないのでW3C Markup Validatorへのリンクをおいておこう。

一応僕のサイトにもGoogle co-op(Google カスタムサーチエンジン)を置いてみたのだが、どうやら本家とco-opでは参照しているデータベースが違うみたいで、co-opでは引っかからないキーワードも本家でsite:を使えば引っかかるということがわかった。co-opを導入してみたのはGoogle Analyticsでどう表示されるのかが気になったからだけど、co-opだと引っかからない場合があることを考えると、使い続けるにはどうなのかなぁと思ってしまう。うだうだ言っててもしょうがないので元に戻した。いまはco-opは使っていない。co-opで意味のあることをするには検索しにくいキーワードの絞込みとかかな。例えばR言語について日本語のページを検索したいときとかね。Rだけだと余分なものがいっぱい引っかかるのでRに関連したページを人力でco-op検索サイトとして登録して、出来上がったco-opページから検索するようにすればいいのかもしれない。

Google analyticsって結局JavaScriptが動かないとカウントされない。結構これは悲しいわけで。

  1. "http://www.google-analytics.com/__utm.gif" - Google 検索
  2. Google Analyticsでモバイルのログ解析(PHPとリンク集) | バレで昼寝
  3. 404 Blog Not Found:Google AnalyticsのAnalysis、そして滞在時間のウソ
  4. Troubleshooting the Tracking Code - Google Analytics - Google Code
  5. "http://www.google-analytics.com/urchin.js" - Google 検索
  6. google analytics img - Google 検索

検索サイトにGooとか追加。まぁ結局のところjsファイル読まないとだめですね。

  1. 「Google Analytics」検索エンジンにgooとinfoseekを加える

[MathML] 数式や図を作る

Opera が 9.5 になって MathML もうまく描画できるようになったらしいのでやってみた。

1 つ目 (mathml)

x+3

2 つ目 (mathml)

4=0111+x2 dx=n=0(-1)n 2n+1 4=0111+x2 dx=n=0(-1)n 2n+1

3 つ目 (svg の直書き)

4 つ目 (object タグで svg の埋め込み)

svg の埋め込みだと拡張子が html でも読み込める。svg の直書きだと拡張子が html で表示されない。ここらへんはサーバ側の設定やクライアント側の設定とか色々ありそうで一言では言えないような気がする。まぁ、サーバは本当にデータを渡すためだけに機能し、受け取ったデータをクライアントが解析して、データが正しく表示されればいいのだけれど。

[CSS] レイアウトと見栄えの話

最近よくある 3 段ぶち抜きペインとか、サイドバーとかってどうよ。横幅の狭いディスプレイとかウィンドウの横幅を狭くしてみたとき、本当に見えなければいけないメインコンテンツ (その多くは真ん中にあるが) の幅がものすごく狭くなったりする。また横幅指定されているがために、横スクロールしないとメインコンテンツが見えなかったりする。これってどうよ。やっぱり一目で情報が見渡せる範囲は限られているわけで限られたスペースを有効に使わないといかんと思う。

[html] サイトデザイン

サイトデザインについて考えてみた。

このサイトの場合

結局横にメニューを入れるのはやめた。最終的にもっともよいと思われたのは最もシンプルなものだった。苦労してサイドメニューのレイアウトを考えたが、あまり役に立たなかったようだな。改めて書いてみると、LaTeX的レイアウトだと思う。下のような感じで上から下に向かってずらーっと並べる

+--------------------+
| Title              |
+--------------------+
| Abstract           |
+--------------------+
| Table of Contents  |
+--------------------+
| Contents           |
+--------------------+
| Tanks for everyone |
+--------------------+
| Table of Contents on Upper Document  |
+--------------------+
| Credit             |
+--------------------+

サイトデザインの指標として

  1. http://builder.japan.zdnet.com/news/story/0,3800079086,20378931,00.htm
  2. http://www.okuramkt.com/dic/mkt/landing_page.html
  3. ASHのコンテンツについて
  4. ウェブアクセシビリティチェックサイトHAREL
  5. Firebugでラクラク診断~Yahoo!が明かすページ表示の高速化13のルール - Dragon.jp
  6. Unobtrusive Google Analytics Integration » The Notebook » Refract, the online landscape of Rommert Zijlstra

[css] 背景色と前景色の組み合わせ

色指定の基準が合ってもいいと思う。そうは言っても、絶対的な基準を作れるほど色のことについては良く知らない。だからこのページは一般的基準ではなくてマイルール。

16 色

色数の少ないところから始めよう。前景色背景色の組み合わせとして見やすいとされている W3C の基準を満足する組み合わせは 256 の組み合わせの内たった 14 個である。意外なことに、注意を喚起すると思われる赤は前景色背景色どちらで使用しても赤以外との組み合わせは見にくいと判断された。

背景色と前景色の組み合わせ
NGNGOKOKNGOKNGOKNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
OKNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
OKNGNGNGNGNGNGNGNGNGOKNGNGNGOKNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
OKNGNGNGNGNGNGNGNGNGNGNGNGNGOKNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
OKNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGOKNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
NGNGNGOKNGOKNGNGNGNGNGNGNGNGNGNG
NGNGNGNGNGNGNGNGNGNGNGNGNGNGNGNG
OK:14 NG:242

[メモ] ブラウザの設定が変わっても変わってほしくないものはコンテンツの見易さ

自分のサイトのユーザがどのような機器を使って自分のサイトから情報を得ているかはほとんど不明である。例えば、このサイトのユーザがコンテンツをどのようなサイズ (文字のサイズ、window のサイズ、ディスプレイのサイズ) で見ているか僕には全くわからない。

コンテンツの魅力というものは、内容がユーザによく理解されてこそ得られるもので、内容が貧弱であったり見難いものであったりすると、ユーザの理解度はさがり、よく読めば非常に魅力的な内容であるにもかかわらず、コンテンツの魅力が下がってしまう。類似した内容を提供する Web ページが大量に存在する今だからこそ、自サイトのコンテンツの理解度を高める努力をしないことは、類似した内容を提供している他サイトに流れてしまうユーザを増やすことになり、自サイトのユーザ数を減らすことになる。どのようにして他サイトに流れる引き止めるかということはサイトのオーナーにとって重要な戦略だと思う。内容コンテンツを提供する側はこのような点を考慮して、コンテンツの理解度を左右する一つの要素である「コンテンツの見易さ」に配慮したサイトを作成するべきだと思う。ここからは、このサイトにおけるコンテンツの見易さを考えてみる。

まずは、ユーザがどのようにしてこのサイトから情報を得るか考えなければならないだろう。このサイトのメインコンテンツのほとんどはテキスト情報であり、ユーザはテキストを読んで「文字から情報を得る」だろう。そこで、ユーザの内容理解の手助けとなるのは文字に関連したパラメータだろうと仮定した。つまり文字サイズ、文字字間サイズ、行間サイズ、段落間上下外余白である。り、文字のサイズを基準にして余白設定するべきだと思う。

ディスプレイ上に映し出される文字の大きさは、「ピクセルサイズ (1 ピクセルの形)」に依存する。ここでいう「ピクセルサイズ」には 2 種類あり、「ディスプレイのピクセルサイズ」と「OS のピクセルサイズ」がある。

ディスプレイサイズとピクセルサイズ
ディスプレイ斜辺長[in]横ドット数[dot]縦ドット数[dot]ディスプレイのピクセルサイズ[dpi]
1564048015[in] * x[dpi] = 640[dot]
15800600

同じディスプレイサイズの場合、ピクセルサイズは解像度が細かいほうが短い。

前者について考えると例えば、異なる大きさのディスプレイの表示可能枠いっぱいに同じ解像度で表示した場合、ピクセルサイズはディスプレイサイズが大きいほうが長い。また、同じ大きさのディスプレイの表示可能枠いっぱいに異なる解像度で表示した場合、ピクセルサイズは解像度が細かいほうが短い。すなわち、ユーザのディスプレイサイズと解像度によってはピクセルサイズは変わりうる、ということだ。つまり、Web ページで論理的に同じ大きさを指定しても、ユーザの目に入る文字の大きさは Web ページを見ている機器によって異なるということだ。

では、文字に関連するパラメータのサイズをどのようにして指定するのがよいのか。サイズ指定には大きく分けて絶対指定と相対指定の 2 つがある。絶対指定は cm, pt のようなものである。絶対指定の場合は、1 ドット当たりのインチ (dpi) が機器ごとに設定されているので、これを元にディスプレイ上で何ドットか計算され表示される。残念なことに、12 cm と指定したらディスプレイ上でも常に 12 cm というわけではない。その理由は、OS の考える dpi と実際のディスプレイの dpi が異なるからである。例えば、12 インチと絶対指定し OS の dpi が 96 dpi だとすると、96 dpi * 12 in = 1152 dot ということになり、ディスプレイ上で 1152 ドットの長さに相当する。解像度 800x600 の 15 インチディスプレイ (ディスプレイの対角線の長さが 15 インチ) では sqrt(800 * 800 + 600 * 600) dot / 15 in ≈ 66.66 dpi なので、このディスプレイ上で 1152 dot は 1152 dot / 66.66 dpi = 17. 28 in に相当する。このように、絶対指定の 12 in はディスプレイ上の長さとイコールになるとは限らない。つまり、に表示にユーザの使用している機器に依らない。長さの単位に変換できるできる大きさは 3 つあり、window の大きさに対して相対的に変化する「パーセント指定」と文字の大きさに対して相対的に変化する「em 指定」と、ピクセルサイズに対して相対的に変化する「px 指定」がある。

ブラウザ window の幅とか高さを変えるとパーセント指定していた部分はそれに対応して変化する。ものすごく私的な意見だが、このような変化によってきれいに見えるようになる場合と汚く見えるようになる場合があると思う。僕が自分のサイトを読むとき、パーセント指定によって変化してほしくないものを下に挙げる。

このような部分をもしパーセント指定すると、window の高さを縮めると要素間が詰まって表示される。一つの p 要素はある一つの内容を含み、p 要素の区切りは内容の区切りである。著者が内容の区切りを意識して書いた部分には視覚的にも余白が必要である。内容の区切りを意味する余白の高さが window の高さの変化に対して変化するのは、読者の window サイズによっては内容の理解に差が出てきてしまうことになる。したがって、上に挙げた要素間の上下外余白は window サイズに対して動的に変化するように (パーセントで) 指定するべきではないと思う。

p、pre、ol、ul、dl 要素間の上下外余白

[seo] SEOのネタメモ

  1. http://woork.blogspot.com/2008/03/css-message-box-collection.html
  2. http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx
  3. 10 Ways to Increase Your Site Crawl Rate
  4. Kick Butt With Internal Site Search Analytics | Occam's Razor by Avinash Kaushik
  5. スタートアップが押さえておくべきSEOの極意、6カ条 - @IT

[html] *mlのタグの使い方メモ

html、xml、xhtmlとかのタグを使うときの使用方法についてのメモ。

baseタグを使う僕なりの理由

ネームスペースとかクラスとかの考え方がある。あるネームスペースが有効な範囲内では、ある名前は其のネームスペース内で有効な名前と考えられる。baseタグを使うと同じようなことが出来ると思う。もしbaseタグに自分のホームページスペースのルートディレクトリが書いてあれば、ルートディレクトリが変わらない限り其のページが同じホームページスペース内で移動したとしても、リンク先のアドレスの変更は必要ない。

ただし、もしミラーサイトを作った場合、ミラーサイトにあるページを見ているユーザがリンク先に飛ぶリクエストは常にマスターサイトへのリクエストになってしまう、という問題がある。

linkタグrel要素とかrev要素に対応したページ

Operaのナビゲーションバーを表示させると出てくるボタンはそれぞれ、下のような感じ。各ページのheadセクションにこのようなlinkタグを付け足して、それぞれのlinkタグに対応したページを独立させて作っておくというのはどうだろう。まぁ裏取れてないけれど。

ホーム
<link rel="home" href="home.html" />
索引
<link rel="index" href="index.html" />
目次
<link rel="contents" href="hoge.html#contents" />
検索
<link rel="search" href="search.html" />
用語集
<link rel="glossary" href="glossary.html" />
ヘルプ
<link rel="help" href="help.html" />
最初
<link rel="start" href="hoge.html#start" />
前へ
<link rel="prev" href="prev.html" />
次へ
<link rel="next" href="next.html" />
最後
<link rel="last" href="hoge.html#last" />
親階層
<link rel="up" href="up.html" />
著作権
<link rel="copyright" href="index.html#copyright" />
作成者
<link rel="author" href="index.html#author" />

それぞれのリンクタイプについての解説は邦訳:Modularization of XHTML - Defining Abstract Modulesが詳しい。

strongタグ

強調のためと太字のためというのは違うわけだ。文脈上の意味合いとして強調したい場合はstrongたぐを使うわけだし、強調したい部分を視覚的にわかりやすくするために太字にしたり斜体にしたり色付けしたりする。太字というのは視覚的な変更であって文脈上の意味合いとはまた違ったものだと思う。

  1. 強調,引用,グループ化,画像などの要素 -- ごく簡単なHTMLの説明

[google] 検索ユーザが求めるもの

よくまとまっているページなのではないだろうか。では、「よくまとまっているページ」とはどのようなものだろうか。どのようなユーザも満足することが出来るようなページを作るのはかなり難しいと思う。自分のページが対象としているユーザを、僕はどのようにして決定すればよいのだろうか。検索ユーザからのレスポンスは、検索キーワード以外にはわからないだろう。ということは、それぞれのページが対象としているキーワードを明確にして、そのキーワードについてのコンテンツを書き上げるというアプローチが適しているのだろう。

[SEO] 表現の正規化、統一

検索エンジンがどのようにしてランク付けをしているのか全くわからないけれど、自分のサイトの中では同じものを意味する物については同じように表現するように心がけてみよう。たとえば、operaとかOPeraとかのかわりにOperaで代替するとかね。c言語の変わりにC言語と書くとかね。それ以外にも、urlの正規化とか。つまり、同じ内容を参照する際に最も信頼の置けるソースをurlにするとかはどうなんだろう。たとえば、日本語版perldocは腐るほど同じ内容ページがあるが、その内容を参照する場合に全部perldoc.jpにしたら、perldoc.jpにはすごい負担がかかるわけで。これは負荷分散の感覚からしたらだめなんだろうけど。

[SEO] パーマリンクと検索エンジン

検索エンジンには大量の情報を渡し、その中から人間に渡される情報は可能な限り最小化するべきだということ。検索エンジンは結構賢いわけで、検索エンジンを自分のサイトへのフィルタとして機能させるのは重要だということ。結局のところ、今までの検索エンジンはページ単位である。情報に対する紐付けの役割をなしている検索エンジンの結び付けられた先はページである。だから、人間は結局検索キーワードから紐付けされたページから自分に必要な情報を探しださなければいけない。このことは人間にとっては激しく面倒な話で、おそらく検索エンジンによって精度の高い情報と判断されても、人間にとって有用と判断されない。

じゃぁどうするか。人間が面倒だと思うのは検索エンジンから提示された候補から必要な情報を読みとるさいのページ内検索である。検索エンジンによっては検索キーワードをハイライト表示してくれたり、ブラウザによっては検索キーワードをハイライト表示してくれたりする。そのため、このようにして元ページに対して、情報をプラスアルファされたページを読むのが人間にとって効率がよい場合がある。しかし、残念なことにそうでない検索エンジンもあるし、そのようなブラウザを使っていない場合もある。

だから、単一のページとそこに含まれる情報は意味として単一である必要がある。コンテンツを作る側は、検索エンジンがキーワードに対して導きだすページというものに対して、単一の意味を与えるべきだ。このようにすることで、ユーザはより提示されたページが不要か有用か判断が容易になる。つまり、これまでページ内項目として意味的に分割していた部分を、項目同士の繋がりが無ければ別ページとして可能な限り分割させるべきだと思うわけだ。ユーザには必要十分で可能な限り少ない情報を与える。そうすることでユーザの必要な情報をすばやく拾い出す手伝いが出来ると思うわけだ。

ユーザのお手伝いという意味においてサービスを展開することは古い考え方ではない。googleだってそうだ。googleの検索結果のページには極力ユーザを引き止めておかないようにしておくことはgoogleだった考えていることだからね。

  1. ブログ permalink - Google 検索
  2. ブログとグーグルの親和性 [Permalink] - higuchi.com blog

ソーシャルブックマーク

  1. はてなブックマーク
  2. Google Bookmarks
  3. del.icio.us

ChangeLog

  1. Posted: 2009-02-27T02:57:28+09:00
  2. Modified: 2009-02-27T08:21:22+09:00
  3. Modified: 2009-04-11T11:21:23+09:00
  4. Modified: 2009-04-11T12:54:57+09:00
  5. Generated: 2017-08-20T23:09:20+09:00