「超理解した!」丸山の神コーディング

「超理解した!」丸山の神コーディング

フリーランス、制作会社などでWebにずっと携わってきたコーダー丸山のWebに関するブログ

Amebaでブログを始めよう!
さて、今回も引き続き内部対策についてです。
head内については前回で終わりにしましょう。
やってると大事なコンテンツ部分忘れちゃいますからね。笑

さぁ、やっと<body>内のコンテンツ部分です。
なんだかんだでここがサイトの中身ですからね。
どんなにtitleタグやmetaタグで工夫しても、ここに画像1枚ペタリ・・・では意味ありません。
(誰もが知ってる企業の名前であればそれでも大丈夫ですが)

予備知識ですが以前はサイトのトップページがFlashだったりしてEnterをクリックすると
メインページに飛ぶような仕組みが流行ったことがありました。
その最初のワンクッションのページをスプラッシュページと呼びます。
これはSEO的観点からすれば極めてもったいない。
順位を落とす行為です。
なのでよほど社名のブランディングが成功していないと危険な行為です。
といっては語弊がありますが、SEO的にメリットはありません。

さて、本題に入りましょう。
body内のコンテンツでも様々な要素があります。
今回はそのうち1つを取り上げ、また次回以降1つずつやっていきましょう。

今日は<h1>タグです。
このhタグは1から6まで存在し、タイトルや章・見出しなどに使うタグです。
1がもっとも重要度が高く、1ページ内で1度しか使えません。
(2回使うと言うのは新聞のトップに「○○引退!!○○引退!!」」と2回書いてあるようなものです)

ちなみに補足しておきます。(中上級者向け)
噂のHTML5では1ページ内でh1タグを複数回使うことができます。
が、ここでは従来のHTML4.01またXHTML1を軸に話していきます。

h1タグは重要です。そのサイトのそのページがなんなのかを表した場所だからです。
気を付けなければならないのは「そのサイトがなんなのかを表した場所」ではなく、
「そのサイトのそのページがなんなのかを表した場所」という点です。
サイトではなく、ページなのです。

仮に「田村商事」という会社があったとしましょう。
様々なページを作ります。
会社概要もあればよくある質問、採用情報、提供サービス・・・。
すべてのページのh1タグが「田村商事」だったらどうでしょうか?
検索エンジンのクローラーにとってそこが何のページなのかすぐには判別できません。
h1タグをロゴや社名、サイト名に使ってるサイトは多いです。
というか、ほとんどです。
しかし、それは間違った方法です。
「会社概要」「よくある質問」「採用情報」これら、それぞれがh1なのです。

ではまぜ間違った方法が蔓延しているのか。
それはトップページに<h1>トップページ</h1>とすることが出来ないからです。
トップページはどうしても社名やサイト名になってしまうことが多いと思います。
なのでトップページで社名などにh1を使います。
そしてそのまま下層ページでも同じようにh1を使ってしまうのです。

どうすればいいか。
トップページは社名・サイト名をh1で記述し、下層ページはページタイトルをh1にすることです。
これがもっともベストな方法です。
CSSを複数作ればすぐ解決する問題です。
それがとても大変で面倒だという方、荒業を教えます。
トップページだけ<h2>から始めてください。
そうです。確かに<h1>がないのに<h2>が出てくることは間違ってます。
誤った文法です。
ですがこれなら共通したCSSをあてることができます。

またh1においては画像置換という方法が一時期流行りました。
これは検索エンジンのクローラーが画像に書いてある文字が読めないことから
HTML上ではテキストで書いておき、CSSでtext-indentを-9999pxなどのネガティブ指定を行い
背景画像として、置きたかった画像を表示させる方法です。
これがSEOスパムになるのではないかと一時期話題になりました。
しかし結果、SEOスパムになったという例は聞きません。
ですがいつスパム判定されるかわからない手段です。
この方法をとるサイトは減っています。

h1タグについてはまだまだあるのですが今回はこれぐらいで。笑
お疲れ様です。

超理解した!!!
SEOについて書いてますがちょっと休憩。
全然質問とかこないので寂しいです。笑

普段僕はコーディングだけをやっているわけではありません。
SEOももちろんやってますし、起業家支援のようなこともやってます。
今年も学生たちの事業を株式会社法人化しました。
今は社団法人設立に携わったりなんかもします。
要は経営なんかも含めなんでも屋だったりします。
写真なんかも撮ったりします。
システム(プログラミング)もします。
Flashを作ることだってあります。

それでもやはりコーディングは14年?ぐらいの経験があるので
人よりは知っているんじゃないかなと思います。
今はまだ簡単なことしか書いてませんが
そのうち、誰も公開してないSEOの情報や
最近はやりのHTML5やCSS3なんかについてもどんどん書いていきたいと思ってます。

次回からもまたSEOについて再開しますよー!
是非読んでいってください!!
さて2回目です。
内部対策の2つめは同じく<head>タグ内からメタタグです。

<meta>タグはいろんな要素が入ります。
文字コードを指定したり、クローラーの動きを制御したりしますが、
SEOで抑えるべきなのは

description
keywords

の2つです。

<meta name="description" content="" />

これはサイトの概要を書きます。
ここにも狙う検索キーワードを埋め込むのがポイントです。
前回と同様に長すぎるのはNGです。

<meta name="keywords" content="" />

ここは検索キーワードそのものをいれます。
複数入れることが可能ですが、これもまた多くいれるのはNGです。

クローラーはメタ情報を大切にします。
メタ情報はサイトの情報を最も端的に表現したものだからです。

他にもSEOで使えるmetaタグというものは存在します
超入門編としてはこの2つを抑えておけばいいと思います。
これ以外のmetaタグについてはまたどこかで書けたらいいなと思っております。

また、コーディングやWebに関する質問など大募集しております。
率直に私の感じてることを回答させていただきます。
サイトの運営をしていれば誰もが多くの人に見てもらいたいと思うはずです。
たいていの人はYahoo!やGoogleなどで検索してサイトにたどり着きます。

なので検索結果で上位表示させようという動きが出てきます。
この検索結果上位表示対策をSEOと言います。検索エンジン最適化とも呼ばれますね。

大きく分けて2つあります。

・内部対策
・外部対策

1.内部対策
内部対策はその名の通りサイト自身の対策をすることです。
つまり自分でできることなんです。

サイトタイトル
サイトタイトルは重要です。多くのサイトを見てください。

「山田英会話スクール」

というサイトは少ないでしょう。
こんな感じに書かれたりします。

「山田英会話スクール 外国人講師と自宅で気軽にマンツーマン英会話」

これは「マンツーマン」や「英会話」「外国人講師」などといった検索キーワードに対応するためです。
検索エンジンはサイトタイトルを重要視します。
だからといってなんでもかんでもタイトルにキーワードをいれればいいわけじゃありません。

「山田英会話スクール 外国人講師 自宅 マンツーマン 英会話 激安 レッスン 文法 TOEIC」

などとやれば、サイトの説明の域を超えているのでSEOスパムと認定されやすいです。
簡潔な一文にまとめるのがポイントです。
また字数も制限があり100文字や200文字のようなタイトルをつけると
これもSEPスパムと認定されやすくなります。

SEOスパムとは検索エンジンで上位表示されるために、姑息な(笑)手段を使うとくらいます。
最悪、検索結果に表示されなくなります。
気をつけましょう。