【HTML/CSS/PHP講座②まとめ】HTMLの基本構造・metaタグをゼロから学びました

PR

HTMLの基本、metaタグって???

metaとは「属性」のことです。

metaタグは、そのサイトに関する様々な情報(属性)を指定するためのタグのこと。様々な情報には、文書の文字コードや文書の概要、キーワードなどの文書に関する情報、等があります。

 

head部分内にメタタグを書いていきます

<head> と </head> の間に「metaタグ」を書いていきます。
※ head のエリア内に書いた「宣言(属性)」は、ブラウザ上には表示されません。

今回書いたのは、以下のようなタグでした。

1<!DOCTYPE html>
2<html lang=”ja” prefix=”og: http://ogp.me/ns#”>
3 <head>
4   <meta charset=”UTF=8″>
5   <meta name=”viewport” content=”width=divice-width, initial-scale=1″>
6   <meta name=”description” content=”ここにページの説明を書く”>
7   <title>タイトルを書きます</title>
8   <link rel=”icon” href=”画像のURLを指定”>
9      <link rel=”apple-touch-icon” href=”画像のURLを指定”>
10     <link rel=”stylessheet” href=“ファイルのURLを指定”>
11     <meta property=”og:title” content=”ページのタイトル”>
12     <meta property=”og:type” content=“ページのタイプ(website or blog or article)”>
13  <meta property=”og:url” content=”ページのURL”>
14     <meta property=”og:image” content=”サムネイル画像のURL”>
15     <meta property=”og:site_name” content=”サイト名”>
16     <meta property=”og:description” content=”ページのディスクリプション”>
17     <meta property=”fb:app_id” content=”App ID”>
18     <meta property=”article:publisher” content=”FacebookページのURL”>
19     <meta name=”twitter:card” content=”Twitterカードの種類”>
20     <meta name=”twitter:site” content=”@Twitter”>
21     <meta name=”twitter:title” content=”ページのタイトル”>
22     <meta name=”twitter:url” content=”ページのURL”>
23     <meta name=”twitter:description” content=”ページのディスクリプション”>
24     <meta name=”twitter:image” content=”サムネイル画像のURL”>
25   </head>
26   <body>

27   </body>

28 </html>

 

タグの解説

1<!DOCTYPE html>

「htmlのバージョン5で書きます!」という最初の宣言です。

2<html lang=”ja” prefix=”og: http://ogp.me/ns#”>

「htmlで書きます!」「日本語で書きます!」「OGPを使います!」という宣言です。

3 <head>

ここから各種宣言文を書きます。

tabキーでひとつ下げると後で見やすくなります。ここでの注意は、スペースで下げてはいけないということです!!

4    <meta charset=”UTF=8″>

UTF-8というコード(文字のコード)で書く!という宣言です。

5    <meta name=”viewport” content=”width=divice-width, initial-scale=1″>

これはスマホ対応の表示方法を指定するタグです。

”viewport”とは「見え方」のことで、そのデバイスの横幅「width=divice-width」に合わせる、という意味になります。

その他のコード例としては「user-scarable=yes maximum-scale=2.0(拡大は最大2倍)」「minimum-scale=1.0(縮小はしない)」など。

「initial-scale=1」 とは?iphoneでいう「ピンチアウト※」していない状態で立ち上げる、という意味です。(※「ピンチアウト」=指2本で画面を拡大すること。)

6   <meta name=”description” content=”ここにページの説明を書く”>

google 検索で表示される説明文を「ここにページの説明を書く」の部分に入れます。グーグル仕様変更により変わりますが、120文字位が良いそうです。

7  <title>タイトルを書きます</title>

「タイトルを書きます」の左右ににダブルクォーテーションが不要なのは、カッコの外にあるからです!

この「タイトルを書きます」の部分は、Google検索したときのタイトルやブラウザの上タブのタイトルとなる。文字数32文字までが適当です。

8   <link rel=”icon” href=”画像のURLを指定”>

URL先のアイコンをリンクさせよという指示です。このアイコンは、ブラウザの上タブ左にある画像「ファビコン※」になります。(※Webサイトのシンボルマークのこと。)

9  <link rel=”apple-touch-icon” href=”画像のURLを指定”>

iPhoneでWebページのブックマークとして「ホーム画面に追加」したときに出るアイコン画像を指定する命令です。ここで特に指定していないときは最近見たページがアイコンになります。

10 <link rel=”stylessheet” href=“ファイルのURLを指定”>

スタイルシートのファイルはここを見よ、という指定をしてデザインを読み混む指示をします。(PHP)

11行から24行までは次で解説します→ OGPタグについて

25   </head> → head部分終了
26   <body> → body部分スタート・・・Webサイトに表示される部分はこの中に書く。

27   </body> → body部分終了

28 </html> → html終了

OGPタグについて

OGPタグの基本形

OGPとは「Open Graph protocol」の略称。

FacebookやTwitterなどのSNSでシェアされた際に、そのWebページのタイトル・URL・概要・アイキャッチ画像(サムネイル)を意図した通りに正しく表示させるために設定するタグです。

SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定でしょう。

以下がOGPタグの基本形です。最初に書いた全28行のうちの、11行目~24行目の部分です。ここは暗記する必要はなく、定型をコピペして使ってOKとのことです。

11     <meta property=”og:title” content=”ページのタイトル”>
12     <meta property=”og:type” content=“ページのタイプ(website or blog or article)”>
13  <meta property=”og:url” content=”ページのURL”>
14     <meta property=”og:image” content=”サムネイル画像のURL”>
15     <meta property=”og:site_name” content=”サイト名”>
16     <meta property=”og:description” content=”ページのディスクリプション”>
17     <meta property=”fb:app_id” content=”App ID”>
18     <meta property=”article:publisher” content=”FacebookページのURL”>
19     <meta name=”twitter:card” content=”Twitterカードの種類”>
20     <meta name=”twitter:site” content=”@Twitter”>
21     <meta name=”twitter:title” content=”ページのタイトル”>
22     <meta name=”twitter:url” content=”ページのURL”>
23     <meta name=”twitter:description” content=”ページのディスクリプション”>
24     <meta name=”twitter:image” content=”サムネイル画像のURL”>

上記で言うと、11~16行目が基本のOGPタグ、17~18行目がFacebookのOGPタグ、19~24行目がtwitterのタグです。

例えば18行目 <meta property=”article:publisher” content=”FacebookページのURL”> については、シェアすると記事写真の上に、まだ「いいね」していない人のために「いいね」ボタンがでてくるように指示するタグです。

19行目は <meta name=”twitter:card” content=”Twitterカードの種類”> twitter上でシェアされるときにどの様な写真の表示形式でシェアさせたいかを指示するタグです。

このように、OGPタグではSNSでシェアするときにどのようにしたいのか?ということを設定します。

書いただけでは設定は完了しない

実は、これを書いただけでは反映されません。

最初から2行目の<html>のカッコ内に、OGPタグを書くよ!という指示(下記の赤字)を入れないと反映しないので、忘れずに設定しましょう。

2行目 <html lang=”ja” prefix=”og: http://ogp.me/ns#”>

まとめ

その他、Macの場合 command + option + i  で開発者オプションが見られる、ということとやりました。

今日は「head」内のタグの説明でした。

ですのでここまでやってWebに出てくるのは、サイトの上タブの「タイトル」や「ファビコン」、「検索結果表示」・・・等のみになります。

ただし、最初にこの部分を設定したおくことが、WebサイトのSEO対策をする上でも重要なので、しっかりと指定しておくことが大事!ということです。

PR