メタタグ完全ガイド：ゆるふわ解説とコピペOKスニペット集｜ひろブロ

こんにちは、みなさん！今日はメタタグについてお話しします。「メタタグって何？」って思った人、大丈夫です！私も最初は「メタ…米田？」って感じでした（笑）

でも心配しないでください。この記事を読めば、あなたもメタタグマスターに！

…まぁ、見習い程度にはなれるはずです😉

クリックできる目次

まずは結論！コピペOKなメタタグスニペット
メタタグって何よ？
主要なメタタグを見ていこう！
最後に

まずは結論！コピペOKなメタタグスニペット

お急ぎの方は、こちらをコピペしてください！

各行に丁寧なコメントを付けたので、初心者の方もバッチリです！

詳しい説明は後で読んでね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- 文字コードの指定や。日本語使うんやったらUTF-8一択やで！ -->
    <meta charset="UTF-8">
    
    <!-- スマホ対応に絶対必要やで！ビューポートの設定や -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- ページのタイトルや。検索結果に出るから、かっこよくせなあかんで！ -->
    <title>ページのタイトル | サイト名</title>
    
    <!-- ページの説明文や。これも検索結果に出ることあるから、気ぃつけてな -->
    <meta name="description" content="ページの簡潔な説明を160文字以内で書くねん。ユーザーの心わしづかみにする魅力的な文章にせなあかんで！">
    
    <!-- 検索エンジンにページの扱い方教えるんや -->
    <meta name="robots" content="index, follow">
    
    <!-- ここからはOGP（Open Graph Protocol）の設定やで -->
    <!-- OGPは、SNSでシェアされた時にきれいに表示するためのもんや -->
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:description" content="OGP用のページ説明文">
    <meta property="og:type" content="website">
    <meta property="og:url" content="ページのURL">
    <meta property="og:image" content="OGP用画像のURL">
    
    <!-- ここからはTwitterカードの設定や -->
    <!-- Twitterでシェアされたときの目立つ表示用やで！ -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@Twitterアカウント名">
    <meta name="twitter:title" content="ページのタイトル">
    <meta name="twitter:description" content="Twitter用のページ説明文">
    <meta name="twitter:image" content="Twitter Card用画像のURL">
</head>
<body>
    <!-- ここにページの中身書くねん！がんばりや！ -->
</body>
</html>

こちらはコメントなしの上級者向けです。

    <title>ページのタイトル | サイト名</title>
    <meta name="description" content="ページの簡潔な説明を.....もう書かんでもわかるわな！">
    <meta name="robots" content="index, follow">
    
    <!-- OGP設定 -->
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:description" content="OGP用のページ説明文">
    <meta property="og:type" content="website">
    <meta property="og:url" content="ページのURL">
    <meta property="og:image" content="OGP用画像のURL">
    
    <!-- Twitter Card設定 -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@Twitterアカウント名">
    <meta name="twitter:title" content="ページのタイトル">
    <meta name="twitter:description" content="Twitter用のページ説明文">
    <meta name="twitter:image" content="Twitter Card用画像のURL">

はい、これさえあれば大丈夫！…なんて言えたらいいんですけどね（汗）
じゃあ、ゆるっと解説していきましょう！

メタタグって何よ？

メタタグは、HTMLの<head>タグの中に書く特別なタグです。ページの内容を人間じゃなくて、検索エンジンやSNSに教えてあげるためのものです。

つまり、「このページはこんな内容だよ〜」って、GoogleさんやTwitterさんに囁きかけるようなものです。ロマンチック…かな？

主要なメタタグを見ていこう！

1. titleタグ

<title>ページのタイトル | サイト名</title>

これ、厳密にはメタタグじゃないんですけど、めっちゃ大事！検索結果に出てくるアレです。
人間の目に触れるから、SEOも大事だけど、クリックしたくなる魅力的なタイトルにしましょう。

私のオススメは「〇〇のカリスマ解説！初心者でもわかる△△講座」みたいな感じです（笑）

2. meta description

<meta name="description" content="ページの簡潔な説明を160文字以内で書くねん。ユーザーの心わしづかみにする魅力的な文章にせなあかんで！">

これも検索結果に出てくるやつです。タイトルの下に出てくる説明文ってやつですね。
「絶対に160文字以内！」…って厳しく言われてた時代もありましたが、今はもうちょっとゆるいです。でも、長すぎると切れちゃうので注意！

3. meta robots

<meta name="robots" content="index, follow">

これは検索エンジンのクローラーさんに指示を出すタグです。
「index」はこのページを検索結果に載せてね、「follow」はリンク先のページも見てね、って意味です。

逆に「noindex, nofollow」にすると、「このページは秘密だよ！見ちゃダメ！」って感じになります。こっそり隠したいページがあればどうぞ（笑）

4. viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これ、スマホ対応に超重要！
「スマホの画面サイズに合わせて表示してね」っていう指示です。これがないと、スマホでめっちゃ小さく表示されちゃいます。

5. charset

<meta charset="UTF-8">

文字化けを防ぐやつです。日本語使うなら「UTF-8」一択です！

6. OGPタグ

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="OGP用のページ説明文">
<meta property="og:type" content="website">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="OGP用画像のURL">

これはSNSでシェアされた時に、きれいに表示するためのタグです。
特にog:imageは大事！シェア映えする画像を設定しましょう。
猫の画像とか…（あ、関係ない画像はダメですよ！）

7. Twitter Card

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitterアカウント名">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="Twitter用のページ説明文">
<meta name="twitter:image" content="Twitter Card用画像のURL">

これはTwitter専用のOGPみたいなものです。
summary_large_imageにすると、大きい画像付きでツイートに表示されます。目立つぜ！