ホームページ制作｜WEBデザイナー【キングサイト】 » コーディング/HTML・XHTML

画像に代行テキスト「altタグ」の設定

king — Mon, 25 Jan 2010 13:16:00 +0000

画像は検索エンジンのクローラーには認識してもらえない

検索エンジンクローラーはhtmlで書いたソース上でテキスト文字は読み込み、認識はされますが、画像を読み込むことは出来ません。その写真や画像を人物や風景画にしたとしてもクローラーに読み込まれず人物、風景画といった認識は一切されずその画像に対しての判断は全くされません。

そこで画像を掲載する際は、alt属性を必ず定義しましょう。alt属性は、画像の代替テキストとなり、画像が表示されなかった時に変わりに表示されるテキストの役目や、音声ブラウザに読み込まれるテキストとなります。

alt属性に「子供の写真」と定義した場合は、その写真を子供の写真と認識します。

関係のない言葉を入れない

過去にalt属性にキーワードをいくつも詰め込む行為が増加した為、今やSEO対策としてはあまり効果はなくなって来ていますが、クローラーに正しい定義を読み込んでもらう為には写真や画像には正しいテキスト文字を定義しましょう。

画像を使用してalt属性にキーワードをいくつも詰め込む行為や写真や画像と全く異なったSEOの為にキーワードを詰め込んだりする行為はスパムとして扱われてしまいます。

WEB制作基本ベースとなるHTMLソース

king — Wed, 30 Dec 2009 05:44:52 +0000

▼ 基本HTMLソース ▼

ホームページ制作を行う際に色んな方法があります。
無料で制作出来るソフトやツール、ASPサービス等のソフトウェアー、制作会社の様にDreamweaverなどのソフトを利用して制作を行いますが、それぞれ中身のHTMLソースはそんなに大幅な変化はありません。

HTMLソース（ソースコード）説明

HTMLソースの基本は下記のソースが一般的なものと言えると思います。
※の中身はあくまでも例です。

ソースコードとは、人間がプログラミング言語を用いて記述したソフトウェアの設計図







ホームページ制作｜WEBデザイナー 【キングサイト】

基本としては上記のようなhtmlソースになると思いますが、その他機能や内容によって中身は変わって行きます。

メタタグ「ディスクリプション」の設定

king — Mon, 28 Dec 2009 00:14:41 +0000

description（ディスクリプション）はあまり検索結果に引用されなくなった

description（ディスクリプション）はページの概要・説明文入れるメタタグ内の要素です。

過去のYahooやGoogleといった大手検索エンジンではディスクリプションやキーワードなどを検索エンジン結果の説明文表示や検索エンジン結果に対して重要な評価としてメタタグを読み込んでいました。
しかし、2007年・2008年で検索エンジンの評価が大きく変わったのです。過去は重要であったメタタグが今現在では検索結果表示に対してあまり評価・表示の対象にならなくなってしまったので。
なぜ、YahooやGoogleの検索エンジンの評価対象が変わったかというと、過去にこのメタタグを悪用として利用しているサイトが増加してきたことにあります。全く関係のないホームページのメタタグ内に大手企業の名前やブランド表記を大量に埋め込むといったスパム行為が増えたからです。
全く関係のないキーワードやテキストを大量に埋め込み、クリックしたらアダルトサイトが表示されるというスパム行為が増加した事で、検索エンジン評価が改善されたのです。

googleの検索結果｢説明文表示｣

検索結果「説明文表示」

Googleの検索結果で中にはメタタグ内の文字列が利用されることもありますが、これは検索ランキングや検索順位に対してディスクリプションを評価しているものでなく、説明文として引用しているだけの事が多いです。

description（ディスクリプション）は検索結果ではあまり評価はされませんが、一応メタタグ内には記載していくことをお薦めします。

ディスクリプションの表示基準として全角80文字前後、あるいは80文字以内が良いでしょう。

メタタグ「キーワード」の設定

king — Sat, 26 Dec 2009 10:00:36 +0000

キーワードは検索エンジンの順位評価にはあまり引用されなくなった

キーワードは検索エンジンの順位評価にはあまり引用されなくなったと言われて来ましたが、外部の被リンクに対してはまだメタタグ内に入れる事をお薦めします。
キーワードを選定する際にサイトに最も重要なキーワードを選ばなくてはホームページがちゃんと検索エンジンに認識されなかったり、サイトに来て欲しいユーザーが来なくなってしまいます。
自分のサイトには、関心をもっていることをあれこれと詰め込みたくなると思いますが、SEOを本気でするのであれば、バラバラのキーワードの選定はお薦めできません。大変な作業ではないのでキーワード選びには、しっかりと時間を割くようにしてください。

①メインのキーワードを決める

キーワードは、サイトのタイトルとは違います。サイトのテーマ、コンセプトとトップページのキーワードを同じにするのは理由があり、サイトのトップページに、一番重要なキーワード置く為です。

サイトのトップページを検索エンジンに高く評価、認識させる為に入り口であるトップページに強調するキーワード入れる必要があります。そこには選定され絞り込まれたキーワードを入れなくてはいけません。用は浅く広く見せるか、深く狭く見せるかの違いであり、１つのキーワードにすることによりそのメインの１つのキーワードが重視されます。逆にいくつものバラバラのキーワードをいくつも入れることにより、内容が浅いサイトと見られます。

②キーワードを決める際の選定

キーワードを選定する時に最も重要になって来る事がもう一点あります。言葉によるターゲット、ユーザーの感覚の違いをつかむ事です。

｢ホームページ制作｣と｢WEB制作｣は同じ意味ですが、SEOではこういった言葉の使い分けもユーザー獲得への違いがあり、同じ意味でも使われている言葉により、検索ユーザーが違ってきます。
検索の目的や知識の違いで検索する時の言葉は変わって来て、全くホームページの事を知らないユーザーであれば、｢ホームページ制作会社｣などといった言葉で検索するでしょう。又、逆にある程度の知識がある人は｢WEB制作会社｣と検索する人もいるでしょう。言葉によってアクセスを誘導したいターゲットが変わってきます。

③キーワードの表記の違い

キーワードに地域や場所を含む場合、検索結果が若干異なって検索されます。

例えば｢新宿｣と｢新宿区｣など地域で検索する人は多くいますが、地域の検索の違いで検索結果が全く変わってくることもあり、｢新宿｣と検索したときでは、ボーリング、映画館、ダーツ、キャバクラなど遊ぶ場所が検索されることが強いですが、｢新宿区｣で検索した時では、図書館、区役所、病院といった施設などの検索が多く見られます。特別にキーワードを選定するときは必ず調べてから選定しましょう。

④言葉の表現の違い

ここで｢言う言葉の表現の違い｣とは、｢ラーメン｣｢らーめん｣や｢テレビ｣｢てれび｣｢TV｣｢テレビジョン｣などといって言葉の表現の仕方があります。大手検索エンジンgooなどではすべてひとつのキーワードとして認識しますが、Google、Yahoo!JAPANといった海外が発生である検索エンジンでは日本語の対応は完全とはいえません。
こういった表示方法がいくつある場合は、同じ言葉を色んなページにいくつか書くのでは、そのほかのキーワードの効果を弱めるだけです。どれかを選んで選定する方がお薦めいたします。

⑤一般のユーザーがあまり検索しない言葉

サイトのキーワードやタイトルを決める際に、雑誌のタイトルやキャッチコピーの様に、あまり一般的に使わないような言葉を使用してしまうことがあると思いますが、美容のサイトや健康サイトで｢ビューティーサロン｣や｢コスメ｣といった言葉を使用する場合の様にここでは一般ユーザーを考えれば｢美容｣｢化粧品｣などといった、検索しやすい言葉に選定する方が友好的だと思います。

検索して頂いたお客様に分かりやすい言葉で表示されることがもっとも有効だともいます。

｢子供｣などのキーワードを使うときも｢キッズ｣と使う場合もありますが、この場合｢子供｣といったキーワードの法がもちろんアクセスには繋がっていくと思います。

⑥漢字や誤字の違いでサイトを作る

誰もが検索エンジンにキーワードを正確に入力できるとは限りませんが、特に会社名、人名は間違って入力をする人が多いものです。例えばホームページ制作会社を検索する際に、漢字の間違いでホームページ製作会社と検索する人もいると思いますが、そんな間違いで検索してくるユーザーを確保しようと、そのキーワードを買っているサイトも御座います。

この方法は良いか悪いかは分かりませんが、わざとそういうユーザーを取り込む為に、誤字脱字や漢字の違いでホームページを作っているサイトもあるようです。これも１つの技であり、ユーザーの取り込み方の１つの方法でもあると言えるでしょう。

知っておいて得する言葉！

king — Fri, 25 Dec 2009 05:08:54 +0000

HTMLに関わって来る用語

今回はホームページを制作したりサイトを取り扱っている方々が知っておいて得する言葉、
知っておいて損はしないHTMLに関わって来る用語のご紹介をしていきたいと思います。
◆
タグ
HTML文章では特別な場合を除いて、改行は
（半角スペース）と記載します。

検索キーワードでYahooやGoogle検索順位上位表示！
キーワードSEOは重要です。

◆imgタグ
src属性にURIを指定することで、表示する画像を設定することができ、width属性やheight属性に
数値を指定することで、画像のサイズを設定することができます。altタグを使用して代替テキストを設定することが出来ます。

◆タグ<br /> 属性値に補足情報を示す文章を指定出来る。<br /> 要素に対して補足情報を設定することができます。</p> <blockquote><pre class="brush: xml;"><a href="http://www.sigmac.jp/" title="トップページ">トップページ</a></pre> </blockquote> <p>◆<address>タグ<br /> addressタグ要素はサイトや文章に関してのお問い合わせをしますタグです。<br /> addressタグで指定するのは、一般的にメールアドレス、URI、住所、電話番号などがあります。</p> <blockquote><pre class="brush: xml;"><a href="http://www.keyword-seo.jp/">シグマ株式会社</a></pre> </blockquote> <p>今回はいくつかのタグ等をご紹介させて頂きましたが、次回からもこれに伴ってその他のタグや<br /> 色んな用語をご紹介して行きたいと思います。</p> </article> <article> <h1>メタタグ「タイトル」の設定</h1> <p>king — Thu, 24 Dec 2009 03:55:51 +0000</p> <h3>タイトルに含めるキーワードは最重要視する</h3> <p>検索エンジンは、<title>～<title>に含まれているキーワードを非常に重視します。<br /> タイトルは検索エンジンの検索結果でも表示され、中に含まれるテキストはエンジンとしても人の目としてもかなりの重要度は高いです。</p> <h4 style="text-align: center;"><span style="color: #339966;">google</span>の検索結果｢タイトル表示｣</h4> <div id="attachment_766" class="wp-caption aligncenter" style="width: 290px"><a href="http://www.kingsite.jp/wp-content/uploads/2009/12/seo001.jpg" rel="lightbox[763]"></a><p class="wp-caption-text">検索結果「タイトル表示」</p></div> <p>タイトルにはそのコンテンツやホームページの全体を表す文字やテキストを入れるものです。ユーザーはタイトルを見てそのホームページがどんなコンテンツであるか推測し、クリックする為、重要なキーワードや言葉を入れる必要があります。</p> <p>又、検索エンジンのアルゴリズムは、タイトルに含まれる特性を重視して読み込まれるため、コンテンツ内での各ページごとに、ページの内容に対して重要とされるキーワードを含めておく事が大切です。なるべく重要なキーワードは先頭に来るように入れていきましょう。</p> </article> <article> <h1>知っておいて得する言葉！</h1> <p>king — Wed, 23 Dec 2009 01:59:17 +0000</p> <h3>HTMLに関わって来る用語</h3> <p>今回はホームページを制作したりサイトを取り扱っている方々が知っておいて得する言葉、知っておいて損はしないHTMLに関わって来る用語のご紹介をしていきたいと思います。</p> <p>◆<head>タグ<br /> <head>はHTML・ホームページの頭になる部分を記載する際の土台の部分です。</p> <blockquote><pre class="brush: xml;"><head> <title>キーワード SEO対策<title> <meta name="description" content="SEO対策はキーワードSEOへご相談。" /> <meta name="Keywords" content="SEO対策,キーワード,検索エンジン最適化,検索順位," /></head></pre> </blockquote> <p>◆<meta>タグ<br /> HTMLの<head>～</head>内に書かれるホームページの一番大事な頭です。<br /> 検索エンジン等にこのメタタグ情報を記載してお知らせする部分です。<br /> 検索エンジンにメタタグの情報が掲載されたりメタタグ情報で順位表示が変わります。</p> <blockquote><pre class="brush: xml;"><meta name="description" content="SEO対策はキーワードSEOへご相談。" /> <meta name="Keywords" content="SEO対策,キーワード,検索エンジン最適化,検索順位," /></pre> </blockquote> <p>◆<body>タグ<br /> HTMLを書く際のメインになってくるHTMLの土台と言ってもいいでしょう。<br /> 本文を記載する際は<body>～</body>内に書かなくてはいけません。</p> <p>◆<a>タグ<br /> リンクを張る為のリンクタグ</p> <blockquote><pre class="brush: xml;"><a href="http://www.keyword-seo.jp/">SEO対策</a></pre> </blockquote> <p>◆<alt>タグ<br /> 画像などをHTMLに書き込んだ時の画像に対しての代替テキストを記載するタグ</p> <blockquote><pre class="brush: xml;"></pre> </blockquote> <p>◆<h1><h2><h3><h4><h5><h6>タグ<br /> HTMLソース内で本文にあたる部分であり、<body>内に記載されている最も重要とされるタグ</p> <blockquote><pre class="brush: xml;"><h1>SEO対策はキーワードSEOへ</h1></pre> </blockquote> <p>参考サイト：<a title="SEO対策" href="http://www.keyword-seo.jp/" target="_blank">http://www.keyword-seo.jp/</a></p> <p>今回はいくつかのタグ等をご紹介させて頂きましたが、次回からもこれに伴ってその他のタグや<br /> 色んな用語をご紹介して行きたいと思います。<a></a></p> </article> <article> <h1>Favicon（ファビコン）の設定</h1> <p>king — Tue, 22 Dec 2009 04:43:44 +0000</p> <p><strong>▼ ファビコン ▼</strong></p> <p>Favicon（ファビコン）はウェブサイトやウェブページに関連付けられたアイコンのことである。</p> <blockquote><pre class="brush: xml;"><link rel="icon" href="/favicon.gif" type="img/gif" /></pre> </blockquote> <p>ホームページのURLが記載されている窓のURLの左側に出てくるアイコンがファビコンといいますが、設定や制作は簡単です。ファビコン用のgif画像やjpg画像を16×16のサイズで制作しファビコン用にアイコン変換出来るサイトがいくつもあるのでそちらで簡単に変換しましょう。</p> <p>後は、メタタグ内に上記のソースを埋め込み、サーバー上にそれにあったディレクトリーにファビコン画像をサーバーにアップロードしましょう。</p> <p>それだけで完了です。</p> <p>▽ファビコンの変換参考サイト<br /> <a title="ファビコン" href="http://www.favicon.jp/" target="_blank">http://www.favicon.jp/</a><br /> <a title="ファビコン" href="http://favicon.webmeister-jp.com/" target="_blank">http://favicon.webmeister-jp.com/</a></p> </article> <article> <h1>メタタグ内でのその他のタグの紹介</h1> <p>king — Mon, 21 Dec 2009 14:42:16 +0000</p> <p><strong>▼ 文字コードとエンコード ▼</strong></p> <p>文字コード（もじコード）はコンピュータ上で文字を利用するために各文字に割り当てられるバイト表現もしくは、バイト表現と文字の対応関係（文字コード体系）。</p> <blockquote><pre class="brush: xml;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></pre> </blockquote> <p>日本では、EUC-JP、Shift_JIS、UTF-8の3つが良く使われている文字コードである。</p> <p>エンコードとデコードの方式に異なるものを用いると、符号が元に戻らない。その結果、本来のものとはまったく異なる意味不明の文字や記号の羅列が表示されることがある。これを文字化けという。<br /> 例えば、Shift_JIS で記述されているWebページを、文字コードとして（Shift_JIS ではなく）<br /> Unicode を選択して読んだ場合、文字化けが起こる。</p> <p><strong>▼ ロボット検索エンジン認証 ▼</strong></p> <p>このMETAタグを使う場面はロボット型検索エンジンに登録「不可」にする場合に使います。</p> <blockquote><pre class="brush: xml;"><meta name="robots" content="index,follow" /> このページを登録する。ページ内のリンク先を巡回する。何も記述しない場合はこの設定になります。 <meta name="robots" content="noindex,follow"> このページを登録しない。ページ内のリンク先を巡回する。 <meta name="robots" content="index,nofollow"> このページを登録する。ページ内のリンク先を巡回しない。 <meta name="robots" content="noindex,nofollow"> このページを登録しない。ページ内のリンク先を巡回しない。 </pre> </blockquote> <p>このMETAタグを使う場面はロボット型検索エンジンに登録「不可」にする場合に使います。<br /> また、検索されたくないページ等に使用するのも良いでしょう。</p> </article> <article> <h1>メタタグ「タイトル、キーワード、ディスクリプション」の設定</h1> <p>king — Sat, 19 Dec 2009 03:10:07 +0000</p> <p>今回はホームページ制作の第1歩目のサイトのテーマ、キーワードを選定しtitleタグの記載方法を解説致します。</p> <p><strong><span style="color: #339966;">Google</span></strong>、<strong><span style="color: #ff0000;">Yahoo! JAPAN</span></strong>といった検索エンジンンロボットはHTML上でページの上部に記載されている内容ほど重要視する傾向があり、ページのタイトル、ページ内の記載キーワード共に前にある言葉ほど重要な言葉だと判断されます。<br /> １つのキーワードの場合はとくに気にすることは無いですが、複数のキーワードを要する場合はキーワードを記載する順番が重要です。</p> <p>例えば「格安　ホームページ制作」と「ホームページ制作　格安」の違いは重要であり、キーワードが複数あるときは、必ず隣り合わせに記載し順番も検索数が多い順に記載することが大切です。<br /> こういったキーワードを選定したときは出来る限りタイトルとディスクリプションにも同じ言葉を入れましょう。<br /> ◆タイトル</p> <blockquote><pre class="brush: xml;"><title>キーワード SEO対策

◆ディスクリプション

◆キーワード

トップページ、階層ページなど他のページを制作するさいにもタイトルやキーワードをそのページに扱っているテーマに関連したものを入れて行きましょう。

例えば、印刷を取り扱っているサイト、印刷会社のサイトではパンフレット製作の説明しているページにはタイトルに「パンフレット製作」、名刺印刷を説明しているページには「名刺作成」といった記載方法が必要です。

ホームページ制作｜WEBデザイナー 【キングサイト】 » コーディング/HTML・XHTML