見出し画像

【HTML】HTMLのおまじないを紐解く

『HTMLを書くときの最初の記述』

なんだか呪文のような文章で、とりあえずおまじないとしてサンプルコードをそのまま書いておこう…… という場面もあるかもしれません。

今回は、あるHTMLファイルを例にとり、そこで指定されているさまざまな情報についてひとつずつ紐解いて見たいと思います。

※実際に使用する<>は半角英数文字です。ここでは、分かりやすいように全角<>を使用しています


HTML文書の例

<!DOCTYPE html>
<html>
  <head>
    <title>サイトタイトル</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="キーワード">
    <meta name="description" content="内容">
    <meta name="author" content="社名など">
    <!--sns-->
    <meta property="og:type" content="website">
    <meta property="og:description" content="キーワード">
    <meta property="og:title" content="タイトル">
    <meta property="og:image" content="og_img絶対パス">
    <meta property="og:url" content="サイトの絶対パス">
    <!--front-->
    <link href="../assets/css/common.css" rel="stylesheet">
    <script src="../assets/js/jquery-3.3.1.min.js"></script>
    <script src="../assets/js/common.js"></script>
  </head>
  <body>
    サイトの本文
  </body>
</html>

<!DOCTYPE html>

DOCTYPEは、その文書が、HTMLやXHTMLのどのバージョンで作成されているかを宣言するものです。
ここでは、HTML5で作成されたものであることを宣言しています。

<html>〜</html>

htmlタグは、HTML文書であることを示す際に使用します。
<html>〜</html>の直下には、<head>と <body>がそれぞれ一つづつ必要となります。

<head>〜</head>

headタグの中身では、htmlファイルの情報が宣言されています。
この内容は、普通webの画面上には表示されません。(一部、title要素など、ブラウザのタイトルバーに表示されるものもあります)。
headタグではヘッダ情報として、サーチエンジン向けのキーワードや説明、サイトのタイトル、スタイルシートやjsファイルなどを指定できます。
情報の中身について、以下で説明して行きます。

<title>サイトタイトル</title>

文書にタイトルをつける際に使用します。
一つの文書内で複数のtitleを指定することはできません。検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されます。

<meta charset="UTF-8">

文書の文字エンコーディングを指定する際に使用します。
日本語で作成されたページに英語版のブラウザでアクセスした場合など、文字化けが起きることがあるため、できるだけ指定したほうが良いでしょう。

<meta name="〜〜" content="〜〜">

検索エンジン向けのキーワード・説明・インデックスの指定です。

meta name="viewport" content="width=device-width, initial-scale=1.0"
ビューポート(viewport)とは、表示サイズのことです。
パソコン向けサイトをスマートフォンで表示した際に、文字などが小さすぎて閲覧しづらくなる問題の回避などに使われます。

meta name="keywords" content="キーワード,キーワード,キーワード"
そのHTML文書が、どのような内容を示したものかをキーワードで指定します。 複数のキーワードを指定する場合には、半角カンマ(,)区切りで指定します。

meta name="description" content="内容"
文書の説明を短文で指定します。 ここで指定する内容は、Googleの検索結果に表示されるなど、多くの検索エンジンで利用されます。

meta name="author" content="社名など"
文書の作者を示す際に指定します。

<meta property="og:〜〜" content="〜〜">

FacebookやTwitterなどSNSでシェアされたときに、タイトルやアイキャッチ画像を意図した通りに、正しく表示させるための設定です。

og:type
webページの種類を指定します。
主にウェブサイトのTOPページにはcontent="website"、下層の記事ページにはcontent="artcle"を指定します。

og:description
ページの説明を記述します。

og:title
og:titleにはページのタイトルを指定します。
og:titleにタイトルを設定すると、SNSなどでシェアされた際に、<title>〜〜</title>で指定したタイトルではなく、こちらが優先して表示されます。(設定しない場合は、<title>〜〜</title>が表示されます。 )

og:image
ページのサムネイルを指定することができます。
サムネイルは、シェアされたときなどに表示される画像のことです。画像の指定方法は絶対パスで行う必要があります。例えばFacebookでは、このサイズを1200px✕630pxにするように推奨しており、サイズを合わせると綺麗に表示されるため、覚えておくと良いでしょう。

og:url
ページのURLを指定します。
こちらもURLの指定は絶対パスで行う必要があります。他にもFacebook用設定に、"fb:app_id"というApp-ID(15文字の半角数字)を定めるものや、Twitterの設定"twitter:card"というTwitterカードの種類を定めるものもあります。

<link href="~~" rel="~~">

リンクする外部リソース(HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイル)を指定する際に使用します。
linkタグを指定する場合には、href属性とrel属性が必須です。hrefはファイルの場所を示します。relにはリンクタイプを指定します。よく使用されているのはstylesheetやalternateなどです。


上記以外にも、<head>〜</head>内にはファビコン(サイトのシンボルとして、ページに配置するアイコンの俗称)の設定や、WebClip(スマートフォンでホーム画面にリンクを追加した時に表示されるアイコン)、自動リンクの設定、ie対策、meta refreshによるリダイレクトの設定など、様々な指定をすることが可能です。
googleアナリティクスのコードなども<head>〜</head>内に記載します。

<body>〜</body>

文書の本体を表す際に使用します。
ブラウザ上に表示されるメインコンテンツです。この中に、見出し・段落・表・フォームなどの要素を配置します。

まとめ

これらはHTMLの文書に必要な要素でありSE0の基本でもあります。
きちんと意味を理解して、最適化していくことは非常に重要ですので、意識していきたいですね。

【参考】htmlリファレンス
http://www.htmq.com/html5/