HTMLの基本構造

スポンサーリンク
HTMLHTML
スポンサーリンク

HTMLファイルの必要最低限の雛形!

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ページの説明">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

文字化けしないように<meta charset="UTF-8">で、UTF-8の文字エンコーディングで書くよという宣言をしておきましょう。

<meta name="description" content="...">でサイトの概要を説明します。SEOで重要なHTML要素になります。

モバイルに対応するため、<meta name=”viewport” …>を設定します。設定することでデバイスの幅に合わせたページのレンダリングが行われるようになります。

OGP(Open Graph Protocol)設定! 

OGP(Open Graph Protocol) は、SNSで、Webページがシェアされたときに表示される内容を設定します。

<head>内に入れておきます。

<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:type" content="ページの種類">
<meta property="og:url" content="ページurl">
<meta property="og:image" content="画像url">
<meta property="og:locale" content="ja_JP">

コメント

タイトルとURLをコピーしました