ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】タイトル文字数を投稿画面で表示!jQueryで全角カウントする方法

Google検索結果のタイトルは全角32文字表示

ブログ記事で最後まで悩むのがタイトルです。今回はタイトルの文字数を自動カウントしてくれる機能を共有します。WordPressの投稿画面のタイトル入力欄にツイッターより高度な文字数カウンターが現れます。

ブログ記事を書くことに慣れて余裕がでてきたら、タイトル文字数などもこだわりたくなってきます。そんな時にこの機能があると、入力したタイトル文字数を数える手間が省けますよ。

ゆめぴょん(@yume_pyon)です。こんちはっ!

タイトルの書き方については、いろんなブログで方法論が語られています。検索すればいくつも記事を見つけることができます。今回はタイトルの書き方ではなく文字数についてです。

ブログ記事のタイトルは何文字がベスト?

タイトルの文字数について、最近は大きく2つの考え方があるようです。

  1. Google検索で表示される、全角で約28文字以内(半角56文字くらい)
  2. ツイッター、Facebookでシェアされやすい、刺激的・説明調な長いタイトル

記事をアップして短期的には「2」のSNS(ソーシャルネットワーク)でのシェアが重要になってきます。Googleに好かれるようなキーワードを並べただけのタイトルはシェアされにくいです。

一方、持続的・中長期的には長すぎるタイトルでは、Google検索で表示されてもクリックされにくくなります。またタイトルを何度も変更するのも、SEO対策としては好ましくないと聞いたことがあります。

このような条件のもと、私が実践しているタイトルの文字数は「記事の内容を伝えきれるならタイトルは28文字以内。もっと効果的にできるなら40文字以内。キーワードは前半に!」です。次の記事も参考になります。

記事タイトルのベストな文字数は? 8943記事のデータから探ってみた | Web担当者Forum

タイトル文字数カウンターを設置する方法

WordPress投稿画面のタイトル文字数カウンター

WordPress投稿画面でのみ使える機能です。専用エディターで投稿している場合は、そもそもカウンターが付いていることが多いので不要でしょう。

今回のタイトル文字数カウンターの特徴

この文字数カウンターの一番の特徴は、全角・半角の文字数を区別してカウントできることです。全角を「1文字」、半角は「0.5文字」としてカウントします。日本語タイトルは全角でのカウントが必須です。

ツイッターは全角・半角の区別なしに140文字以内の投稿です。しかしGoogle検索結果では半角なら65文字くらいだけど、全角では32文字しか表示されません。なのでタイトルを作る時も全角・半角を区別する必要があります。

タイトル文字数カウンターの設置

まず「jQuery」の設置が必須です。ブラウザから自分のブログのソースを出して「jquery」を検索してください。見つからなければ、次のコードを</body>タグの直前などに追加してください。詳しい設置方法は下リンクを参考にしてください。

jQueryで簡単設置!ページ先頭,トップへ戻るボタンの高機能な設定方法jQueryで簡単設置!ページ先頭,トップへ戻るボタンの高機能な設定方法

ブログ画面の右下にページの先頭(トップ)へ戻るボタンを設置しました。フワッと現れ…

次にWordPressで最も重要なファイルの1つ「functions.php」への記述です。修正を加える前には必ずバックアップをとってください。そして問題が起こったらすぐに元に戻してください。修正は自己責任でお願いします。

下のPHPコードを「functions.php」の一番最後(?>の後)などにコピー&ペーストして保存するだけです。

JavaScriptの部分はPHPコードの外に記述する必要があります。このコードをfunctions.phpの途中にコピペする場合は、1行目と最終行の「?>」は不要になります。慣れてない人は一番最後をオススメします。

まとめ:今日のゆめぴょんの知恵

私はブログ記事を「sublime text2」というエディタで書いています。その理由は、プログラム、HTML、WordPressテーマなど、何を書く場合も1つに統一できて便利だからです。

文字数カウンターは付いていますが、全角・半角の区別はありません。カスタマイズ方法を知ってる人はぜひ教えてください。ただタイトルは投稿画面で考えることが多いので、今回の機能は重宝しています。

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】英語版を日本語化する4段階の設定方法!mo翻訳ファイル更新方法【WordPress】FacebookのOGPとTwitterCardsに固有タイトルを設定!プラグイン不要で:次記事»
ページ
↑先頭
ホーム