こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、基本的なmetaタグを分かりやすく解説します。
metaタグは表示にはあまり影響ありませんが、ページの設定に必ず必要なので、基本的なmetaタグを覚えよう！
metaタグとは？
meta（メタ）タグとは、headタグの中に入れるタグで、メタデータを指定することができます。
メタデータとは、ブラウザや検索ロボットにページの情報を知らせるためのデータになります。
メタデータがないと、検索ロボットが何のページなのか判断しにくく、ページの評価が下がってしまいます。
どんなページでもメタデータは必要になることを覚えておきましょう。
基本的なメタデータ
では早速、基本的なメタデータをご紹介します。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="xxxxx">
<meta name="keywords" content="xxxxx,xxxxx,xxxxx">順に説明します。
charset
charsetは、ページの文字コードを指定するもので、必須のメタデータになります。
ここでは「UTF-8」という文字コードを指定しています。
文字コードを指定しないと、文字化けしてしまう場合があります。
一昔前はいくつか種類がありましたが、最近はUTF-8一択なので、この形で必ず記述すると覚えてしまいましょう。
viewport
viewportは、スマホやタブレットで最適に表示させるためのメタデータになります。
PCだけであれば記述の必要はありませんが、スマホから見るユーザーが多いため、ほとんどの場合記述する必要があります。
contentに設定できる値はいくつかありますが、どれもGoogleの非推奨なので、できるかで上記の形で記述するようにしましょう。
description
descriptionは、ページの説明を記述します。
Google検索したときに表示される文言で、SEOにも影響するので、とても重要になります。
100〜120文字程度が良いとされているので、この文字数で何のページなのか分かる文言を入れましょう。
keywords
keywordsは、ページのキーワードを記述します。
ページが何のキーワードで検索されそうか考えると良いと思います。
ただ、このkeywordsは、ページの評価に影響しないとGoogleが発表していますので、最近ではkeywordsを入れないページもあります。
入れておいて損はないので、キーワード2〜3個入れて記述するようにしましょう。
OGPの設定
OGPとは「Open Graph Protocol」の略で、TwitterやFacebookなどのSNSでページがシェアされたときに、ページの情報を表示させることができるものです。
昨今、SNSを利用することはマストなため、必ず記述するようにしましょう。
OGPの設定には色々なプロパティがありますが、必須なものをご紹介します。
<meta property="og:type" content="website">
<meta property="og:title" content="xxxxx">
<meta property="og:description" content="xxxxx">
<meta property="og:url" content="このページのURL(絶対パス)">
<meta property="og:image" content="OGP画像のURL(絶対パス)">
<meta property="og:site_name" content="xxxxx">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@xxxxx">og:type
ページのタイプを記述します。
トップページの場合websiteかblog、下層ページはarticleになります。
og:title
ページのタイトルを記述します。
titleタグと同じもので問題ありません。
og:description
ページのdescriptionを記述します。
descriptionタグと同じもので問題ありません。
og:url
ページのURLを記述します。
SNS側は、ここに記述したURLの情報を表示させるため、実際のページのURLと違うと、思った通りの表示ができないので注意しましょう。
あと、必ず絶対パスで記述しましょう。
og:image
画像のパスを記述します。
SNSでシェアされたときに表示される画像で、ページのサムネイルになります。
人は文字より画像でどんな内容なのか判断するので、この画像はとても大事です。
og:site_name
ページではなく、サイト全体の名前を記述します。
twitter:card
Twitter用の記述で、og:image（ページのサムネイル）のサイズを指定します。
summaryと指定すると小さい画像で説明と横並びに表示され、summary_large_imageと指定すると大きい画像で上下に表示されます。
summary_large_imageの方が見やすく一般的かと思います。
twitter:site
Twitterアカウントのユーザー名を記述します。
必須ではありませんが、サイトと連携したTwitterアカウントがあれば記述しましょう。
headタグにprefixを記述する
OGPを設定する場合、headタグにprefixを記述する必要があります。
## トップページ
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#">
## 下層ページ
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">この記述の意味は、このページでOGPを使用することを宣言するための記述になります。
深いことは考えずに、必要なんだなと思って、記述するようにしましょう。
最後に
以上、metaタグについて解説しました。
metaタグは、ページ自体の表示には関係ないところですが、検索順位やSNSの表示に影響してくるところなので、しっかり設定するようにしましょう。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント