SEOチューニングで最初にやる8つの対策

SEOがペンギンやらパンダやらとアップデートがあり、それはそれでもちろん対策はしてきました。
しかし、基本的にこれらの対策をする前にやるべきことはSEOの基礎として共通していると思います。今回はいつもやってることをメモとしてまとめます。

1.<h1>は一箇所、ディスクリプションとは被らない内容で

h1はページの見出し、ディスクリプションは検索エンジンにページ全体の説明をする要素です。
これら2つの要素が被るのはHTML『文章』としておかしいと考えています。

2.TOPページにはわざとらしくてもサイトの説明をテキストで載せる

SEOの対策のために『代表あいさつ』とかを載せるのではなく、サイトで提供されているサービスの説明を読みやすいボリュームで書きます。
SEOだけじゃなく、構成的にもWebサイトという読み物のイントロダクションとしてあったほうがいいと思います。

3.TOPページに戻るリンクには対策キーワードを混ぜたアンカーテキストに

迷信臭いんですが、先輩ディレクターからもらったアドバイスです。
今のところマイナスな効果もないし、フッターのサイトマップに配置する時に見栄えがいいので継続してます。
多分アンカーリンクでリンク先のページ説明をするべき、というGoogleの考え方に基づいたものだと思います。

4.各ページタイトルはユニークに、h1も同じくユニークに

当然だと思いますが、各ページの<title>、<h1>は個別に設定します。

5.ページリンクは正規化する

正規化というのはwww.hanano-ya.jp/index.htmlとwww.hanano-ya.jp/のアンカーリンクをどちらかに統一することです。
これの設定については手でリンクを統一することもできますし、.htaccessでの設定でもOKだと思います。

6.XMLサイトマップの設置と、検索エンジンの呼び込み

これも当たり前といえば当たり前。検索エンジンの呼び込みするのはウェブマスターツールを入れてからというのも忘れずに。

7.URLには日本語やパラメータの入ったものを使わない

Wordpressで構築した場合、カテゴリ名や投稿タイトルをそのままURLに反映したりしますが汚いのでNG。

8.重複ページの対策

ECサイトとかは重複した内容のページができやすいです（色違いなだけの商品とか）。
こういうのは<link>タグを使うことで対策ができますのでエンジニアにお願いしましょう。
あと、カテゴリ名とかも

商品グループA > ガンダム
商品グループB > ガンダム

じゃなくて

商品グループA > ガンダム（宇宙世紀
商品グループB > ガンダム（新世紀

って感じにしておきます。

だいたいこんな感じです。
SEOの対策としては基本的なので、「そんなん知ってるわい！」とか言われちゃいそうですが、GMOとかがやってるSEO対策っていうのは今回のエントリー記事と大体同じです。

SEOの基礎はWeb制作者としては当然としての知識だと思います。
なぜならばこれらの知識というのはユーザービリティの向上や、メンテナンス性にもつながることが多いのでSEOの知識と判断するだけでなく、Web制作のお作法として身に付ける知識だと考えています。

※オフィスが移転しました。
http://www.hanano-ya.jp/translate/

jsでhtmlをインクルードさせる簡単な方法

PHPでやってるみたいにhtmlをjsでインクルードする方法です。
head内に書くだけの簡単コードなのでオススメです。

<script type="text/javascript">$(function(){$("#hogehoge").load("/temp.html");});</script>
<script type="text/javascript">$(function(){$("#hogehoge2").load("/temp2.html");});</script>

hogehogeの箇所が出力するID名です。
temp.htmlが出力するhtmlです。

CSSで画像を切り抜きサムネイル

a.tumb {
width: 150px;
height: 150px;
overflow: hidden;
display: block;
padding: 7px ;
background: url(img/example.jpg) center center;
background-size: cover;
background-repeat: no-repeat;
}

_notesフォルダの全削除

サイトの管理から
[デザインノート]→[デザインノートのクリーンアップ]

これで関連付けのされてないデザインノートデータは一括で削除できます。

Dreamweaverでの正規表現

Dreamweaverでの正規表現一覧です。
転載元：http://www.adobe.com/jp/newsletters/edge/january2010/articles/article4/

文字	意味
+	直前の文字の1回以上の繰り返し
.	改行以外のすべての単一文字
()	グループ化し保存
$n	()で保存したパターンを参照 ※nは任意の数字
\n	改行(改行コード：LF)
\r	キャリッジリターン(改行コード：CR)
\r\n	キャリッジリターン＋改行(改行コード：CR LF)
\t	タブ1つ
\d [0-9]	数字1文字
\D [^0-9]	数字以外(スペースや改行含む)1文字
\w [A-Za-z0-9_]	アンダースコアを含む英数字1文字
\W [^A-Za-z0-9_]	アンダースコアを含む英数字以外(スペースや改行含む)1文字

ついでに下記も転載です。

【Dreamweaver の正式な読みは何ですか？】

「Dreamweaver」は、夢の「Dream」と、糸を紡ぐ人や織工という言葉の「Weaver」を合わせたものです。

Webサイトという夢を編み出すという意味や、クモの糸と表現される Web サイトを紡ぐという意味、海外のフォークソングをヒントにした･･･など、社内でもいくつかの説があるようですが、この件につきましては現在確認中です。

よく呼ばれる「どりーむうぇーばー」は、残念ながら正式な呼び方ではありません。店頭でお買い求め頂く際やお仲間内でお話される場合は、声高に「ドリームウィーバー」と呼んで頂ければ幸いです。

色んな機能をまとめて実装できるプラグイン

色んなjqueryのプラグインをいっぺんに実装できる、便利なやつらです。
詳細はリンク先にて。

① simplelib
② jKit
③ yuga.js
④ meca.js
⑤ Laquu.js

自分はまだ試行錯誤してる所ですが、simplelibがいい感じです。

accordion	シンプルなアコーディオンナビゲーション
button	マウスオーバーやマウスダウンで画像を切り替えたり、選択状態と非選択状態によって画像を切り替える
checkAll	チェックボックスの一括選択
fixHeight	要素の高さを揃える
gaEventTracker	Google Analyticsでローディング時間、スクロール量、バナーに対するアクションを取得
ie6Png2Gif	Internet Explorer 6で、PNGをGIFに置換する
ie6PngFix	Internet Explorer 6でも透過PNGを使えるようにする
ie6PositionFixed	Internet Explorer 6でもCSSの position:fixed を使えるようにする
imgSwap	a要素をクリックして、既存のimg要素の画像を切り替える
lightBox	jQuery lightBoxプラグインを読み込む
overlayOthers	指定した要素の子のa要素にマウスオーバーすると他のa要素にcssで背景色や背景画像を指定できる半透明の要素をかぶせる
scroll	スムーススクロール
tab	シンプルなタブナビゲーション
textHint	未入力で非選択時のテキストボックスにヒントを表示する
trimmedScroll	img要素を含むa要素にマウスオーバーすると別の画像をそのimg要素のサイズにトリミングしてスクロールしながら表示する
zoomView	img要素にマウスオーバーすると拡大画像を表示する

メジャーなのはyuga.jsな気がするんですが、昔コーディングの案件でとっても痛い目を見たので、敬遠してます（まぁ私の知識不足が原因なんですが…）。

jQuery カレンダープラグイン FullCalendar を使用してかっこいいカレンダーを作る方法

高機能なのでgoogleカレンダーに便りがちですが、見た目がgoogleでどうにも微妙です。
でもデザインのカスタムは非常に難しいし。。。

ということでカレンダーの中身だけを取得して、あとはjQueryでやっちゃう方法があったんで備忘のために記載。

【FullCalendar】

※自社ブログに転載しました。

http://www.hanano-ya.jp/web/881