📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| (同じ利用者による、間の1版が非表示) | |||
| 136行目: | 136行目: | ||
== metaタグ == | == metaタグ == | ||
metaタグは、HTMLドキュメントに関するメタデータ (データについてのデータ) を定義するための要素である。<br> | |||
通常、head要素内に配置されて、ページの内容そのものは表示されないが、Webブラウザや検索エンジンに重要な情報を提供する。<br> | |||
<br> | |||
基本的な書式を以下に示す。<br> | |||
<syntaxhighlight lang="html"> | |||
<meta name="キー名" content="値"> | |||
<meta http-equiv="キー名" content="値"> | |||
<meta property="キー名" content="値"> | |||
</syntaxhighlight> | |||
<br> | |||
主な用途として、文字エンコーディングの指定がある。<br> | |||
<syntaxhighlight lang="html"> | |||
<meta charset="UTF-8"> | |||
</syntaxhighlight> | |||
<br> | |||
また、ページの自動リフレッシュやリダイレクトにも使用できる。<br> | |||
<syntaxhighlight lang="html"> | |||
<meta http-equiv="refresh" content="5;url=https://example.com"> | |||
</syntaxhighlight> | |||
<br> | |||
これらのmetaタグを適切に設定することにより、WebサイトのSEO対策、ソーシャルメディアでの表示制御、ブラウザの動作制御等、様々な目的を達成することができる。<br> | |||
<br> | |||
特に、name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。<br> | |||
これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br> | これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br> | ||
<br> | |||
SEOやスマートフォン対応では、適切なmetaタグの設定が非常に重要となる。<br> | |||
<br> | <br> | ||
<u>※注意</u><br> | <u>※注意</u><br> | ||
| 395行目: | 419行目: | ||
==== SNS最適化 (OGP) 設定 ==== | ==== SNS最適化 (OGP) 設定 ==== | ||
metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br> | metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br> | ||
<br> | |||
これらの設定は、Open Graph Protocol (OGP) と併用されることが多い。<br> | |||
Twitter Cardは、OGPの値もフォールバックとして使用する。<br> | |||
<br> | |||
設定後は、Twitter Card Validatorでプレビューを確認することができる。<br> | |||
<br> | <br> | ||
===== twitter:card ===== | ===== twitter:card ===== | ||
| 415行目: | 444行目: | ||
===== twitter:site ===== | ===== twitter:site ===== | ||
Twitterアカウントを指定する。<br> | Twitterアカウントを指定する。<br> | ||
アカウント名には、必ず<u>@</u>を付ける必要がある。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta name="twitter:site" content=" | <meta name="twitter:site" content="@YourSite"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
===== twitter:creator ===== | ===== twitter:creator ===== | ||
記事の著者のTwitterアカウントを指定する。<br> | |||
アカウント名には、必ず<u>@</u>を付ける必要がある。<br> | |||
<syntaxhighlight lang="html"> | |||
<meta name="twitter:creator" content="@Author"> | |||
</syntaxhighlight> | |||
<br> | |||
===== twitter:title ===== | |||
シェアされる時のタイトルを指定する。<br> | |||
40文字以内が推奨される。<br> | |||
<syntaxhighlight lang="html"> | |||
<meta name="twitter:title" content="タイトル"> | |||
</syntaxhighlight> | |||
<br> | |||
===== twitter:description ===== | |||
シェアされる記事の説明を指定する。<br> | |||
<syntaxhighlight lang="html"> | |||
<meta name="twitter:description" content="ページの説明"> | |||
</syntaxhighlight> | |||
<br> | |||
===== twitter:image ===== | |||
Twitterページの画像を指定する。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta name="twitter: | <meta name="twitter:image" content="https://example.com/image.jpg"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||