サイトを作る上でやったほうがいいと思うSEO

覚書。やったことを書いてみる

基本

keywordは無駄

metaタグにkeywordを含めましょうとか引っかかるけど、現時点では無駄。書いても書かなくてもいいけど意味ないと思われる。

http://web-tan.forum.impressrd.jp/e/2009/09/25/6581

title/descriptionは一意に

当たり前だけど非常に重要。これは守りましょう

imgにaltをつける

これも当たり前だけどやりましょう

tree構造を意識する

親子関係、上下関係をきっちりと作りましょう。例えば、「カテゴリの下にスレッド達が属している」の様に大雑把にでもそこに何が書いてあるかまとめましょう。パンくずをサイトの中に設置して明示的に表すのもいいと思います。

htmlの構文チェックはやりましょう

当たり前だけど正確なHTMLの記述はまもりましょう

非同期に作るのはやめましょう

onloadで非同期的に作るとまだ弱いように見えます。一応解析はしてくれているようですが静的なページで記載できるならそれに越したことはありません。

移動はaタグをつかいましょう

javascriptで画面遷移をさせるとクローラーが理解できずにスルーされる可能性があります。aタグを使ってどこにリンクがあるのかを明示的に書きましょう。

sitemap.xmlのpriorityは適切につけましょう

高ければいいだろうと全て1.0にしているサイトとかありますけど意味ありません。priorityはそのドメインのページたちの相対値です。ということは、全て0.1で記載しても1.0で記載しても同じことだということです。トップドメイン、そのサイトを表すために重要なページにしっかりとpriorityを振りましょう。

ウェブマスターツールへと登録しましょう

こんなサイトがありますよということを伝えるためにもちゃんと登録しましょう。indexされる速度が当社比1.5倍程度早くなります。

robot.txtを記載しましょう

細かいものはどうでもいいですけど、sitemapのありかぐらいはrobot.txtで書いてあげたほうが検索エンジンにやさしいと思います。

og属性は書いた方がいい

とりあえずサイトの情報を表すものは記載しましょう。


まとめ

結局は検索エンジンの中身に振り回されないようにするためには、以下を守るに限る

  • サイト情報を表すものはきっちりかく
  • 検索エンジンが読みやすい構造、ファイルを意識する

後は、そのサイトにどれだけ有用な情報があるかになるけど、これはコンテンツの質を上げるということでそんなこと一朝一夕でできるわけない。地道な努力が必要です。なにか必要だけど抜けていることなどあれば教えて下さい。

CSS3のborder-imageで気をつけたいこと

border-imageを使って気づいたことを書く

記載方法

http://www.htmq.com/css3/border-image.shtml

ここに書いてあることと同じだけど、こんな感じになる。

border-image(url(hogehoge) slice / width / outset repeat)

きちんと書くとこうなる。どこまで実装が間に合ってるのかわからないけど、sliceはpxつけちゃだめだけどwidthは付けないといけないっぽい。これは本当の動作なのかが分からないが注意が必要。

chromeとfirefoxの違い

ここからが本番で、chromeとfirefoxで動きが違って、色々困ったのでメモ。

塗りつぶしの違い

chromeでvender prefixが付いている時だけ、sliceにfill属性が入る。fillが入ると塗りつぶされるわけだが、vender prefixが抜けるとfill属性が外れる。多分fill属性が外れるほうが正常な動作だと思われる。fillを入れる場所は以下。

border-image(url(hogehoge) slice fill / width / outset repeat)

border-widthの違い

chromeではborder-imageをつけるとborder-widthも自動的に変わるけど、firefoxの場合はborder-imageを設定しただけだとborder-widthが変わらない。この場合は、透明なborderを先に引いておくことで同一動作になる。これ、順序が変わるとborder-imageが効かなくなるから注意が必要。

border: solid width transparent;
border-image(url(hogehoge) slice fill / width /outset repeat)

まとめ

とりあえず、記載した2つに注意すれば同じような見た目にすることができることがわかった。まだ実装段階だから色々齟齬が有るんだろうけど、最終的には統一してほしいなぁ。ちなみにIEはしらない。あんなやつ爆発すればいいと思う。

Canvas操作の基本

Canvas操作の基本をメモる

線を引く

beginPath()で開始。moveTo()で開始位置まで動いて、線を引く場所までlineTo()で動く。stroke()で実際に惹かれる。色を替える場合はstroke()の前なら大丈夫。strokeStyleで線の色を設定。

	// 線を引く
	ctx.beginPath();
	ctx.moveTo(xStart, yStart);
	ctx.lineTo(xEnd, yEnd);
	ctx.strokeStyle = color;
	ctx.stroke();

長方形を書く

fillRect()でいける。width/heightを引数に渡すことを注意。塗りつぶしの色はfillStyleで設定。

	// 長方形を書く
	ctx.fillStyle = color;
	ctx.fillRect(xStart, yStart, width, height);

不規則な形

lineTo()で適当に線を引きまくって、closePath()を呼び出せば最初と最後がくっつく。塗りつぶす場合はfill()でいける。

	// 不規則な形(三角形)
	ctx.beginPath();
	ctx.moveTo(xStart, yStart);
	ctx.lineTo(x1, y1);
	ctx.lineTo(x2, y2);
	ctx.strokeStyle = color;
	ctx.closePath();

グラデーション

createLinearGradient()は開始位置と終了位置で色の変わり方を設定、start/endは0-1の値を設定する。縦にかけたければX軸を、横にかけたければY軸を同じ値にする。

	// グラデーション(縦方向)
	var grad  = ctx.createLinearGradient(startX, startY, endX, endY);
	grad.addColorStop(start, colorStart);
	grad.addColorStop(end, colorEnd);
	ctx.fillStyle = grad;

アニメーション

案外力わざ。setInterval()でクルクル回して少しづつ伸ばしていくみたい。これならCSSアニメーションの方が綺麗だったりしないのかな。

	// 横長くなるアニメーション
	var w = 0;
	var animId = setInterval(function() {
		ctx.fillStyle = color;
		ctx.fillRect(xStart, yStart, w, height);
		w++;
		if(w > width) {
			clearInterval(animId);
		}
	}, 100);

まとめ

以上。ざっくりと使える分を書いてみた。

スマホで円グラフを表示するライブラリメモ

スマホで円グラフを作らないといけなくなったから調べてみた。試した環境は以下の3機種

  • android4系
  • nadroid2系
  • iPhone4系

3つぐらい見てみたけどChart.jsが一番良さげ。

gRaphaël

http://g.raphaeljs.com/

なんて読むのかわからない。Android2系だとVector画像が作れないのか表示されない。却下。

jQuery Visualize Plugin

http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

jQuery系だから動くは動く。けど、ジャギが汚い。

Chart.js

http://www.chartjs.org/

なんかかっこいい。どれでも普通に表示される。

Androidの一部端末でTextAreaにline-heightを指定すると選択位置がずれる

一部端末というより今の状態だと現象が起こる端末の方が多そう。現象を詳細に書くと「テキストエリアに長文を入力して、入力した文章の途中を変更しようと変更箇所をタップしてもタップした位置が選択されない」というもの。

なぜそうなるのか?

一部端末のAndroidの標準ブラウザではtextarea:focusに対するline-heightが効かないが、textareaに対してはline-heightが効くので、フォーカス時と非フォーカス時で見た目の高さが変わってしまう。変更したい箇所をタップしてカーソルを移動した場合、非フォーカス時のline-heightで位置が計算されるようで、表示はフォーカス時のもの、選択した位置は非フォーカス時のものとなってしまいカーソルがずれてしまうというのが本現象を引き起こしている模様。

対処法

今のところ対処法は無い。textarea:focusでもCSSが効く端末と効かない端末を判別出来れば色々できるだろうけど、端末名をUserAgentから引っ張りだしてやるにはケアレスミスが多すぎるのでtextareaにCSSを指定しない or CSS効かなくても問題がないデザインにするしか無いと思う。

まとめ

AndroidのChromeは大丈夫なのに標準ブラウザは解釈できないってなんだよー。iPhoneはできるみたいだからもうちょっと頑張って欲しい。

location.hrefでの画面遷移はSEO的にどうなの?

色々調べてみたがGoogleさんがどういう解析をしているのかがわからないので結論は出ない。

http://www.suzukikenichi.com/blog/google-can-read-javascript-and-pass-pagerank-and-anchor-text/

Googleは、Javascriptのリンクも通常のリンクと同じように取り扱い、PageRankも渡すし、アンカーテキストも評価するようになりました。

ただし同一ページ内にスクリプトのコードが存在している場合で、スクリプトファイルを外部化している場合は対象になりません。

という記事が2009年に出ているので、これよりもクロールしなくなっているということは無いんだと想像できて、同一ページにlocation.hrefでアンカーを貼った場合は評価してくれることになる。別の言い方をすると、別ページにlocation.hrefによるページ遷移を書いた場合はアンカーテキストとして認識されず、それ以降のリンクをクロールしてくれないってことになる。

最近動的にページを作るサイトが増えているけど、少なくともアンカータグで記載している静的サイトに比べて動的に作成するコードが別ソースに書かれているサイトはSEO的に弱くなるんだろう。ajaxでデータ受信して動的に作成するサイトの場合、「#!」でハッシュ値を教えてあげてそれに対応した静的ページを作れば問題ないらしい。なんでそんな手間なことをやらないといけないんだって気がしなくはないんだが、JSの中身まで全部解析しろっていうのも刻な話しなんだろう。

結論としてはツールとして使われるようなサイトの場合は、TOPページがインデックスされれば問題ないという割り切りをして使いやすさを求めてajaxで動的に作成するっていうのはありだけど、Googleからの流入を狙っているようなサイト(ブログとか)でajaxで動的にメニュー作ってみようとかはやらないほうがいいんだろうなぁ。


styledoccoのドキュメント少なすぎだろ

styledoccoを使ってみてすげーハマったので覚書

本家サイト

http://jacobrask.github.com/styledocco/

ドキュメント乗ってなさすぎだろっていう

インストールやらの手順

http://ameblo.jp/ca-1pixel/entry-11453624925.html

ここに書いてあるとおり。コマンド一発ですね

sudo npm install -fg styledocco

はまったこと

htmlが認識しない

ちょっと変更して動かしてみたけれど一向にCSSが反映されないと思ったら、改行がないとhtmlを認識してくれないっぽい。改行の位置は重要。

/*
## もっと見る
各種リストのもっと見るボタンです。commonに移動したほうがいいかも
<-- ここに改行がないと認識しない --> 
	<div class="more">
		もっと見る
	</li>
*/
.more {
	line-height: 2;
	text-align: center;
}
.more.tap {
	background-color: #ddd;
}

stylusが認識しない

以下のコマンドで動くかなぁと思ったが動いてくれない。どこみてもsass使った例しか書いてないしstylusにこだわる必要ないからsassに変更した。

styledocco –preprocessor “stylus”

compassが認識しない

preprocessorの指定に以下を追加することで動く

–preprocessor “sass –compass”

まとめ

ドキュメントの自動生成でstyledoccoは綺麗だからいいんだけど、ドキュメントがなさすぎる。本家サイトのdocumentが404pageに行くってどうなのよ。。。もうちょっとつかってみてダメだったら違う奴に変更しようかなぁ。

Webfontについてちょっと調べてみた

↓を読んで「ん?」って思ってブコメを読んでちょっと納得して少し知らべて思ったことのメモ

画像アイコンはもう古い!CSSでスタイル自由自在のアイコンWebフォント – W3Q

重いんじゃね?

ベクターファイルだから基本的には軽くなることが多いらしい。自分で作ったこと無いからわからないけど、ベクターファイルでできてるんであれば大きな画像になればなるほど軽くなると思う。ただし結局はフォントセットを丸々ダウンロードすることになるから1箇所だけWebfontを導入してIcon作ってみましたとかだと重くなると予想できる。やるなら画面で使っているiconをすべてwebfontに変更してその組み合わせだけのフォントセットとかを作ってやれば軽くなるんじゃないかと思う。そうすればCSS Spriteと同じような効果が発揮されるんじゃないかと想像。

色付けれないんじゃね?

fontだから色付けられないんじゃないかと調べてみたらやっぱりそうみたい。基本的に装飾はCSS3で装飾してtext-shadowつけたりcolorで色変えたりとかそこら辺で頑張るのが普通っぽい。iconとか簡単かつ単色で問題ない画像ならいいだろうけど複雑で単色ではないものを実現したいときはwebfontを使うのは無理。relativeとかで重ねればなんとかなるのかもしれないけどそこまでの労力を払うなら画像用意したほうがよっぽどいい。

SEO的にどうなの?

Webfontって本来は普通の文章を装飾するためにあるものだからSEO的には全然ダメだと思う。普通に文章書いてて特殊なフォントで記載したタイトルとかを出したいからしょうがなく画像を使ってますとかそういうサイトならSEO的にいいと思うけど、今回の使用方法を考えると全然ダメ。これなら画像にaltをきっちり書いたほうが機械も理解しやすいだろうからそっちのほうがいいんだろうと想像。

Fontファイルがダウンロードされなかったら終わりじゃね?

普通にブコメでも突っ込まれてたけどそうだよなーって思う。webfontって単なるフォントだからaっていう文字コードがきたら☆っていうものを表示してねっていうだけの技術なんでわけわからないものが見える可能性がある。だけどちょっと考えると、リストのiconを表示したいんだったら上から順番に1,2,3,4とかいう数字に表示したいものを割り当てればダウンロードされなかったとしても普通に見えるだろうし、twitterのマークをtに割り当てるとか文字と画像が何となく分かる組み合わせだったら問題ないのかも。

まとめ

つらつらと書いてみたけどWebfontは文字の装飾で使うべきで画像の代わりに使うものではないと思う。でもいっぱいアイコンを使わなければならないサイトとかならダウンロードされなかった場合に表示される文字と画像とがつながっているのであればお気軽に使えるCSS Spriteの代わりとして使うのもありなのかなーって思った。僕としてはSVGでブラウザに画像書かせようぜ!っていうほうがメリットが大きいんじゃないかなーって思う。

参考

http://design.kayac.com/topics/2012/02/webFontIcons.php

便利!Webフォントをアイコンとして使う方法 – NAVER まとめ


SASSを触ってみた

第16回 勉強会でのSASSがすごく便利そうだったので触ってみた。使い方の感想とメモ。

インストール

Macだったら以下のコマンド一発でOK。楽勝

sudo gem install sass

既存のCSSをSCSSファイルのコンバート

今までは生のCSSを記載していたから、どれだけの精度があるのか試しがてらCSSからSCSSへとコンバートしてみた。css2sassってコマンドがあるみたいだけど、お試しだから以下のウェブサービスで変換してみた。

css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

変換後のファイルと変換前のファイルを比べてみた感想としては、classとかidのネストを検出して変換しているように見える。僕としてはインデントとカッコの綴じ方とかが気に食わなかったけど、どういうふうに書けるのか?っていうのをCSSとSCSSとで比較できるという意味でかなり便利だと思う。

SASSファイルを監視して自動でCSSファイルに変換

これもコマンド一発。以下のコマンドで変換できる。

sudo sass input.scss:output.css

ディレクトリ指定とかコンパイルしたものを出力とか改行をちゃんと入れて出力とか色々オプションがあるらしい。詳しくは以下のURLの3を参考に。

web帳 | CSSライブラリ化? Sass(scss)のインストール方法 mac

mixinを書いてみる

mixin書くだけで十分捗ると言われていたので、mixiをとりあえず書いてみた。よくdivのbackgroundに画像を入れるたびに同じ事を書いていたのでまずはそこを変換してみた。

@mixin mixin-background-image($imageUrl:””, $size:contain) { background-image: url($imageUrl); background-position: center center; background-repeat: no-repeat; background-size: $size; }

使う場所には以下のように記載する。

@include mixin-background-image(“../img/arrow_sub.png”, contain); }

毎回書いている部分がちょっと減るからすっきりする。最初からSASSで記載していればもうちょっと共通的に使える部分をmixinで切り出すことで変更に強いCSSがかけるのかなぁという印象。ベンダープレフィックスをわざわざ書くのがめんどくさいのでそこら辺のmixinを書けばもっと楽になると思う。

まとめ

大体1時間ぐらいしか触ってないんだけど、SCSSで記載すればちょっと便利なCSSだと思って書くことができると思う。他にもいろいろ便利な機能はあるんだろうけど、とりあえずSASSとしてファイルを作ってみて同じ部分だけmixinで記載するってだけでも十分導入する価値はあると思う。今まで生のCSSを書いていた人は、今まで記載していたCSSの拡張子だけ変えてこれから先で弄る部分だけmixinで記載するって感じで使うのがいいのかなー。デザイナさんでもmixinしか使わないとかいうルールでやれば問題も発生しにくそう。ただ、watchでコマンド叩いてもらわないといけないってのがちょっときついかも。shell作るにしても「これ叩いて初めてくださいね。」みたいなルールが必要になるからちょっとだるい。