ホームページの作成方法ホームページのリンクについて、正しい作り方を解説しました。ハイパーリンクを正しく設置したい初心者に向けた内容ですが、上級者にも役立つと思います。SEOも意識した作成術を、詳しく説明しているからです。ホームページのリンクが重要なのか?リンクは、ホームページ同士をつなげます。さまざまな情報に出会える入口であるとも言えるでしょう。したがって、閲覧者に新しい知識を提供するという意味で、非常に重要なんです。そこで、正しい作り方について説明しようと思います。誤った作り方をすると本来の目的である『新しい情報の入り口』という役割が果たせないからです。それは、お手本通りに作成するという意味だけでなく、閲覧者の使いやすさ(導線設計)という点も考慮すべきポイントが多々あります。検索エンジンはリンクを重視しますので、検索順位にもかかわってきます。作ることが、結果的にはWeb集客にも好影響を与える可能性があるんですね。そこで、どのようにリンクを設置するのがベストなのか、正しい作り方を説明します。※リンクについてリンクには関係性によって、以下のように2通りあります。他のホームページから自サイトへリンク今回ご説明するのは「発リンク」ということになりますので、ご注意ください。正式には「ハイパーリンク」と言いますが、「リンク」の方が一般的ですので、言葉遣いはそちらに統一しています。ホームページのリンク、作り方7つのポイント!それでは、ホームページのリンクについて、作り方を7つのポイントに分けて説明します。1.リンクの基本的な作り方とは?まず、リンクの基本的な作り方を説明します。以下の例をご覧ください。ウェブソルブこのように記述すると、文字列がリンクとして機能します。これだけで作れますが、とても重要なポイントがあります。タグで囲まれている部分)」と一致させることです。それなりの作法があるということなんですね。文字列は接続先を正確にあらわさないといけないんですね。「こちらをクリック」などとするのは誤りなんです。文字列にこだわるのかと言えば、人間にはわかっても、検索エンジンにはわからないからです。システムが認識できなければ、検索順位に悪影響を及ぼす可能性があります。そのため、リンク文字はページタイトルと一致させて、正しく作るようにしてください。人間の目で見ても分かりやすくする(ユーザービリティ)ためにも正確な文字列でリンクを作りましょう。2.同一ページ内にリンクを張るには?続いて、同一ページ内にリンクを張る場合をご紹介しましょう。基本的な流れは、移動先に目印(ID属性)を付けて、そこへ目がけてジャンプするという設定を行います(IDに#を付けると、アドレスとして指定できます)。以下の例示をご覧ください。id=”point2′′>同一ページ内にリンクを張るには?</h3>このように記述すると、「同一ページ内にリンクを張るには?」をクリックした際に、h3タグへジャンプします。hrefにはURLの代わりに「#ID」を設定しますが、文字列は任意で構いません。)つまり、ページ内でリンクを張る場合は必ずID属性を使うことになるので、ジャンプ先には何かしらのタグが必要です。一般的には、見出しに移動することが多いと思いますので、特に困ることはないと思いますが、場合によっては無理やりに設定が必要かもしれませんね。先ほどの基本的な作り方同様、リンク先の文字列に合わせるようにした方が、やはり無難だと思います(検索エンジンへの対応という意味で)。ちなみに、IDは同一ページ内では唯一無二になるようにしてください。これはHTMLのルールなので、同じものを複数作らないよう気をつけましょう。補足:他ページの特定位置にジャンプするには?他ページの、特定の位置にジャンプさせたい場合がありますよね。その際は、URLの後ろにIDを続けて記述してください。具体的には以下のようにします。href=”sample.html#point3′′>サンプルページ-三番目の見出し</a>ただ、この場合はリンク文字列が少々ややこしいですね。基本的には移動先のページタイトルを使用すべきでしょう。その後ろにハイフンや半角スペースで見出しの文字列を連結すれば、間違いないと思いますよ。3.ボタン(画像)をリンクにするには?続いて、ボタンをリンクにする方法を説明します。以下の例を見てください。aタグで囲むだけで簡単に設定ができます。縦横のサイズについては、自動的にイメージの大きさに合わせてくれますよ。画像をリンクにするときは大きな問題が発生します。それは、文字列が設定できないことです。移動先を示すワードが無いですので、検索エンジンに対して良くない対応になります。そこで、必ず行ってほしいのが、imgタグにalt属性を設定することです。alt属性が設定された画像をaタグで囲むと、そこに設定された文字列がリンク文字の代わりとして働きます。先ほどと同様に移動先のタイトルと一致させてください。現在主流のHTML5のルールでは、alt属性は必須ではありませんが、画像をリンクにする場合は必須だと思ってください。4.PDFファイルにリンクを張るには?PDFをダウンロードしてもらいたいときなど、リンク先をページではなくファイルにしたいときがありますよね。その場合は、そのまま指定しても構いません。具体的には、以下の例のようにhref属性にファイル名と場所を指定してください。href=”マニュアル.pdf”>マニュアル</a>ちなみに、画像をダウンロードできるようにしたい場合も、hrefにファイル名と場所を指定してください。href=”写真.jpg”>写真</a>なお、接続先がページではないので、リンク文字は神経質にならなくても良いです。検索への影響が少ないからです。PDFファイルの場合は内容が検索対象になる場合がありますので、そこまで考えるのであれば気を配りましょう。文字に直接リンクを張る場合でも、画像でaltに文字列を入れる場合でも、なるべくなら内容を正しく示したものにしましょう。閲覧者のためになりますからね。補足:内容が表示されてしまう場合は?リンク先をファイルにすると、ダウンロードではなく内容が表示される場合があります。属性を設定しましょう。以下のようにファイル名を記述します。download=”写真.jpg”>写真</a>このように記述(ファイル名だけ、パスは不要です。)すると、画像を表示せずにダウンロードできます。PDFなど他の種類も指定できますよ。download属性に対応していませんので、「右クリックして[対象をファイルに保存]」するように促すと良いでしょう。5.ライン用のリンクを作るには?ホームページを多くの方に知ってもらうために、ラインでの拡散を期待する方もいらっしゃると思います。実は、ライン用のリンクは簡単に作れます。ワンクリックで利用できるので、閲覧者は簡単に仲間に紹介できますよ。以下のライン公式ページにアクセスしてみてください。指示に従って手順通りに進めば、とても簡単に作れますよ。https://media.line.me/ja/how_to_installmedia.line.meただし、ラインは閉じた世界でのつながりであり、ツイッターなど他のSNSのような拡散は難しいと思われますので、過度な期待はしないようにしましょう。6.リンク先を新しいタブで開くには?リンク先を他サイトのページにした場合など、別のタブで開きたいことがありますよね。そのようなときは、target属性を追加するだけで、簡単に設定できます。以下の例をご覧ください。target=”_blank”>他のサイト</a>target属性の値は「_blank」を設定しましょう。これで簡単に別のタブで開きます。隣)を押すと表示できます。分からなければ、前の段落からコピー&ペーストしていただいても構いませんよ。この方法は閲覧者の導線に強く影響しますから、閲覧の流れを邪魔してしまわないか、よく考えて使用しましょう。7.リンクはサイト構造を考えて作りましょう冒頭でもお話ししましたが、リンクはページ同士を結び付ける役割があります。したがって、情報の種類と在り処をよく考えて連結する必要があります。閲覧者がホームページ上で迷子にならないようにするためと、検索エンジンにサイト構造を伝えやすくするためです。言うと、トーナメント表のようにトップページから細分化していくイメージです。先へ進めば進むほど、内容がより詳しくなるようにするわけですね。関連性のあるページ同士もリンクさせて、各ページからは先頭へ直に移動できるように結び付けるのも重要です。リンク構造のイメージ図HTMLで完全に自作している方は、十分注意して作りましょう。WordPressなどのシステムを使っている場合はほとんど勝手に構造が作られるので、関連するページの結び付け(カテゴリーやタグ)などに注意するだけでよいと思います。実際に、検索で下位のページにたどり着いて、そこから上位のページに移動する閲覧者は多いと思いますので、リンクによるサイト構造の構築は非常に重要であると認識しておきましょう。いわゆる「パンくずリスト」を作成するのも、良い方法だと思います。ホームページのリンクについて、正しい作り方を説明しました。今回ご紹介したのは、リンクの基本的な作り方から始まり、同一ページ内にリンクを張る、ボタンをリンクにする、PDFファイルにリンクを張る、ライン用のリンクを作る、リンク先を新しいタブで開く、リンクはサイト構造を考えて作る、などのポイントでした。ホームページのリンクは別ページへの移動だけでなく、より詳しい情報に誘導する役割があります。それは閲覧者の目だけでなく、検索エンジンの分析でも同じように判定されます。タグで囲まれた文字列は、正確に移動先を表さなくてはいけないんですね。このように、ユーザビリティだけでなくSEO対策にも強く影響するのが、ホームページのリンクであることを忘れないでください。何となく作るのではなく、しっかりと意図を持って設置しなくてはいけないことを、ご理解いただければ幸いです。以上、「ホームページのリンク、正しい作り方を解説!」と題して説明しました。「今すぐ問い合わせが増えないだろうか...」とお悩みの方、ぜひご相談ください。デザインが良いホームページを作っても集客できないことを。実は、訴求点や集客戦略といった、目に見えにくい部分を作りこまないとうまくいかないんです。ウェブソルブでは、集客対策のお手伝いをしています。(ご相談は無料ですが、アドバイスには別途費用が必要です。)0000LINE!1こちらのページはもう読まれましたか?ホームページ集客の最も重要なポイントが分かる必読ページです。お読みでない方は、ぜひ目を通してください(絶対オススメです!)。ホームページ集客できない、理由と対策を解説!ホームページ集客できない理由と対策を解説しました。成果があがらずお困りの方は必ず目を通してください。何をすべきか、外してはいけない極めて重要なポイントを、初心者の方にも分かりやすく説明しているからです。使い方、分かりやすく説明しました!Web担当者を応援するブログウェブソルブでは、皆様にお役立ていただける情報を発信しております。★内容は分かりやすいですか?ページ内容が「ちょっと難しいな...」と感じた方は、先にこちらをどうぞ。ホームページの基礎知識まとめ前提となる知識が学べますよ。!ホームページ初心者や、広報・営業の経験が無い方も、お気軽にご相談ください。Q&A形式でご紹介!Webコンサルティングとは?Webコンサルティングの、疑問にお答えします。