はじめに
メタタグの設定って考えたことありますか？
コンテンツの見た目や動きに意識が行ってしまって、メタタグは初期設定のままとかあると思います！
今回はそんなメタタグに焦点をあてて、解説しました！
動画で確認したい方はこちらをどうぞ！
【YouTube動画】 改めて勉強する HTMLのMetaタグの世界。
必須項目
有無を言わさず設定をした方が良い項目を紹介します！
メタタグ以外も含まれています。
デフォルトの言語
まず、メタタグではないですが... 言語の設定はしましょう！
<html lang='ja'>
titleタグ
検索結果で表示される部分なので、設定しておきましょう！
<title>Yassun</title>
keywords
検索でヒットするかどうか変わってくるので、設定しておきましょう!
<meta name='keywords' content='Yassun, YouTube'>
description
検索した時にタイトルの下に表示される項目です。
サイトの説明を書きます！
<meta name='description' content='ほげほげー'>
charset
charsetは文字化けしないように、utf-8を設定しておきましょう！
<meta charset='utf-8'>
viewport
デバイスの大きさが変化しても、正しく表示されるようにviewportを設定しておきましょう！
CSSのメディアクエリと組み合わせると、より柔軟に表示を変えることができます。
<meta name='viewport' content='width=device-width, initialscale=1'>
OGP
OGPはリンクを貼った時にタイトル、画像、概要を表示するための規格です！
↓こんな感じです。
Twitterや他のサイトでも同じように表示してもらうためには、リンク元のサイトでOGPを設定する必要があります。
ちなみにQiitaでは以下のように設定されています (検証ツールで見れます)。
自分のサイトでの設定方法
メタタグを追加するだけなので、簡単です！
例えば以下のように設定します。
コンテンツタイプはウェブサイトならwebsite, 記事なら articleなどと設定します。
Qiitaはarticleを設定してますね。
<meta property='og:type' content='<コンテンツタイプ>'>
<meta property='og:title' content='<タイトル>'>
<meta property='og:description' content='<概要>'>
<meta property='og:url' content='<サイトURL>'>
<meta property='og:image' content='<画像URL>'>
<meta property='og:title' content='<タイトル>'>
ただ、twitterで表示するときは特殊で、別途以下のように設定する必要があります。
cardの表示形式はcard_image, summary, playerなどがあります。
Qiitaはsummary_large_imageを使ってますね。
<meta name='twitter:card' content='<cardの表示形式>'>
<meta name='twitter:site' content='<twitterのアカウント名>'>
OGP Checker
実際の設定後の確認はOGP Checkerを使います。
Facebookの場合は以下
https://developers.facebook.com/tools/debug/
Twitterの場合は以下で確認できます。
https://cards-dev.twitter.com/validator
必須ではないけど、他にもメタタグあるよ！
その他にも電話番号を自動認識するためのメタタグ
<meta name='format-detection' content='telephone=no'>
アンドロイドで見た時にテーマカラーを指定できるメタタグ
<meta name='theme-color' content='#FFFFFF'>
などがあります。
動画では、もう少し例を出しているので、気になった方は動画も確認していただけると嬉しいです！
【YouTube動画】 改めて勉強する HTMLのMetaタグの世界。
まとめ
今回は無視しがちなメタタグについて紹介しました！
ぜひ、Bodyタグ内だけでなく、メタタグのことも気にかけていただけると嬉しいです！