アイキャッチキャプションのSEO効果
アイキャッチキャプションは、SEO効果があります!
アイキャッチキャプションは、HTML要素<figcaption>として、アイキャッチ画像のHTML要素<figure>の中に表示される仕様です。<figcaption>は「画像の説明文」という意味です。単に装飾的にテキストを置くのではなく、セマンティックに「この画像は何を示しているか」を伝えるための正しいタグ付けになり、Googleなどの検索エンジンは情報として認識します。
白文字のSEO効果
スキンなしのデフォルトの設定では、アイキャッチキャプションは白文字に濃灰色のグラデーション背景透過になっています。
白文字はSEO的にNGという話を聞いたことがありませんか？
Googleは「ユーザーに見えないテキストをSEO目的で入れること」を不正行為（ブラックハットSEO）としています。例えば、白背景に白文字を置いてユーザーには読めないが、検索エンジンにはキーワードを認識させようとするのは、ペナルティ対象です。
Cocoonのデフォルトの設定は大丈夫でしょうか？
実は、白文字でも背景画像の色が濃くて、ユーザーにちゃんと見えるならSEO的に問題ありません。Googleは「見えるテキストかどうか」をCSSレンダリングまでチェックするので、背景とのコントラストは重要です。「背景が明るいのに白文字でほぼ読めない」「意図的に読ませない」場合はSEOリスクになりますのでご注意を。
フォントサイズとSEO効果
Google推奨のフォントサイズは本文16pxです。読みやすさ、アクセシビリティの観点から推奨されています。
実際の表示は下記になります。
- フォント18px はこの表示サイズ
- フォント16px はこの表示サイズ
- フォント14px はこの表示サイズ
本文以外は14pxでも可読性があればOKという説もありますが、14pxですと小さく、読めない方も増えるかもしれません。
さて、Cocoonのスキンなしのデフォルトの設定では、アイキャッチキャプションのフォントサイズは、0.9em に指定されています。「em」は「親要素のフォントサイズを基準にした比率」の単位です。
1em = 親要素のフォントサイズ 0.9em = 親要素のフォントサイズの90%という意味です。
親要素のフォントサイズは、Cocoon設定＞全体＞サイトフォント＞文字サイズ で変更可能です。下記の例では18px、モバイルサイトフォントは16pxが選択されています。つまり、この時0.9emは 16px、モバイル端末では14px の表示になります。
アイキャッチキャプションを14pxで表示することで、検索順位が直接下がることはありませんが、「読みやすさ」に関わるUX評価として間接的な影響が出る可能性はあります。
安全にSEO効果を得るための工夫
実際にスマホでも文字が読めるかをユーザー視点で確認しましょう。
白文字を使うなら、必ず背景に透過の黒帯やシャドウを敷いて可読性を確保しましょう。
フォントサイズを小さくしすぎない（16px以上推奨）ようにしましょう。デフォルトの設定で小さい場合は、CSSでフォントサイズの調整が可能です。
CSS調整方法については別記事にまとめてありますのでご参考ください。
コメント