こんな悩みを解決します。
記事の内容
- 内部リンクとは
- 4つの使い分け
- 使い方説明
プロフィール
よっしー（@yosshiblog）
この記事を書いている僕はブログ歴１年３か月の高卒ブロガーです。1つ目の超特化ブログで月間1万ＰＶを継続しています。
当サイトで使っている内部リンクは、以下の通り。
内部リンクの種類
- >>で表示する
- 関連記事で表示する
- 文章の途中で表示する
- カードで表示する
内部リンクは「テキストタイプ」と「カードタイプ」で分かれており、状況によって使い分けております。
色々な使い分けをすることでデザインを気にしながらリンクを表示させることが出来るので、とても重宝しております。
今回は記事の前半で内部リンクについて、記事の後半で内部リンクの使い方を解説していきます。
AFFINGER6をさっそく導入したい方は、３ステップで分かりやすく解説をしているのでこちらの「AFFINGER6の導入方法」からご覧ください。
内部リンクとは
内部リンクとは、自サイトのページをつなぐリンクのことを指します。
内部リンク
関連のある記事同士を内部リンクでつなげることで様々なメリットを得られることが出来ます。
- Googleのクローラーが巡回しやすくなる
- 関連同士がつながることで評価が高くなる
- 読者の滞在時間が長くなる
このようにメリットがたくさんあるので、必ず設置をしておいた方がいいでしょう。
ですが、関連が無い記事にリンクを飛ばしてしまうとGoogleからの評価が下がったり、ユーザーの滞在時間が短くなってしまったりと使い方を間違えると逆効果なのでご注意ください。
内部リンクには以下の種類があります。
- ブログカード
- アンカーテキスト
- alt属性の設定
- パンくずリストの設置
- サイトマップの作成
今回は、関連記事同士をつなぐ「アンカーテキスト」と「ブログカード」について解説をします。
内部リンクについての記事は今後執筆していくのでお待ちください。
AFFINGER6の内部リンクの置き方
アフィンガーの内部リンクの置き方は、以下の通り。
- テキストタイプ
- テキストタイプ（関連記事）
- カードタイプ
順に解説をします。
置き方①：テキストタイプ
まずは、テキストタイプを解説します。
テキストタイプはとても簡単で、記事のURLをコピペするだけで完了です。
まずは、Wordpressの投稿画面へと移動して記事のタイトルを入力しましょう。
タイトルを入力
次に、表示させたい記事のURLをコピーしてください。
記事のURLをコピー
コピーをしたら先ほどの投稿画面に戻って、URLをペーストしていきます。
先ほどのタイトルを選択したら、「リンク挿入」をクリック。
リンクの挿入
リンクの挿入欄があるので、先ほどコピーしたURLをペーストしていきます。
URLをペースト
反映確認
「プレビュー」をクリックして、先ほど作ったリンクから目的の記事に移動出来たら完了です。
この内部リンクを色々な方法で表示させています。
内部リンクの表示方法
状況によって使い分けているので、どのように表示させているかは当サイトの内部リンクを探してみてください。
置き方②：テキストタイプ（関連記事）
関連記事
HTMLコードを使ったテキストタイプの内部リンクを解説します。
HTMLコードと聞くと難しく感じますが、以下のコードを差し込むだけなのでとても簡単です。
まずは投稿画面のテキストモードに切り替えます。
以下のコードをコピーして、テキストにペーストをして下さい。
<span class="sankou">ここにテキスト</span>
関連記事と入力
ペーストをしたら「ここにテキスト」と書かれている部分に、お好きなタイトルを入力してください。
※今回は、関連記事と書いて解説をします。
入力が完了したら、記事のタイトルを以下のように入力してください。
タイトルを入力
- HTMLコードの後にタイトルを入力
- ビジュアルモードに戻す
そうしたら、関連記事の装飾が完成しています。
後は、タイトルに記事のリンクを挿入すれば完了です。
関連記事の表示が完成
今回は例として関連記事を書きましたが、「人気記事」や「合わせて読みたい」など状況によっていろいろなつかいかたができるので、ぜひ試してみてください。
置き方③：カードタイプ
カードタイプ
カードタイプの挿入もとても簡単で、記事のIDをHTMLコード内に入れるだけで表示することが出来ます。
WordPressの投稿画面に移動したら、「カード」をクリック。
カードタイプの内部リンク
上記のようなコードが出てくるので、記事のIDを入力してください。
記事のIDは以下の部分に表示されています。
記事のID
記事のID
入力が完了したら、しっかりと反映されているか確認してみましょう。
内部リンク反映確認
色々なブログカード
このカード型内部リンクですが、カスタマイズされているものがすでに用意されています。
様々な内部リンク
「タグ」→「記事一覧/カード」→「ブログカード」を選択すると、すでにカスタマイズされているブログカードがあるので、お好きなものを選んで使用することも出来ます。
様々なブログカード
ブログカードのカスタマイズ
AFFINGER６はすでに用意されているブログカードがありますが、自分でカスタマイズすることが出来ます。
ブログカードのカスタマイズ
| コード | 変更内容 |
| label | 文字入りのラベルを表示 |
| pc_height | PC時の表示高さ |
| name | 入力するとタイトル変更 |
| bgcolor | ラベル背景色 |
| color | ラベル文字色 |
| webicon | アイコン入力 |
| readmore | 「続きを見る」の有無 |
| thumbnail | 画像有無 |
| type | textにするとラベル変化 |
上の表のように、様々なカスタマイズが出来るので好みのブログカードが作れますね。
ブログカードのカスタマイズ
- label＝続きを見る
- color＝red
- readmore=off
上記のように入力したら、反映確認をしてみましょう。
ブログカードの反映確認
デフォルトのブログカードとはデザインが変わっていることが分かります。
このように自分好みのブログカードにすることが出来るので、色々なカスタマイズを試してみてください。
まとめ：色々な内部リンクを使い分けよう
今回は、「AFFINGER６の内部リンクの使い方」について解説をしました。
AFFINGER6は機能やカスタマイズが豊富と言われていますが、内部リンクだけでもいろいろな使い方をすることが出来ます。
内部リンクをうまく使い分けて、ユーザーの回遊率や滞在率をどんどん改善していきましょう。
