☆大下パラ大豆☆コミュのウラ授業　第2回　正しいSEOコーディングその１

>レベル高くなくてすいませんが・・・
>えーっと、HTMLで<h1>ではさんだところをCSSでレイアウトしているところなのですが、<h1>なので、どうしても、下のボックスとの間に大きな隙間が出来てしまいます。
>デザイン的には、下のボックスと近づけたいのですが・・・
>僕の思いついた方法としては。
>いろいろやりましたが、
><h1>を、<strong>に替える。ぐらいしか、隙間は消えないのです。
>SEO的にはよくないですよね？

>ご回答いただければ助かります。

まず、<h1>～<h6>、<p>などはブロック要素で、文章の前後に1行の隙間（空白の行）ができます。
この隙間はタグが持っているマージンで、CSSでh1{margin:0px;}としておけば隙間はなくなります。

が、次に入力されているタグが<p>などのブロック要素が来た場合、その<p>も隙間を持っているので結局1行開いてしまいます。
<p>のマージンも0にしてください。

で、<h1>を<strong>に変えるというのは、全く持って大間違いでございます！

SEOは、検索エンジンに対して最も適したHTMLを作成することです。HTML構文において、<h1>は「大見出し」、<strong>は「より強調したい文字」、とそれぞれのタグが意味を持っています。
そのタグの意味に併せて、すでにある文章に合ったタグを使うことが大切です。

大見出しは、「要約文」で長い文章を要約してわかりやすい文章にしたものに<h1>を付けてください。

強調文字は、その長い文章の中で使われている単語に使用します。

コメント(15)

最初
全て
最新の40件

[3] mixiユーザー 04月27日 19:23

久しぶりにこのトピに書き込みます。
ぎるどさん＞
検索エンジン登録について悩んでいます。
まず、昨年１０月に自分で作ったサイトの登録をgoogleとyahooのロボット巡回推薦で行いました。googleは１週間ぐらいですぐに反映され、検索されているのですが、yahooの方は３ヶ月後の１月になっても、登録されないので、もう一度行いましたが、その後今に至っても、反映されません。
yahooでログインした後、http://submit.search.yahoo.co.jp/add/request
で表示されるページにＵＲＬを入れるだけでいいですよね？
僕のやり方がまずいのでしょうか？

ちなみに、別に作ったサイトで同じことをしたのですが、結果は今のところ同じです。

[4] mixiユーザー 04月28日 17:39

さらに質問。。。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
のサイトで、「HTML文書の文法をチェックし、採点します」
てのがあって、自分のサイト採点してみたのですが、３４点でした。。。(^o^;)
これってあてにしていいのですか？
また、ここで言うＨＴＭＬの文法はＳＥＯにはどのぐらい影響しますか？
ちなみに、
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
9: line 13: 8行目の <meta> に対応する終了タグ </meta> が見つかりません。 → 解説 72
9: line 13: 7行目の <meta> に対応する終了タグ </meta> が見つかりません。 → 解説 72
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
なんていう採点結果もでていて、こんなタグいると思ってなかったのですが・・・

教えてください。

[5] mixiユーザー 04月28日 20:54

>ぶんぶ～んさん
Yahooは1ヶ月ごとに登録されてるか確認してみてください。
オフィシャルでは「2~3週間で」と言ってるので、登録されてなければ１ヶ月ごとに申請してもいいと思いますよ。

でまた、YSTのフルアップデートが23日に完了したようです。
インデックスの更新なので、これによって検索結果が大幅に変わることになります。

今後、またクローラーが動き出すんじゃないでしょうか。
Yahooディレクトリへの登録もYahoo検索結果には有効です。
お金かかりますが、結果重視なら必要でしょう。

Google、yahooの他にMSNへの登録もしておけばいいでしょうね。
MSN登録ページ
http://search.msn.co.jp/docs/submit.aspx

あと、登録されない理由の一つとしてコーディングミスがあります。
HTMLファイルはページの情報をブラウザに表示させる役目の他に、検索エンジンのデータベースにインデックスさせる役目も持っています。
そこに必要なのが正しいタグの使い方です。
いわゆるWEB標準というやつです。

ソースを確認したところ、XHTMLで作成しているんですが、中で使われているタグがHTMLとXHTMLのものが混在しています。これでは駄目ですね。

それがHTMLlintで出た結果の
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
9: line 13: 8行目の <meta> に対応する終了タグ </meta> が見つかりません。 → 解説 72
9: line 13: 7行目の <meta> に対応する終了タグ </meta> が見つかりません。 → 解説 72
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
です。

サイト２でもやりましたが、HTMLで使う終了タグのないもの（<br><hr><img><meta><input>）などは「半角スペース+/」を一緒に記述しないと行けません。
例えば、<meta name="keywords" content="キーワード" />としなければいけません。

で、HTMLlintでは、XHTMLの検証をしているが、検証チェックで終了タグがない場合に問題点として結果表示されてしまってます。
ま、賢い便利ツールではあるけれど、融通が利かないというやつです。
HTMLlintは便利なツールです。
ただ、100点満点でなければ駄目、マイナス点だから駄目というのでもありません。
間違い探しをして、より正しいコーディングに修正するために使うといいと思います。
採点されるのは楽しいですがね。

HTMLはSEOの基本にもなっています。まずはチェックですね。

[6] mixiユーザー 04月28日 23:55

げぇ～！ちょっとショックでした。。。
てことは、基本的にはHTMLlintの指摘どおりに、修正していったら大丈夫なんですね？

XHTMLの記述ですが、↓この部分も・・・
<script type="text/JavaScript" src="aaa.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
↓こんなふうにしてしまうってことですか？
<script type="text/JavaScript" src="aaa.js" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript" />

基本的に、XHTMLになったのは無意識にドリームウィーバーの設定でなってしまっていたので、上記のような記述もＤＷまかせだったのですが、XHTMLのこの部分に関しては、手修正が必要ということでしょうか？

[7] mixiユーザー 04月29日 12:21

えー徹夜でがんばったところ、上記質問も解決し96点まで上がりました！
ただ、あと一つ分からないのは、
ーーーーーーーーーーーーーーーーーー
2: line 3: <html> には lang 属性を指定するようにしましょう。 → 解説 119
2: line 3: <html> には xml:lang 属性を指定するようにしましょう。 → 解説 119
という指摘があって、解説を見ると、↓
ーーーーーーーーーーーーーーーーーーーーーーーーーーー
<HTML> には、LANG属性を使ってその文書の言語を明示しておくことがWAIで薦められています。日本語の場合は次のようにします。

<HTML lang="ja">
<HTML lang="ja-JP">
ーーーーーーーーーーーーーーーーーーーー
と書いてあるのですが、このまま貼り付けてみると、減点されます。
どのように記述すればいいのでしょうか？

[8] mixiユーザー 04月30日 16:37

>>XHTMLの記述ですが、↓この部分も・・・
<script type="text/JavaScript" src="aaa.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
↓こんなふうにしてしまうってことですか？
<script type="text/JavaScript" src="aaa.js" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript" />

そのとおりです。

DWでXHTMLを作成していると、基本的にHTMLの記述には変換されません。
なんらかの時にコードを自分で入力しない限り。。。

<HTML lang="ja">
<HTML lang="ja-JP">
と、まさか2つ書いてませんよね？

これはHTMLでの日本語宣言です。HTMLタグの間に挟まれる文字は日本語です。と言う意味なんですが。

XHTMLでの<html>タグには、XMLの名前空間と言うのを宣言しなければいけません。
<html xmlns="http://www.w3.org/1999/xhtml">

というか、そもそもなぜXHTMLなんですか？
XHTMLである必要性が何もないのでHTMLでいいのに。

XHTMLとHTMLは同じではありません。
XMLとHTMLがくっついて独自の構造をもったものがXHTMLです。
XHTMLとHTMLは同じように見えて全く異なるものと捉えた方が無難です。

記述の仕方が同じように見えるので、一緒と思えてしまうのですが解釈は全く異なります。
XHTMLで書かれた内容は、HTMLタグを認識してHTMLで書かれたかのように似せて表示すると言ったものです。

なので、HTMLで作成する感覚でXHTMLを作成するのは、本来間違いなのかもしれません。
ややこしいのでDWなどのソフトではこの辺を同じような操作で出来るようにしているのかと思われます。
コードを手入力でXHTMLを作成していくとこれがよくわかります。

まず、XHTMLという言語に基づいた記述が必要で、そこにはXHTMLで決められたルールがある訳です。HTMLでいう<html><head><body>のようなもの。
そのルールに基づいてXHTMLという用紙が作成されて、「ここに○○を書きなさい」みたいな場所があるんですが、それを大きく2つに分けるとすれば「HTML」を書く場所、「XML」を書く場所、という様になっている感じです。
で、「HTML」を書く場所には、<meta>は<meta />で書いてね、などのルールがあるんです。

XHTMLは元々HTMLの新しいバージョンとして作られていますが、XMLをベースとしています。
この背景には、HTMLの規格が拡張され他の表示デバイス（携帯やテレビ、ゲーム機）での表示をフルサポートしていくのが困難になってくるので、それらに表示させるために汎用性の高いXMLを用いた訳です。
ただ、これらは表示させるためのソフト（ブラウザなど）に対しての配慮と言ってもいいでしょうね。
現段階では、PC向けにしか作られないサイトですのでXHML導入まで考えることはないでしょう。
世の中がなぜXHMLに傾きつつあるのかが分かりませんが、一番重視されている携帯電話のブラウザでさえ、HTMLを完全に表示させるくらいのスペックを持ってますし。
ゲーム機でサイトを見ると言っても、その独特なユーザ性から見るサイトは限られてきます。
今後のテレビでの閲覧にしても、容易にサイトを見れないような動きもあります。
これを考えると、今の現状と少し先（２～３年くらい？）はHTMLが主流であると言えるでしょう。

まずは、
XHTMLの必要がなければ、HTMLでの作成をお勧めします。

[9] mixiユーザー 05月01日 00:06

すごく丁寧なご回答ありがとうございます。

なぜXHTMLにしたのか？についてですが、ＤＷのCS3を買って、喜び勇んで、早速サイト作成したのですが、おそらくデフォルトでサイト作成ウィザードがXHTMLだったのだと思います。無知が原因ですが、まったく無意識で。。。僕自身、XHTMLが何者か、ほとんど分かっていないまま2つもサイトを作ってしまって後悔しているところです。
作成途中で、授業中に先生に質問したこともあったのですが、<br>のタグは<br />としておけば良いのか・・・という理解しかしていなかったです。。。

で、ここにきて、いろんな問題が噴出してきているのですが・・・

↓FIERFOXかIEの７でこのサイト見てください。

http://kenko-omakase.com/

で、次に、IEの６で同じサイトを見ていただくと・・・
ボロボロでしょ？

これ、ひょっとして、XHTMLと関係あったりします？
僕のパソコンIE7なので、きれいに出来てるつもりで、何十日も徹夜してきたのですが、久々にIE６で見て、むちゃ落ち込みました・・・

先生この状況今後の授業に活かせますか？是非IE７には気をつけてもらうように言ってあげてください。最近のパソコン買ってる人は、基本VISTAでIE７のはずなので・・・

話戻りますが。。。
今のこの状況から、HTMLに替えるのは、可能ですか？宣言文HEAD情報とタグの< />のところとか、替えれば治りますか？

それと、このボロボロのレイアウトはＣＳＳですべて制御しているので、IE6で確認しながらＤＷ上でいくらレイアウトしなおしたとしても、やる設定は同じなのですが、なにか解決法はありますか？

時間とお手数をおかけしますが、た～す～け～て～！！

お願いします

m(..)m

[10] mixiユーザー 05月01日 00:30

あっ！あと、上でご回答いただいた、コードの件ですが。
<html xmlns="http://www.w3.org/1999/xhtml">
はＤＷがかってに書いてくれていました。
<HTML lang="ja">
<HTML lang="ja-JP">
は、どちらかを、上の<html xmlns=～　　>の中に入れるんですよね？
ありがとうございます。

[11] mixiユーザー 05月01日 01:23

XHTMLをHTMLの構文に直すのは、ページプロパティでドキュメントタイプ（DTD）をHTML4.01Tranditionalに変更すれば、コードも切り替わります。

[12] mixiユーザー 05月02日 00:55

ありがとうございます！！
その機能むちゃ助かりました。
ＨＴＭＬに変えてすべてがすっきり行きました！！

これで、yahooの登録もうまく行くかもです。。

これからもご回答お願いします！！

[13] mixiユーザー 05月02日 01:32

IE7はうちにはないので、また学校で見てみますが。
IE6とIE7でのCSSの表示の違いはとっても違うみたいですね。
色んなところで話は聞きます。

さて、その対策もあるにはあるんですが、ややこしいので。。。。

徹底してマージンと余白の値をゼロにして、出来る限り余白で調整していくことをお勧めします。

[14] mixiユーザー 05月14日 21:26

ありがとうございます！

おかげさまで、早速YAHOOの検索にひっかかるようになりました。

そこで、また質問ですが、ＳＥＯ対策の外的な手法として、
ランキングサイト登録というのがあると思うのですが、この手段はどの程度有効でしょうか？

自分なりに検索して、登録してみたのですが、どれも、そのランキングサイトのリンクをこちらに貼る必要があって、これでは手当たりしだいというわけには行かないと思うのですが、やったほうがいいのでしょうか？

お勧めのランキングサイト集みたいなのはないですか？

あと、さらに上位を目指す場合の注意点や、やるべきことを教えてください。
授業でやったこともあるとは思いますが、総括的に教えていただければたすかります。。。

宜しくお願いします。

[15] mixiユーザー 05月15日 04:33

外部リンクは有効ですが、好き嫌いがありますね。
特にランキングサイトなんかは、相互リンクが条件になります。同カテゴリーから人気のある順に、次々と探していきたいユーザーは利用するでしょうが、一般的にはあまり利用されない傾向にあると思います。
せっかくデザインしたトップページに、他のサイトのバナーを貼るという相互リンクの条件は、とてもリスクが高いものだと思います。

それは、他バナーでデザイン性を損なう（見栄えだけでなく）事も第一の理由ですが、例えば、検索結果で上位表示されても、他より目立つバナーに気を取られて思わずクリックしてしまう。といった事にもなりかねません。

順位を上げるのも大事ですが、どんなユーザーに訪問してもらって、どう利用してもらいたいか？を実践できない事には、アクセス数が伸びるばかりで何にも得られるものはないでしょうね。

ランキングサイト以外にも、ジャンルに絞った検索サイトやリンク集があるので、そっちへ登録をかけていく方がいいですね。
検索サイトやリンク集だと、トップページに相互リンクを貼る必要もなかったりしますしね。

外部リンクを集める時は、同じテーマか同カテゴリのサイトで、ページランクが高く（LV3以上）、テキストリンクでの登録が可能であるところがベストです。

探せばこんなところがちょこちょこ見つかるでしょう。
http://www.coara.or.jp/~ueno/

ログインすると、みんなのコメントがもっと見れるよ