毎回忘れる記述必須のSEO対策を思いつくもの全部ピックアップ

220views

もう両手で数えられない(ぎり)くらいの量のWEBサイトを世に公開してきた、ゆひゃです。

あらゆるサイトでSEOについて考えます。SEOは単にこれさえやればというものではなく、パフォーマンス面やアクセサビリティ、HTML構造まであらゆる部分が関係しています。丁寧にSEO対策したサイトは、検索上位に上がりやすくなるわけです。

今回はそんなSEO対策を備忘録を兼ねてまとめていきます。

パフォーマンス面

サイトのパフォーマンスは、読み込み時間やサイトの見やすさに関係したSEO対策です。サイトのパフォーマンスが下がると、サイトの内容を見られることなくブラウザバックされやすくなったり、他のページにアクセスされにくくなってしまいます。

これは直帰率と回遊率と呼ばれています。ではパフォーマンス面を上げられるSEO対策をピックアップしていきます。

JSのEventListenerにpassive

これはJavaScriptでスクロールイベントやリサイズイベントを使ったときに{passive: true}を第3引数に追加することです。

const element = document.querySelector('.el')

element.addEventListener( 'scroll' , e => {
  ......
}, { passive: true } )

これです。これはコールバック関数にpreventDefault()が使われていないことを明記する引数です。これを使うだけでサイトが劇的に軽くなります。

Google Fontsをダウンロードする

このサイトでも利用させてもらっているGoogleFontsの「Noto Sans JP」。読み込み時間はdisplay:swap;を利用すれば気にならないのですが、スマホの性能によってスクロール時にレンダリングが間に合わず画面が一瞬ホワイトアウトすることがあります。

明確な原因はわからないのですが、使うフォントをダウンロードしてサーバーにアップロードして使うことで解決しました。

代替可能な画像はWebPに変更

Google激推しの画像形式のWebPは、PNGやJPEGよりも軽量です。Google的には全ての画像をWebPにしなよって感じっぽいですが、未だ少し使いにくさがありますので使える部分だけWebPに変更させてデータ通信量を減らします。

ローディング画面の追加

サイト内に画像や動画を多く使っているとどうしても最初のページロード時間が長くなってしまいます。訪問者は2秒以上何も表示されないと離脱してしまうと言われています。

サイト訪問直後にローディング画面を表示することで、訪問者は飽きを感じにくくなります。

サイトのブランドイメージの向上にも繋がるのでローディング画面は採用しておきたいですね。

アクセサビリティ面

アクセサビリティは、そのサイト内のリンクやサービスの使いやすさ、そもそもそのサイトにアクセスしやすいかなどが重要になってきます。

これは目の不自由な人や色覚障害を持っている人への配慮が十分かどうかも重要なチェック項目です。

imgタグに正確なalt属性が入っているか

多くのサイトではalt属性の使い方を間違えていると言われています。

そもそもimg属性にalt属性が使用されていないのは問題ですが、適当にその画像の名前をつけるだけでも問題があります。alt属性はその画像がなかった時、文章に影響与えないように文章化する必要があります。

例えば、お問い合わせの代わりにメールアイコンのような画像のみを使った場合、alt属性は「お問い合わせはこちら」などとするのが良いでしょう。

ここで間違えやすいのは、「お問い合わせ」という文字の前にメールアイコンを使っていた場合、alt属性は空文字にするべきです。もし「お問い合わせアイコン」と入れると文字読み上げで、「お問い合わせアイコンお問い合わせ」と読まれることになります。装飾目的の画像にはalt=""と指定しておきましょう。

iframeタグや画像リンクにはtitle属性を追加しておく

Google MapやTwitterのタイムラインをサイトに埋め込む機会は多いと思います。埋め込みにはiframeタグが使われていますが、このiframeにはtitle属性で埋め込み先リンクの軽い説明を追加しておきましょう。

また、リンクを画像で利用する場合もtitle属性にリンク先の情報を追加しておくと、マウスホバー時にリンク先の情報が表示されるのでアクセサビリティの向上に繋がります。

Faviconはあらゆる端末を想定する

サイトのアイコンであるFaviconは、お気に入り一覧やタブバーに表示されたりとそのサイトと一目でわかってもらえる効果があります。

FaviconはAppleやAndroid、デスクトップのブラウザで少し異なる場合があるので、全てを表示できるような状態にしておきます。

Favicon Generator」のサイトで一つのPNG画像から網羅されたファイルを出力してくれる上、SPA用のmanifestファイルも生成してくれるのでとても便利です。

OGPの設定

OGPとは、「Open Graph Protcol」というTwitterやLINE、Facebookでリンクを送った時に表示される画像やサイトタイトルの設定できる機能です。この有無で、TwitterなどのSNSでリンクを貼った時のアクセス率はかなり増減します。

OGPが正確に設定されているかは、「ラッコツールOGP確認」にて確認することができます。

まとめ

以上にまとめたことは全てユーザーが快適にWEBサイトを利用できるようにするための必須項目が多く含まれています。

ただ、最大のSEO対策は世に求められている情報をわかりやすくサイトにまとめることです。どんなに構造的にSEO対策をしたところで価値の弱い情報を載せているだけでは検索上位に上がることはないと、心に留めておきます。

カテゴリー