2020最新!Cocoon内部リンク(ブログカード)の設定方法

ブログを運営していると、SEO対策の一つとして記事の中に内部リンクを貼ることが大事になってきますよね。

ワードプレス無料テーマCocoonでは簡単に内部リンク(ブログカード)を貼ることができます。

当記事では10枚の画像を使用しながら、Cocoonの内部リンク(ブログカード)の設定方法から記事への貼り方、ブログカードの紹介文の内容の変え方などを初心者向けに分かりやすく解説いたします。

それではさっそく見ていきましょう!

ブログカードの設定方法

ブログカードの設定はとても簡単です。

まずはブログカードの設定を行うため、Cocoon設定をクリックします。

上図の赤枠内にある『ブログカード』で内部リンクの設定ができます。

まず、ブログカードを使用するために、

ブログカード表示 > □ブログカード表示を有効にするにチェックを入れましょう。

▼それぞれの設定について解説していきます。

『サムネイルスタイル』:ブログカード内に表示されている画像が左側or右側のどちらに置きたいのかをお好みで選べます。

『日付表示』:ブログカード内に表示されます。お好みでお選びください。

『リンクの開き方』:ブログカードをクリックした際に、新しいタブ(別タブ)で開くか、移動せず同じページ内で開くようにするかを選ぶことができます。

設定が終わりましたら、

変更をまとめて保存をクリック!

以上でブログカードの設定は完了です。

記事にブログカードを貼る方法

記事の中で、⊕マークをクリックし、下の方へスクロールすると、

Cocoonブロックの中にブログカードがありますので、クリックします。

上図の赤枠内のように、リンク先のURLを貼り付けましょう。

上図のようにURLをブログカードに貼り付けることで、

プレビューで確認すると、無事、ブログカードが表示されるようになります。

ブログカードにラベルをつけるには?

ラベルとは、ブログカードの左上に表示されている「あわせて読みたい」の部分のことを指します。

「関連記事」や「あわせて読みたい」といったラベルを表示することによって、

違和感なく違うページへ誘導する効果が期待できます。

このラベルは、ブログカードを一回右クリックすると、

右側に表示されているスタイル設定のプルダウンより、簡単に好きな文言に変えることができます。

ブログカードの紹介文を変えるには?

赤枠内に囲ったブログカード内の文章は、設定をしないと自動で本文から抜粋されて使われてしまいます。

場合によっては、記事の最初の文章である必要のない自己紹介部分が抜粋され、ブログカードに表示したくない文面が表示されることがあります。

ブログカードに表示される文章は、

上図の赤枠内『メタディスクリプション』の文章が優先的に使われます。

このメタディスクリプションに何も入力していない時は、本文から文章が自動で使われる仕組みになっています。

メタディスクリプションを入力できる場所
:リンク先対象ページである投稿画面を開き、下へスクロールをすると、
SEOタイトルやメタディスクリプションを入力できる表示がでてきます。

ブログカードの紹介文を非表示にしたい場合

『紹介文が長くて、ブログカードがごちゃごちゃしているように見える‥シンプルにタイトルとアイキャッチ画像のみ表示したい!』という方もいらっしゃると思います。

ブログカードの紹介文を非表示にするためには、元々cocoonで設定できるようにはなっていないため、CSSを書く必要があります。

当サイトもブログカードを貼る際は、追加のCSSにより紹介文を非表示にするよう設定しています。

▼紹介文を非表示にするCSSに関しては以下のサイトが参考になりますよ!

ブログカードの表示を、本文なしにできる機能が欲しいです | 要望 | Cocoon フォーラム

ぽてん
ぽてん

設定お疲れさまでした☆

コメント

  1. たろう より:

    ブログカードの紹介文の設定参考になりました!

  2. かしわ より:

    サイトの作りがすっきりして見やすく、内部リンクの解説も私のような入門者に親切で分かりやすかったです。感謝

タイトルとURLをコピーしました