Google検索のタイトルリンクはデバイス幅に応じて切り取られる

[レベル: 初級]

Google の検索結果に表示されるタイトルリンクは、デバイスのスクリーンの幅に応じて切り取られることがあります。

デバイス幅による切り取りをドキュメントに追加

デバイス幅に応じてタイトルリンクが切り取られる場合があることを、タイトルリンク解説のドキュメントに Google は追加しました。

Best practices for influencing title links(タイトルリンクに影響を与えるおすすめの方法)のセクションに次の記述が以前にありました。

Also avoid unnecessarily long or verbose text in your <title> elements, which is likely to be cut short when it shows up in search results.

現在は次のようになっています。

Also avoid unnecessarily long or verbose text in your <title> elements. While there’s no limit on how long a <title> element can be, the title link is truncated in Google Search results as needed, typically to fit the device width.

以前の記述の日本語訳です。

また、<title> 要素には不必要に長いものや無駄な情報が含まれるものも避けてください。検索結果にタイトルが表示されたときに、短くカットされてしまうことがあります。

この記事を書いている時点では日本語ドキュメントには更新はまだ入っていないので、僕による更新後の日本語訳です。

また、<title> 要素には不必要に長いものや無駄な情報が含まれるものも避けてください。<title> 要素がどのくらい長くなるかに関しては制限はありませんが、たいていはデバイス幅に収まるように、必要に応じて検索結果ではタイトルリンクは切り取られます。

更新後のドキュメントでは、<title> タグが省略されてタイトルリンクとして表示される典型的なパターンとして、デバイスのスクリーン幅に具体的に言及するようになりました。

モバイル検索のほうがタイトルリンクが(断然)長い

モバイル検索と PC 検索でタイトルリンクの文字数に違いが出るのは今に始まったことではありません。
認識している人も多いはずです。

こちらはモバイル検索結果です。
<title> タグのすべてがタイトルリンクに用いられています。

省略されていないタイトルリンク

異なる解像度のデバイスでのモバイル検索結果です。
クエリは同じです。
<title> タグの半分くらいで切り取られています。

省略されたタイトルリンク

こちらは PC 検索結果です。
<title> タグはさらに多くが省略されています。

省略されたタイトルリンク

モバイル検索では最大で半角 100 文字程度(全角 50 文字程度)まで表示されています。
一方 PC 検索では最大で半角 50 文字程度(全角 25 文字程度)まで表示されていました。

PC 検索はモバイル検索の約半分です。
スマホの方がスクリーン幅は短いのですが、折り返してタイトルリンクを表示するので多くの文字が使われます。
もっとも、スマホであっても解像度によっては切り取られる文字数は増加します。

サイトにアクセスするデバイスタイプも考慮して title タグを決める

自分のサイトに訪問するユーザーが利用しているデバイス、もっと言えばスクリーンの解像度も考慮に入れて、<title> タグを決めたいものです。

スマホユーザーが多いのであれば、長めにできます。
特に、ハイエンドのスマホを使っているユーザーが多いテック系のサイトであればより長くできるかもしれません。
かといって、長くしすぎると書き換えが発生するので注意が必要です。

逆に、PC ユーザーが今でも多いのであれば、短めにしたほうがいいでしょう。

<title> タグよりも <h> タグがタイトルリンクに使われやすくなっている現状を踏まえると、<h> タグ(特に <h1> タグ)の長さにも気を配ったほうがよさそうです。