こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、head内に入れるmetaタグのテンプレート2022年決定版です。
metaタグは調べたらキリがないくらい色々とありますが、これさえ入れておけばとりあえず問題ないというタグをご紹介します。
metaタグとは？
meta（メタ）タグとは、headタグの中に入れるタグで、メタデータを指定することができます。
メタデータとは、ブラウザや検索ロボットにページの情報を知らせるためのデータになります。
メタデータがないと、検索ロボットが何のページなのか判断しにくく、ページの評価が下がってしまいます。
どんなページでもメタデータは必要になることを覚えておきましょう。
2022年決定版
決定版と言っても個人的なものになります。
最低限これさえ入れておけばとりあえず問題ないというタグをご紹介します。
<!DOCTYPE html>
<html lang="ja">
<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#"> ←トップページ以外はこちらを記述
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分かりやすいページ名｜タイトル名｜サイト名</title>
<meta name="description" content="xxxxx">
<meta name="keywords" content="xxxxx,xxxxx,xxxxx">
<meta property="og:type" content="website"> ←トップページはこちらを記述
<meta property="og:type" content="article"> ←トップページ以外はこちらを記述
<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">
<link rel="icon" href="xxxxx/favicon.ico">
<link rel="stylesheet" href="xxxxx.css">
<script src="xxxxx.js></script>
</head>
1つずつ解説します。
head prefix
ogpを使用するための宣言のようなものです。
トップページと下層ページで記述が異なるので注意しましょう。
charset
ページの文字コードを指定します。
特別理由がなければUTF-8にしましょう。
http-equiv
IEで見てもedgeで閲覧できるための記述です。
必須ではないがあった方がいいです。
viewport
レスポンシブサイトの場合に記述します。
description
ページの説明文です。
120文字程度でページの内容が分かりやすい文章を記述しましょう。
keywords
ページのキーワードです。
キーワードはSEOに影響しないと、googleが発表していますが、念のため記述しましょう。
2〜3個程度で、全ページ同じキーワードで問題ないです。
og:type
ogタグは、TwitterやFacebookなどのSNSのための記述です。
SNSはこのタグをタイムライン上に表示させます。
og:typeは、トップページと下層ページで記述が異なるので注意しましょう。
og:title / og:description
titleタグとdescriptionタグと同じ内容を記述しましょう。
og:url
ページのURLを記述します。
そのページのURLを入れないで、違うURLを入れてしまうと、間違えたページの情報をシェアしてしまうことになるので注意しましょう。
og:image
ページのサムネイル画像を記述します。
文章より画像を見てどんなページかなのか判断することが多いので、分かりやすいサムネイル画像を制作して指定しましょう。
og:site_name
その名の通りサイト名を記述します。
全ページ同じ記述になります。
twitter:card
Twitterのタイムラインに表示される画像サイズを指定できます。
summary_large_imageが、よく見るサイズでおすすめです。
twitter:site
Twitterのアカウント名を記述します。
favicon
タブに表示される小さいアイコンのことです。
なくても問題ありませんが、簡単に表示させることができるので、指定しましょう。
css / js
cssとjsの読み込みを記述します。
cssは大体この位置に記述しますが、jsは</body>直前に記述した方が良いものもあります。
最後に
以上、head内に入れるmetaタグのテンプレート2022年決定版をご紹介しました。
他にも色々なタグがありますが、とりあえずこれさえ入れておけば問題ないはずです。
テンプレートとして、他に必要なタグがあれば追記していきましょう。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント