はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

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

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

ビフォーアフター画像

はてなブログpro課金直後とカスタム後の当ブログのホームページキャプチャー画像だ。画像をクリックで別タブで大きな画像を確認できる。

ビフォー

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

アフター

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

比較用GIFアニメ

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

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

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

proに課金して可能なこと

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

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

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

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

独自ドメイン(はてなブログPro)にしたら変更したい6項目 - tarのブログるっ by @tarVolcano

小結

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

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

Zenback

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

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

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

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

はてなスター

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

小結

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

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

CSSでカスタムする理由

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

追加する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;
}

小結

  • HTML自体はソースに残るが、不要な項目を非表示にすることで読み手のUXが向上すると思われる。

独自ドメインも利用可能

筆者は予定なしだが、独自ドメインにするのもあり。セルフ・ブランディング志向なら一考に値する。

また、URLのスペリングでミスっていた場合には挽回のチャンス。

英語のつづりもしっかり直しました。実はとても気になっていました。恥ずかしくて顔から火が出てサーカス団にスカウトされるところでしたが、無事に装い新たになった感じですね。

私がはてなブログProに移行した3つの理由と、その恩恵。 - Hike×Hack

まとめ

はてなブログproに課金したばかりなので、他にもカスタムすべき点があるかもしれない。それは追って記事を作成する。

てすとてすと