プログラミングの勉強 独学でも十分可能!HTMLの勉強ページ内リンクを作る!初心者からでも出来るSEO対策にもなる重要な機能!

saucechord Programming

サワディークラップ(タイ語でこんにちは)

タイでミニマリスト生活を送っているtoshiです。

ノマドワーカーとして快適なカフェやコワーキングスペースを探すのが大好きです。

プログラミングの勉強も少しづつしています。難しいですね。時々挫折しそうになります。

でも壁を乗り越えると面白くてすっきりするので続けています。最近コードペン中毒になりつつあります。

という事で今日はページ内部リンクの作り方をメモしたいと思います。

HTML内部リンクの勉強

内部リンクの重要性

ページ内部リンクを作ることはSEOの観点でも重要で、初心者からでも覚えて自由に使えるようにしておくことは大切です。

後々その重要性に気づくようになります。

サイトに来てくれた読者をいかに長く、サイトの中にとどまらせておくことが出来るかに繋がるからです。

離脱率を下げることに繋がります。

離脱率が低いという事はそのサイトはしっかりした内容の記事が書かれていて、読者にとって有益なんだとGoogleのロボットが判断できる材料になるからです。

そうなると、サイトの評価も上がることになり、上位に向かって上昇してゆくことに繋がってゆく可能性が高くなります。

なので内部リンクの作り方を覚えましょう。

programchord

内部リンクの作り方

<ul>タグと<li>タグと<a href” “>タグを使います。

例えばページ内にサイトの特徴と人気ランキングという、リスト表示するための項目を作るとします。

こういう書き方をします

<ul>
<li><a href=”features”>サイトの特徴</a></li>
<li><a href=”ranking”>人気ランキング</a></li>

次にそれぞれの項目に飛べるように、その項目に<id=” “>属性を作ります。

気を付けたいのは<id>属性は自分で値を作ることが出来るようですが、ほかの場所とかぶらないようにする必要があります。値を変えるということです。つまり記述する名前を変えるということです。

こういう書き方が出来ます。

<h2 id=”features”>サイトの特徴</h2>
<h2 id=”ranking”>人気ランキング</h2>

そして最後に最初の飛びたい場所の名前が書いてある<a href=” “>属性の箇所に#記号とidの名前をつけてあげれば終了です。

つまりこういう書き方にします。

<ul>
<li><a href=”♯features”>サイトの特徴</a></li>
<li><a href=”♯ranking”>人気ランキング</a></li>

ページの一番最後まで言ってから一気にページのトップに戻るためには

<p><a href=”#toop”>TOPへ</a></p> で作ることが出来ます。

簡単なサンプルを作ってみた

簡単な内部リンクの動きを確認するウェブページのサンプルを作りました

<h1 id="toop">Nomadic Life</h1>
<ul>
<li><a href="#features">サイトの特徴</a></li>
<li><a href="#ranking">人気ランキング</a></li>
  <p>プログラミングを学びたいと考えている人がたくさんいます。</p>
  <p>独学で学びたいと考えている人。</p>
  <p>短時間で学びたいのでスクールに行くことを感がている人。</p>
  <p>独学のメリットデメリット</p>
  <p>スクールに通うメリットデメリット</p
    
    <p>このサイトではそれぞれの観点から情報を発信しています</p>
  
  
  
<h2 id="features">サイトの特徴</h2>
  <p>このサイトの特徴には次のようなものがあります</p>
  <p>このサイトはプログラミングを学びたい人が、どのように始めたらよいのかがわかりやすく説明されています。</p>
  <p>初心者の人が初めてプログラミングを勉強してゆくうえで参考になる情報が収められています。</p>
<h2 id="ranking">人気ランキング</h2>
  <p>プログラミング言語には様々なものがあります。</p>
  <p>このサイトでは主にHTML,CSS,JavaScript,
  WordPressについての情報を見ることが出来ます。</p>
  
<p><a href="#toop">TOPへ</a></p> 
  

上のソースコードを表すと、こんなかんじで表示されます。 リンクが動きます↓

Nomadic Life

  • サイトの特徴
  • 人気ランキング
  • プログラミングを学びたいと考えている人がたくさんいます。

    独学で学びたいと考えている人。

    短時間で学びたいのでスクールに行くことを感がている人。

    独学のメリットデメリット

    スクールに通うメリットデメリット

    このサイトではそれぞれの観点から情報を発信しています

    サイトの特徴

    このサイトの特徴には次のようなものがあります

    このサイトはプログラミングを学びたい人が、どのように始めたらよいのかがわかりやすく説明されています。

    初心者の人が初めてプログラミングを勉強してゆくうえで参考になる情報が収められています。

    人気ランキング

    プログラミング言語には様々なものがあります。

    このサイトでは主にHTML,CSS,JavaScript, WordPressについての情報を見ることが出来ます。

    TOPへ

まとめ

内部リンクの作り方をマスターすればSEO対策に繋がります。難しくないので、覚えて自分のサイトに導入してみましょう。

うまく構築できれば、読者の滞在時間が長くなって離脱率を下げることが出来ます。読者を飽きさせないようにするための重要なコードの書き方です。

それではまたサワディー

独学でプログラミングをマスターすることは可能です!

しかし、習得に時間がかかる事は間違いありません。短時間でマスターするためにはオンラインで受講できるプログラミング講座おススメです。無料体験レッスンをするならCodeCampがおススメです!

コメント

Translate »