(cache) はてなブログproで最初にすべき設定、内部SEO対策や表示速度の改善策

はてなブログを毎日更新しつづけてちょうど３ヶ月。本日はてなブログproへと課金した。無料ユーザー時に制限されていた項目の解除や以前から思慮していた点をまとめてカスタムした。

f:id:hapilaki:20140331235213p:plain

キャプチャー画像で見るビフォーアフター

はてなブログpro課金直後とカスタム後の当ブログのホームページキャプチャー画像。

ビフォー

はてなブログpro課金直後のキャプチャー

アフター

はてなブログpro課金後にカスタムしたキャプチャー

ぱっと見、違いがわからないマイナーチェンジばかりなので、Gifアニメで違いが分かりやすいようにした。

はてなブログpro課金後のカスタム前後Gifアニメ

表示を強制されていた項目を消去

proに課金して可能なこと

次の３点をブログから消去し、表示速度の改善を図った。

キーワードリンク - 記事内に不要なaタグが自動生成されていた
Google AdSense 広告 - iframeによる他人の広告が表示されていた
ヘッダとフッタ - 読者に不要なヘッダとフッタがあった

f:id:hapilaki:20140331225513p:plain

ただし、過去の記事に関してはキーワードリンクがそのまま残り続けるので、手動による更新作業が必要。

コツは、キーワード解除設定後、記事を保存し直す必要があります。全部保存し直すのは大変ですが、人気のある主要文書は出来るだけ早く再保存しておきましょう。

独自ドメイン（はてなブログPro）にしたら変更したい６項目 - tarのブログるっ

小結

HTMLそのものがソースから消去されるので、表示速度改善にいくぶん寄与する。
不要なリンクが自動生成されないので、ブログ内の各リンクの重みが相対的に上がり、内部SEOに寄与する。

表示速度改善のため各種プラグインを外した

Zenback

当初は関連記事表示プラグインを自作するつもりだったので、とりあえずでZenbackを利用させていただいていた。

気がつけばこの件を放置で３ヶ月経ってしまった。関連記事を表示したいので、早く自作しないと痛みが伴う環境に自分を置いた。

はてなブックマークでのコメント

iframeが読み込まれるのに時間がかかるので、とりあえず外した。代わりにブックマークボタンに文言を追加した。様子を見て今後復活も検討する。

はてなスター

これは外したくなかった。最後まで悩んだ。筆者が記事内でさりげなくボケても、引用スターされるのが嬉しかった。表示速度改善やスパム疑惑などの見地から泣く泣く外した。

はてなスター停止から約２週間…。検索エンジンからのアクセスが３倍になりました。みなさんのところのアクセス推移はどうでしょうか？ - クレジットカードの読みもの

小結

プラグインを外すことで、読み込むファイルサイズが小さくなり、表示速度改善にいくぶん寄与する。
はてなスターであなたと交流できないのは痛い＞＜。
寂しくて切なくて仕方ないなら、プラグインを再度利用するのもあり。

読み手のUXをCSSで改善する案

CSSでカスタムする理由

はてなブログはデザインテーマのHTMLを編集できないので、CSSでカスタムせざるを得ない。

はてなブログのテーマはCSS編集でカスタム。HTML編集は部分的にしかできない - はぴらき合理化幻想

追加するCSSコードとその理由

読み手が記事を読む際に不要と思われる項目を非表示にした。また、分かりづらい部分には文字を追加した。

/*記事最後の著名,タイムスタンプ,スター用空白部分を非表示*/
.entry-footer-section,.hatena-star-container{display:none;}

/*ブックマークボタンに文字追加*/
.customized-footer a[href*="http://b.hatena.ne.jp/entry/"]:after{content:"\00A0はてなブックマークでコメントする";font-size:25px;}

/*proページへのリンク非表示*/
.id a[href*="http://blog.hatena.ne.jp/guide/pro"]{display:none;}