タイトルはクリック率に直結する部分なので、検索からの流入を増やしたいなら必ず意識したいポイントです…ってブログとかWebサイトを運用してる人なら常識ですよね。

今回はそれを補助する機能を作ってみたので、興味のある方は使ってみてください。

タイトル文字数カウント for ブロックエディタ

クラシックエディタの頃は色々公開されていたので困らなかったんですが、ブロックエディタに対応したコードを公開している人が見当たらなかったんですよ…仕方ないのでなんとか自力で作りましたが、動かなかったらごめんね。

使い方ですが、下記のコードをfunction.phpの中に貼り付けて保存すればブロックエディタのタイトル左上に現在の文字数が表示されるようになります。

// タイトル文字数カウント
function title_count_js(){
echo '
<script>
let pc_title = 28;
let sp_title = 34;
jQuery(function($){
	function tc(){
		let title_count = 0;
		let str = $(".wp-block-post-title").text().replace(/\s/g, "");
		for (let i = 0; i < str.length; i++) {
			(str[i].match(/[ -~]/)) ? title_count += 0.5 : title_count += 1;
		}
		if(title_count >= sp_title){
			$(".wp-block-post-title").css("background","#FFEBEE");
		}else if(title_count >= pc_title){
			$(".wp-block-post-title").css("background","#FFF8E1");
		}else{
			$(".wp-block-post-title").css("background","#FFF");
		}
		$(".edit-post-visual-editor__post-title-wrapper > span").text(title_count);
	}
	$(window).on("load",function(){
		$(".edit-post-visual-editor__post-title-wrapper").append("<span>0</span>");
		tc();
	})
	$(document).on("keyup",".wp-block-post-title",function(){
		tc();
	})
});
</script>';
}
add_action( 'admin_head-post.php', 'title_count_js');
add_action( 'admin_head-post-new.php', 'title_count_js');

あ、見ての通りjQueryを使っているので、jQueryを読み込んでいない環境だと動きません。

動作画面

全角文字は1文字、半角文字は0.5文字としてカウントするようになっています。

環境によっては動かないかもしれないですが、Leo_8192の環境では動いているからヨシ！

カスタマイズ

先ほどのコードの下記の部分↓

let pc_title = 28;
let sp_title = 34;

これはGoogleで省略されない文字数の目安です。PC検索で省略されない28文字を超えたら背景が黄色、スマホ検索で省略されない34文字を超えたら背景が赤色になるようにしてみました。ここはお好みで文字数を変えてもいいですし、要らないよ！って人はスクリプト部分をごっそりカットしてOKです。

背景変化の機能を削除したVerはこちら↓

// タイトル文字数カウント
function title_count_js(){
echo '
<script>
jQuery(function($){
	function tc(){
		let title_count = 0;
		let str = $(".wp-block-post-title").text().replace(/\s/g, "");
		for (let i = 0; i < str.length; i++) {
			(str[i].match(/[ -~]/)) ? title_count += 0.5 : title_count += 1;
		}
		$(".edit-post-visual-editor__post-title-wrapper > span").text(title_count);
	}
	$(window).on("load",function(){
		$(".edit-post-visual-editor__post-title-wrapper").append("<span>0</span>");
		tc();
	})
	$(document).on("keyup",".wp-block-post-title",function(){
		tc();
	})
});
</script>';
}
add_action( 'admin_head-post.php', 'title_count_js');
add_action( 'admin_head-post-new.php', 'title_count_js');

最後に

タイトルの文字数は検索順位の向上にはあまり関係ない部分だし、文字数を意識するあまり重要なキーワードを削ってしまっては本末転倒なので、SEOを意識するならそこらへんは注意しましょう。

ただ、重要なキーワードは省略されない文字数内に収めておくというのはクリック率にかなり影響するテクニックなので、その際の補助になれば幸いです。