はてブ数=0のブログ必見!最強の内部リンクカードを作ったよ♪

hatena

WordPressへ引っ越してきて
引っ越し作業の確認に。と、リンク切れチェックをBroken Link Checkerで行なってみたら、な、なんと50個ほどのリンク切れが見つかりました。

その殆どが、ブックマークレットでサムネイル画像付き記事を紹介するShareHTMLはてブ数取得のURLに対してで
私は内部リンクの記事紹介にShareHTMLを利用してたので困ってしまいました。

スポンサーリンク

はてブ数0は、リンク切れ扱いでSEO評価がダウン??

調べてみると、「リンク切れ」となってるのは同じShareHTMLでもはてなブックマーク数がゼロのものに対してだけでした。

一生懸命ブログを紹介しようと関連記事紹介を載せても、

はてブしてくれない上に、はてブ0はリンク切れ扱い

これでは踏んだり蹴ったりですね。(>_<)

検索してみると、同じような疑問を抱いた人が多くいて、はてブされてない記事にShareHTMLを使用することをためらう方も多いようでした。

はてブに対してではありませんが、記事内にリンク切れが多いとSEO評価にマイナスになると断言する方は多いようです。
ブログも新しくしたことだしコードを書き換えて作り直してみました。

最強の内部リンクカード?

これまで2回ほど内部リンクの紹介記事を書いてきましたが、
今回の「リンク切れ」と、以前ブログ診断で怒られた画像のalt=""情報がないことをしっかり対策として取り入れて

ついに最終形態が完成しました♪
(↓デザインは変えるかもしれないので画像で貼ってます。)

link-card

機能説明

  1. はてなブックマーク数取得を削除
  2. ShareHTMLではheartrailsにアクセスしてサムネイルを取得しますが、これは自サイトの画像からサムネイルを作ります。
  3. タイトルをH3見出しで作ります。
  4. alt情報を自動でタイトル名とサイト名を取得します。

 つまり、検索エンジンが記事をクロールしてる途中で外部に飛んで邪魔されない。
H3見出しにより、目立たせるのはもちろんですが本文を邪魔しない位置(←私の想像です)
通常のShareHTMLではalt情報は取得しないため、HTML診断ではマイナス点となりますが、これはちゃんと取得できるようにしてます。

参考

hatenabookmarkブログカードについて

余談ですが、この記事のタイトルの「リンクカード」というのは、
はてなブログの「ブログカード」と区別させるための仮名称です。

このはてなのブログカードがOGPに対応したことで爆発的に増えてきてるようですが
こんなの↓

blog-card

確かにとても綺麗でまとまりもあって魅力的ですが、ソースを見るとタイトルがH2で書かれてました。

これは、もしかすると恐ろしいことで
テーマによりますが、記事タイトルは通常は「H1」で記事内における一番大事な見出しが「H2」です。

自分が一生懸命書いた記事内に他サイトの記事紹介を「H2」で記載したら?

当然、自分の書いた記事は他サイトに取って食われてしまいます。(たぶん)

Simplicityのブログカード

Simplicityに標準装備のブログカードは表示項目も色々選べてとても優秀です。
私もこれを使い続けたいのですが、時々何かが干渉して表示できない記事があるため、自作のリンクカードを使ってます。(干渉してるものは私の記事内のコンテンツです)

blog-card2

リンクカードの作り方

コピペでOKのコード

このコードをShareHtmlメーカーにペーストしてコメント欄を空欄にして生成して下さい。

サムネイルをもう少し大きくしたい場合は、width=”70″の部分と
↓のCSSの43.44行目を書き換えて下さい。

ShareHTMLの使い方が分からない人は、↑のコードは無視して
1. このページをブックマークする。
2. ブックマークの編集からURLを↓このソースコードで上書きして下さい。
3. 名前を「内部リンク用」など分かりやすくして保存でOKです。

登録方法や使い方はこちら 

私と同じデザインにするCSSはこちら 

お使いのテーマによってH3には元々のスタイルが適用されてると思うので↑のCSSも元のスタイルを除去したり強調したりする作りになってるので全く同じにはならないと思います。

↑47行目からでは、LigatureSymbolsのWEBアイコンで 内部リンクマークをタイトル後ろに表示しています。

もし、LigatureSymbolsをインストールしてない場合は、FontAwesomeを使用して下さい。
(SimplicityにはFontAwesomeが入っています。)

47~52最後までを↓で書き換えます。

FontAwesomeだと、←こんな感じになります。

参考

trouble このリンクカードの短所?

見出しタグから「もくじ」を作成して表示してる方は、↑の「もくじ」のように
リンクカードのH3も拾ってしまいます。

もしかすると、その方が目立って良い。と思われる方もいるかも?なので
短所なのか長所なのか分かりませんが、「もくじ」に関係ないキーワードが入ってしまうため、「もくじ」だけ見て「自分には関係ない記事だ!」と訪問した人に思われないよう前後の見出しにキーワードをちゃんと挟み込む気遣いが必要ですね。

 あとがき

内部リンクは、自分のサイト内を巡回してもらう一番の方法で
でも、関係ないリンクを張り巡らせることはSEOの評価を逆に下げてしまいます。

さらには、今では誰もがしてる関連記事や新着記事のテンプレート化したものはSEO的には評価されない。とも言われています。

自分が書いてる記事の「ここぞ!」という時に似たキーワードの内部リンクを誘導するのが一番効果的かもしれませんね。

以上!お疲れ様でした♪(^^)/

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る