はじめに
Googleのコーディング面接で使えるかもしれないKosarajuと ...──Googleで検索すると、このような検索結果がQiitaの記事に表示された。KosarajuとTarjanの両方のキーワードがタイトルとして出て欲しいのに、片方しか出ないことに引っかかった。
誰でもたった1分で1万円の現金をラクラクGET！ - 消費者庁──Googleで検索すると、このような検索結果が表示されることを、ITmediaは記事で公表した。消費者庁が詐欺的なページを公開しているかのようにも見えるということだ。
ITmediaは、Webページのタイトルを生成する新しいシステムを導入したのが原因としたが本当だろうか？ページ内で目立つコンテンツなどを考慮したページタイトルを自動生成するというものだ。
ページタイトルの自動生成？
「誰でもたった１分で１万円の現金をラクラクＧＥＴ！」などとうたい多額の金銭を支払わせる事業者に関する注意喚起
PDFファイルのタイトルが誰でもたった1分で1万円の現金をラクラクGET！ - 消費者庁に変わったのは、「」の中を取って英数字を半角にして後ろにハイフンとドメイン名を付けたものだと思う。
「」の中を取っただけでページタイトルの自動生成とまでは言えないと思う。
ワイ「Googleのコーディング面接で使えるかもしれないKosarajuとTarjanアルゴリズムを教えて？」
Qiitaの記事のタイトルがGoogleのコーディング面接で使えるかもしれないKosarajuと ...に変わったのは、「」の中を取ってからタイトルの長さを短くして省略記号...を付けたものだと思う。
Googleは長いタイトルを省略する
Googleが検索結果に表示するSEOタイトルのピクセル数には制限がある（現在は580ピクセル）
このような解説がAuthorityLabsにあった。
そこでタイトルのピクセル数を調べるJavaScriptの関数を作ってみた。
タイトルのピクセル数を調べるJavaScript関数
var get_text_width = (text) => {
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '20px Times';
return ctx.measureText(text).width;
};
var check_title = (text) => {
var text_width = get_text_width(text);
var judge;
if (text_width <= 580) {
judge = 'OK';
} else {
judge = '長すぎる';
}
console.log(judge, Number(text_width.toFixed(1)), '"' + text + '"', text.length + '文字');
};
フォントの種類を変えるとピクセル数が変動する。Timesにしたが、Googleがどのフォントを基準にしてピクセル数を計測するか分からなかった。
タイトルのピクセル数を調査
この関数でQiitaの記事のタイトルのピクセル数を調べた。
長すぎる 801.9 "Googleのコーディング面接で使えるかもしれないKosarajuとTarjanアルゴリズムを教えて？" 51文字
長すぎる 581.9 "Googleのコーディング面接で使えるかもしれないKosarajuとTarjan" 40文字
OK 531.1 "Googleのコーディング面接で使えるかもしれないKosarajuと" 34文字
Googleのコーディング面接で使えるかもしれないKosarajuとまでタイトルの長さを減らすと580ピクセルに収まった。これに省略記号...を付けるとGoogleの検索結果で表示されるタイトルになる。
さいごに
Goolgeの検索結果でQiitaの記事のタイトル長が短かったことに引っかかった。JavaScriptの関数を作ってSEOタイトルとピクセル数を調べた。
Googleの検索結果で表示されるタイトルについて次のように考えた。
- 580ピクセルに収まるようにタイトルの長さを短くして省略記号...を付ける。
- タイトルの長さを短くするために「」の中を取る。
Qiitaの記事でもSEOを考えて580ピクセル（全角で29文字）に収まるタイトルにするのがいいと思う。