SEO対策等を基準にメタタグ等の要否をまとめる

SEO対策について調べていきます。調べた結果を元になるべく不要なものは記述しないhtmlソースを考えていきます。

不要な記述は管理・メンテナンスの観点から出来るだけ減らす方が良いと考えています。

htmlのlang属性は不要⇒設定します

今までhtmlタグにlang属性を付与することがありましたが、Googleでは見ていないとのことです。SEO対策としては意味がないため、現時点では不要とします。

⇒HTML5のチェックを下記で行ったところ、lang属性を入れることを検討してくださいとのWarningが出ます。SEO対策的にはあまり意味はありませんが、あまり手間ではないので設定するように変更しました。

▼参考にさせていただいたサイト
https://seopack.jp/seoblog/20161111-use-hreflang/

https://validator.w3.org/
※HTML5のチェック

prefixを設定する

head属性にprefixを設定します。prefixを設定すると、OGPを使用することを明示できます。

SEO対策に直接関係はありませんが、SNSにてシェアされたときにサイトやページの情報を正しく渡すことができます。そうすると、整理されたタイトルや説明文、画像などを表示してもらえます。
その結果、シェアしていただいた先からのアクセスが増え、SEO対策に繋がります。

▼参考にさせていただいたサイト
http://millkeyweb.com/facebook-ogp/

OGPを設定する

prefixとあわせてogpを設定します。理由はprefixと同じです。

canonicalを設定する

内容が重複しているページがある場合、本体の(正規)URLがどれかを指定できます。全く同じページだけどURLが異なる、内容は異なるけど本体(親)はこのページなどのときにURLを1つ絞り検索エンジンに伝えることができます。

設定しない場合、同じページが存在する、SEO対策として評価が分散されるなどデメリットがあります。指定するURL自身のページも含めなるべく設定しておく方が無難だと思います。WPは基本的には標準で設定されます。

no-cacheは設定しない

今まではキャッシュ対策として、html4の形で no-cache を設定していました。そもそもhtml5の書き方ではなく誤った記述をしていました。

また、html5で設定したとしても現時点では不確実かつ廃止予定とのことで、html内でのキャッシュ対策は設定不要と判断しました。

代わりに、htaccessでの設定等を行うようにします。

▼参考にさせていただいたサイト
https://qiita.com/hidekuro/items/dea83ebdf73e2f2277ae

metaタグのkeywordsは設定しない

Googleさんの Search Console ヘルプ(下記参考サイト)の『Google がサポートしているメタタグ』を見ると、「keywords」がありません。よって、SEO対策に意味がないので、設定不要とします。

キーワード自体は考える必要があります。ただ、それをメタタグで設定する必要はなく、コンテンツに適したボリュームで散りばめることがSEO対策となります。

▼参考にさせていただいたサイト
https://support.google.com/webmasters/answer/79812?hl=ja

X-UA-Compatibleは念のため設定

IE11より古いバージョンはサポートが終了となっているので、そこまで気にしなくて良いように思います。ただIEで見る際に最新バージョンの表示モードで表示されるよう、念のため設定しておきます。

▼参考にさせていただいたサイト
https://qiita.com/rico/items/09c896290e218ed2b7c3

iconの設定

SEO対策に直接的には関わってきませんが、ブラウザのタブ部分、お気に入り、ブックマークなど様々な箇所でアイコンが表示されます。大きな見栄えではありませんが、他のサイトと差別化を図ることもできますし、文字だけではなく形としても覚えてもらう助けになりますので、設定します。

また、スマホのホーム画面に表示される画像や、Windowsのタイル画像を設定することもできます。ウェブサイトやブログの場合、ブラウザ上でブックマークやお気に入りにするため、あまり重要視されないかもしれません。
サイト・ブログのターゲットや提供するサービスによっては設定が必要になるかと思います。

jsファイルの読込は最後に

基本的には</body>直前に記述しています。理由はページの表示スピードを少しでも早くするためです。

読込が遅いと訪れてくださったユーザーさんのストレスになります。そうすると、離脱する可能性が高くなります。ユーザビリティを改善し離脱を防ぐ対策になります。

cssファイルの読込について

大きなcssファイルなどですと、ファーストビューに必要な箇所のみ head 内に記載して、それ以外は後で読み込むようにすると、ページスピードが速くなります。

サイトのレイアウト調整レベルのCSSであればそこまで深刻に考える必要はないように思いますので、head内に設定します。

ただし、プラグイン等で外部の大きなcssを読み込む場合などはbody内の適した箇所もしくは</body>直前にCSS読込を記述することを検討します。

HTMLの枠組みのテンプレート

https://lucklog.info/copy-head/