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

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

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

【もくじ】

1 はてブ数0は、リンク切れ扱いでSEO評価がダウン？？
2 最強の内部リンクカード？
- 2.1 機能説明
- 2.2 ブログ診断で怒られた！画像にはAlt属性とtitle属性の追記が大事！
  - 2.2.1 hatenabookmarkブログカードについて
    - 2.2.1.1 Simplicityのブログカード
3 リンクカードの作り方
4 trouble このリンクカードの短所？
- 4.1 あとがき

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

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

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

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

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

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

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

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

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

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

機能説明

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

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

参考

ブログ診断で怒られた！画像にはAlt属性とtitle属性の追記が大事！

hatenabookmarkブログカードについて

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

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

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

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

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

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

Simplicityのブログカード

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

リンクカードの作り方

コピペでOKのコード

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

<div class="shareHtmlFrame"><span class="shareThumb"><a href="${posturl}"><img src="${memo}" width="70" height="" class="shareThumbImg" border="0" style="float:left;" alt="${posttitle}" /></a></span><h3 class="shareTitle"><a href="${posturl}">${posttitle}</a></h3><div style="clear:both;"></div></div>

<div class="shareHtmlFrame"><span class="shareThumb"><a href="${posturl}"><img src="${memo}" width="70" height="" class="shareThumbImg" border="0" style="float:left;" alt="${posttitle}" /></a></span><h3 class="shareTitle"><a href="${posturl}">${posttitle}</a></h3><div style="clear:both;"></div></div>

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

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

javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/\?/))url+='?t='+(new Date()).getTime();url+='&out='+'popup'+'&cnt='+'100'+'&sts='+'<br><span style%3D"color%3A %23808080%3Bfont-size%3A 80%25%3B">'+'&ste='+'</span>'+'&cts='+''+'&cte='+''+'&fmt='+'<div class%3D"shareHtmlFrame"><span class%3D"shareThumb"><a href%3D"%24%7Bposturl%7D"><img src%3D"%24%7Bmemo%7D" width%3D"70" height%3D"" class%3D"shareThumbImg" border%3D"0" style%3D"float%3Aleft%3B" alt%3D"%24%7Bposttitle%7D" /></a></span><h3 class%3D"shareTitle"><a href%3D"%24%7Bposturl%7D">%24%7Bposttitle%7D</a></h3><div style%3D"clear%3Aboth%3B"></div></div>';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/\?/))url+='?t='+(new Date()).getTime();url+='&out='+'popup'+'&cnt='+'100'+'&sts='+'<br><span style%3D"color%3A %23808080%3Bfont-size%3A 80%25%3B">'+'&ste='+'</span>'+'&cts='+''+'&cte='+''+'&fmt='+'<div class%3D"shareHtmlFrame"><span class%3D"shareThumb"><a href%3D"%24%7Bposturl%7D"><img src%3D"%24%7Bmemo%7D" width%3D"70" height%3D"" class%3D"shareThumbImg" border%3D"0" style%3D"float%3Aleft%3B" alt%3D"%24%7Bposttitle%7D" /></a></span><h3 class%3D"shareTitle"><a href%3D"%24%7Bposturl%7D">%24%7Bposttitle%7D</a></h3><div style%3D"clear%3Aboth%3B"></div></div>';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

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

Bloggerで自分で選んだ関連記事（内部リンク）を綺麗に見せる方法

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

/* ブックマークレット関連---------------------------- */
/* ShareHTML関連アイキャッチのスタイル */
h3.shareTitle {
  margin: 0;
  border: none;
  padding: 2px;
  text-shadow: 1px 2px 0px #FFF;
}
h3.shareTitle a {
  text-decoration: none;
  font-size: 21px;
}
span.shareTitle {
  font-size: 110%;
  font-weight: bold;
  text-shadow: 1px 2px 0px #FFF;
}
.shareHtmlFrame:hover {
  background: linear-gradient(to bottom, #F8E5BA, #fff);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFf8e4b8', endColorstr='#FFffffff');
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFf8e4b8', endColorstr='#ffffff',GradientType=0 );
}
.shareHtmlFrame{
background-color:#ffffb7; 
background: linear-gradient(to bottom, #fff, #f8e4b8);
                -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8e4b8));
                -moz-linear-gradient(top, #fff, #f8e4b8);
                filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFf8e4b8');
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8e4b8',GradientType=0 );
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
border-color: #cc0000; 
border-style: solid; border-width: 1px; 
margin: -1em 8px 2em 8px; padding: 4px 10px 5px 10px;
}

.shareThumb img {
  margin-right:10px !important;
  height: 70px !important;
  max-width: 70px;
  overflow: hidden;
}
h3.shareTitle a:after {
  content: "\E082";
  font-family: LigatureSymbols;
  margin-left: 5px;
  font-weight: normal;
}

/* ブックマークレット関連---------------------------- */

/* ShareHTML関連アイキャッチのスタイル */

h3.shareTitle {

margin: 0;

border: none;

padding: 2px;

text-shadow: 1px 2px 0px #FFF;

}

h3.shareTitle a {

text-decoration: none;

font-size: 21px;

}

span.shareTitle {

font-size: 110%;

font-weight: bold;

text-shadow: 1px 2px 0px #FFF;

}

.shareHtmlFrame:hover {

background: linear-gradient(to bottom, #F8E5BA, #fff);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFf8e4b8', endColorstr='#FFffffff');

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFf8e4b8', endColorstr='#ffffff',GradientType=0 );

}

.shareHtmlFrame{

background-color:#ffffb7;

background: linear-gradient(to bottom, #fff, #f8e4b8);

-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8e4b8));

-moz-linear-gradient(top, #fff, #f8e4b8);

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFf8e4b8');

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8e4b8',GradientType=0 );

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);

-moz-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);

-webkit-box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);

border-color: #cc0000;

border-style: solid; border-width: 1px;

margin: -1em 8px 2em 8px; padding: 4px 10px 5px 10px;

}

.shareThumb img {

margin-right:10px !important;

height: 70px !important;

max-width: 70px;

overflow: hidden;

}

h3.shareTitle a:after {

content: "\E082";

font-family: LigatureSymbols;

margin-left: 5px;

font-weight: normal;

}

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

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

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

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

h3.shareTitle a:after {
  content: "\f0c1";
  font-family: fontawesome;
  margin-left: 5px;
  font-weight: normal;
}

h3.shareTitle a:after {

content: "\f0c1";

font-family: fontawesome;

margin-left: 5px;

font-weight: normal;

}

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

参考

BloggerのロゴをFontで使えるLigatureSymbolsの解説

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

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

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

あとがき

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

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

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

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

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

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

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

機能説明

hatenabookmarkブログカードについて

Simplicityのブログカード

リンクカードの作り方

コピペでOKのコード

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

あとがき

訪問ありがとうございました。

My Youtube

関連記事

コメントをどうぞ コメントをキャンセル

コメントをどうぞコメントをキャンセル