プログラマーのためのTwitter Bootstrapサイト制作講座をやったつもり



5/11のOSOで「プログラマーのためのTwitter Bootstrapサイト制作講座(超概略)」をやったので、そのメモというか、補足をします。
まず、まとめとして。


0.内容を決める

[TBの話ここから]
1.TwitterBootstrapを導入する
2.イメージ
3.カラー
[/TB話ここまで]

4.SEO対策としてmetaタグ挿入
5.コーディングミスチェック
6.アクセス解析を入れる
7.ウェブマスターツールを入れる


うん、ほとんどTwitter Bootstrapの話してないですね。予想通りです。0は飛ばすとして、まじめにTwitter Bootstrapを始めたい方(1〜3)は下記記事から、便利な先達の皆様のサイトをご覧下さい。

プログラマーのためのTwitter Bootstrapサイト制作講座をやります
http://blog2.gods.holy.jp/?eid=142

4.SEO対策としてmetaタグ挿入

Twitter Bootstrap公式サイトのテンプレートには何故かmetaタグが足りていないので、ちゃんと自分で足しましょうというお話です。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<meta name="description" content="ページの説明文。" >
<meta name="keywords" content="キーワードA,キーワードB,…" />

【参考】METAタグ(keywords description)の使い方
http://whitehatseo.jp/metaタグ-keywords-descriptionの使い方/


5.コーディングミスチェック

Google先生はあなたのサイトのコーディングミスもしっかり評価しますよという話です。コーディングミスしてないのに!という方は、文章量やキーワードの見直し等も必要ですが、この辺りはサイト制作のこつというより、SEO対策にがっつりなってくるので、省略します。

チェックは下記サイトがおすすめです。
緑の枠の表示が出れば合格です。

Validator.nu (X)HTML5 Validator
http://html5.validator.nu/

Twitter Bootstrapを使う理由として、不要なタグ等を追加する可能性を減らすことで、ソースコードのきれいな、ミスのしにくいコーディングが可能というのも大きいです。このようなテンプレート・フレームを使う利点ですよね。


6.アクセス解析を入れる

Googleアナリティクス大人気だった。
みんな、入れてるよね?
言い忘れましたが、入れてる方、見てますよね?


7.ウェブマスターツールを入れる

これが意外と皆様入れられていないようで、びっくりしました。
Googleアナリティクス使っている方、ぜひ入れて下さい。
詳細はお話した通りですが、どうやらここを活用するか否かが、皆様のページ・ブログ・サイト運営でライバルと差がつく1歩なのかなぁと思いました。
もちろん、アクセス解析同様、確認してその結果をサイトに反映させていくことも大切です。

Googleウェブマスターツール
https://www.google.com/webmasters/tools/home?hl=ja



こんな感じでお話ししました。

デザインや見た目もさておきながら、「このページ・ブログ・アプリを世に広めよう」という情熱をどの程度目の前のHTMLにぶつけるかというのも大切です。

できれば開発に差し障りない範囲で見た目をきれいにできて、ちょっとSEO対策とかもできて、できればそのページの変更やSEO対策の効果もはかれれば……というところだと思います。

Twitter Bootstrap、その他対策ツール、是非試してみて下さい。

コメント

*
*

<< プログラマーのためのTwitter Bootstrapサイト制作講座をやります | オープンセミナー岡山2013行ってきた >>