aタグについて

文字や画像にリンクを設定するときに使うのがaタグです。
文字や画像をクリックしたきに同一ページの特定の場所や同一サイトの別のページあるいは別サイトにジャンプする設定です。

aタグの「a」はアンカー(anchor=「(船の)いかり」)の略で「しっかりとつなぐ固定する」というような意味もあります。

aタグはリンクの出発点となるリンク元と到達点であるリンク先を指定して使います。

リンクの出発点ではhref属性でリンク先を指定します。

例)

<a href="https://www.tomokos.net/rough_a.html">aタグについて</a>

リンクの到達点すなわちリンク先にはname属性かid属性を使用してその場所に名前(識別子)をつけます。各リンク先に目印をつけるわけです。

例)

<a name="productiontools" id="productiontools"></a>

内部リンク

自分のホームページ内のリンクの事を指します。
SEOではターゲットキーワードで内部リンクをした方が良いのですがやり過ぎはやはり良くありません。
あくまでもユーザビリティーを優先してください。

外部リンク

外部リンクとは自分のホームページから他のホームページへジャンプするリンクのことです。
他のホームページから自分のホームページにもらうリンクのことを被リンク(バックリンク)と呼んでいます。
リンク元がどこなのかによって言葉が異なります。
被リンク(バックリンク)をもらう際も内部リンクと同じようにターゲットキーワードでリンクしてもらうほうがありがたいのですがこれは相手あっての事なので必ずしも実現するとは限りません。
詳しくは「SEO・SEM講座」の方で順を追って説明します。

リンクの貼り方

リンクの貼り方には以下のふたつの方法があります。

☐テキストリンク
☐画像リンク

SEOの観点からはテキストリンクでリンクを貼ってもらうのが良いです。
西智子のホームページのアクセスアップ講座」ではほぼテキストリンクにしてあります。
ただしテキストリンクの設定をやり過ぎるとユーザビリティーやデザイン性を落とす可能性がありますのでテキストリンクの貼り方は十分に考えましょう。

「トップ」という言葉を例にテキストの構成を説明してみます。

「トップ」という言葉にテキストリンクが貼ってあったとします。
クリックしたら「ホームページのトップページ」に飛ぶのかと思いきやそのページの一番上(トップ)に移動することがあります。
検索エンジンがそのページに来ときにはトップがいくつあるのか混乱すると思いませんか?
一体「トップ」という言葉が示す場所はどこなのだろう?と検索エンジンは頭を悩ますことになります。
同じ言葉に異なるリンク先を設定してしまうと閲覧者だけでなく検索エンジンも悩んでしまうのです。

これは統一性がないページだ。テーマがはっきりしてないページなのだと思い込みます。
検索エンジンは統一性やテーマを大事にします。あいまいさや整然としていない状態は得意ではありません。

ターゲットキーワードにはひとつのリンクで統一する事が大切です。

西智子のホームページのアクセスアップ講座」では次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="author" content="西智子のホームページのアクセスアップ講座" />
<meta name="copyright" content="Copyright (c) 2009 nishi-shinjuku.net" />
<meta name="coverage" content="japan" />
<meta name="Targeted Geographic Area" content="japan" />
<meta name="classification" content="general,computers,internet,personal" />
<meta name="rating" content="general" />
<meta name="Keywords" content="西智子,ホームページ,アクセスアップ,講座" />
<meta name="Description" content="西智子のホームページのアクセスアップ講座は、実戦的ホームページの制作からSEO、SEM、広告戦略まで余すところなく公開します。" />
<meta name="slurp" content="NOYDIR" />
<meta name="robots" content="NOODP" />
<title>西智子のホームページのアクセスアップ講座</title>
</head>
<body>
<h1>ホームページ制作からSEO・SEM・広告戦略まで、WEBサイトのノウハウを公開!西智子のホームページのアクセスアップ講座</h1>
<h2><a href="./">西智子のホームページのアクセスアップ講座</a></h2>
<ul>
<li id="hn_top"><a href="./">トップ</a></li>
<li id="hn_sitemap"><a href="sitemao.html">サイトマップ</a></li>
</ul>
<form action="results.html">
<input type="text" />
<input type="submit" value="検索" />
</form>
<ul>
<li><a href="production.html">ホームページ制作講座</a></li>
<li><a href="seo.html">SEO・SEM講座</a></li>
<li><a href="seotool.html">SEOツール講座</a></li>
<li><a href="advertisement.html">広告講座</a></li>
<li><a href="failure.html">失敗講座</a></li>
<li><a href="link.html">リンク集</a></li>
<li><a href="blog.html">ブログ</a></li>
</ul>
<p>ホームページ制作からSEO・SEM、広告戦略まで、プロのノウハウを公開!</p>
<h2>プロのノウハウを公開する理由 インターネットとフリー(無償)の思想</h2>
<h3>インターネットの普及</h3>
<p>1995年、Windows95の登場によって、インターネットは爆発的に普及しました。<br />
インターネットに<strong>アクセス</strong>すれば、様々な<strong>ホームページ</strong>から知りたい情報をいつでも入手できる。そんな手軽さがインターネット普及の大きな要因であることは間違いありません。<br />
インターネット上で使われている様々な技術や管理制度の多くは、一般のユーザーに公開されているものが多く、インターネットが通信網としてその地位を確立するまでの歴史的経緯から、インターネット網の中には特定の集中した責任主体は存在しません。<br />
誰もが平等にアクセスする事ができ、様々なホームページを自由に閲覧することができるのです。<br />
インターネットの根底にあるこの「フリー(無償)の思想」に基づいて、通信網にアクセスすれば有益な情報を「フリー(無料)」で探し出すことができるという利便性こそが、インターネットが普及した要因であると言えます。</p>
<h3>インターネット利用者の増加</h3>
<p>インターネット利用者は、確実に増加を続けています。<br />
総務省の調査では、平成20年度末インターネット利用者は9,091万人。日本人の75.3%が何らかの形でインターネットを利用しているのです。(平成20年度通信利用動向調査)利用者層は、13歳から40歳代までが9割以上、50代が8割以上、60代前半は6割以上で、いずれの世代も前の年度より増え続けています。<br />
より使いやすいパソコン、その他の通信機器のおかげで、より多くの人が、より気軽に、インターネットを利用して情報を得ているのです。</p>
<h3>ホームページの利用とアクセスアップ</h3>
<p>ホームページを通して自社製品やサービスを販売する企業や個人が増えました。<br />
しかし、インターネットという通信網内に存在する膨大な数のホームページの中、利用者に閲覧されるのは、検索サイトで上位表示されるごく僅かな数のホームページにすぎません。<br />
どうすれば検索サイトで上位表示されるのか?アクセスアップのためには、何をすればよいのか?<br />
インターネット利用者に見てもらえる地位を確保するには?</p>
<p>私、<strong>西智子</strong>が勤める<a href="http://www.nishi-shinjuku.net/" target="_blank">株式会社西新宿ドットネット</a>では、2003年の創業以来、ホームページの制作からアクセスアップのための<strong>SEO</strong>までをトータルパッケージで提供してきました。優れた商品、サービスに関する情報をより多くの人々に知ってほしい。これは、商品・サービスを提供する企業のビジネスチャンスが広がるだけでなく、消費者にとっても有益な情報だからです。SEO、SEMでアクセスアップ!<br />
2003年以降インターネットの動向を実際の現場で見てきた、ホームページのアクセスアップ講座を、すべてお見せします。</p>
<p><a href="production.html">ホームページ制作講座</a><br />
<a href="production.html">ホームページを作りたい!<br />
リニューアルしたい!<br />
ホームページ制作に関する講座はこちら</a></p>
<p><a href="seo.html">SEO・SEM講座</a><br />
<a href="seo.html">目指せ、上位表示!<br />
アクセスアップ!<br />
SEO、SEMについては、こちら</a></p>
<p><a href="seotool.html">SEOツール講座</a><br />
<a href="seotool.html">SEOの結果を目で確認したい!<br />
そんなときに便利なSEOツールを紹介</a></p>
<p><a href="advertisement.html">広告講座</a><br />
<a href="advertisement.html">ホームページを軸とした、広告・マーケティングについては、こちら</a></p>
<h2>TOPICS</h2>
<p>ダミーテキスト/ダミーテキスト/ダミーテキスト/ダミーテキスト</p>
<ul>
<li><a href="./">トップ</a></li>
<li><a href="production.html">ホームページ制作講座</a></li>
<li><a href="seo.html">SEO・SEM講座</a></li>
<li><a href="seotool.html">SEOツール講座</a></li>
<li><a href="advertisement.html">広告講座</a></li>
<li><a href="failure.html">失敗講座</a></li>
<li><a href="link.html">リンク集</a></li>
<li><a href="blog.html">ブログ</a></li>
<li><a href="sitemap.html">サイトマップ</a></li>
<li class="end"><a href="inquiry.html">お問合せ</a></li>
</ul>
Copyright©2009-2017 tomokos.net. Powered by <a href="http://www.nishi-shinjuku.net/"target="_blank">nishi-shinjuku.net</a>.
<ul>
<li><a href="http://www.nishi-shinjuku.net/"target="_blank">株式会社西新宿ドットネット</a></li>
<li><a href="http://www.mainecoon.jp/"target="_blank">メインクーンのホームページ</a></li>
<li class="end"><a href="http://www.nirajima.com/"target="_blank">ニラジマGT</a></li>
</ul>
</body>
</html>

画像リンクの貼り方

画像にリンクを設定する場合はリンクにalt属性をつけて扱うだけです。
画像リンクもテキストリンク同様alt属性に適切な文言を書くことが大切です。

例)トップへ戻る画像リンク
<a href=”./”><img src=”home.jpg” alt=”西智子のホームページのアクセスアップ講座”></>

title属性について

title属性というのはHTML4.0で導入されたimage要素やa要素のリソースの内容を補う方法として提供することができる機能です。
W3C的には入れないよりは入れておいた方が良いでしょう。
しかしこれもやり過ぎてテキストやalt属性の内容と一致しない内容を入れるのは良くないです。

ちなみに私の会社ではtitle属性は入れていません。当然このサイトにもtitle属性は採用していません。
テキストやalt属性さえしっかり設定すれば大丈夫です。

target属性について

例えば
<a href=”http://www.nishi-shinjuku.net/” target=”_blank”>株式会社西新宿ドットネット</a>
のようにtarget=”_blank”を使用することはW3CのHTML4.01 Transitionalでは非推奨とされています。
非推奨とされる理由は「特別利便性がないから」とのことです。

しかし本当にそうでしょうか?

target=”_blank”を使用して外部リンクと内部リンクを明確に分けておくほうが私はユーザビリティーが高いと考えます。

結論的には好みの問題なのでしょうが閲覧者が戸惑わないようにユーザーフレンドリーな作りを心がけるのが大切です。

ホスティング会社を選ぶ」に進む
tableタグについて」に戻る