コピペで使うhtml文
<!DOCTYPE html>
<html lang=”ja”>
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#”>
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”keywords” content=”【キーワード】” />
<meta name=”description” content=”【ディスクリプション】”>
<meta charset=”utf-8″>
<meta property=”og:url” content=”【ページの URL】” />
<meta property=”og:type” content=”【ページの種類（website/blog/article）】” />
<meta property=”og:title” content=”【ページの タイトル】” />
<meta property=”og:description” content=”【ページのディスクリプション】” />
<meta property=”og:site_name” content=”【サイト名】” />
<meta property=”og:image” content=”【サムネイル画像の URL】” />
<link rel=”shortcut icon” href=”favicon.ico”>
<link rel=”Apple-touch-icon” href=”appleicon.png”>
<title>【ページタイトル】</title>
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/js.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
</head>
<body>
<div id=”wrapper”>
<header>
</header>
<section class=”content”>
</section>
<footer>
</footer>
</div>
</body>
</html>
●順番に内容の説明
<!DOCTYPE html>
html5宣言文
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#”>
ogpを使うという宣言文
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
InternetExplorerの最新版で表示してねという文言
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
スマホなどの正しく表示してねという指示みたいだけど、無くても大丈夫かもしれない
<meta charset=”utf-8″>
文字コードの宣言文。無くても動作はするけど、文字化けする事もあります。またTeraPadなどで作った時の文字コードが違うと文字化け起こすので注意です。
ちなみTeraPadの文字コードの修正は、
ファイル→文字コード指定再読込→UTF-8
に変更して書いてください。おそらくデフォルトの文字コードはSHIFT-JISになっています。
<meta property=”og:url” content=”【ページの URL】” />
SNSでリンクされた時のURL
<meta property=”og:type” content=”【ページの種類（website/blog/article）】” />
ページの種類を指定。このタイプを設定することにより、SNS上での表示形式が変わるらしいです。
トップページならwebsite
ブログならblog
その他ページならarticle
<meta property=”og:title” content=”【ページの タイトル】” />
SNSで表示されるサイトタイトル
<meta property=”og:description” content=”【ページのディスクリプション】” />
SNSで表示される説明文
<meta property=”og:site_name” content=”【サイト名】” />
SNSで表示されるサイト名
<meta property=”og:image” content=”【サムネイル画像の URL】” />
SNSで表示されるサムネイル画像
<link rel=”shortcut icon” href=”favicon.ico”>
favicon設定
<link rel=”Apple-touch-icon” href=”appleicon.png”>
Apple用
<title>【ページタイトル】</title>
ページタイトル
<meta name=”description” content=”【ディスクリプション】”>
検索で表示される説明文
<link rel=”stylesheet” href=”css/style.css”>
CSSリンク（cssディレクトリに入れた場合）
<script src=”js/js.js”></script>
JavaScriptリンク（jsディレクトリに入れた場合）
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”>
jQuery用リンク。使わない場合は付けなくても良い
faviconサイズについて
- 16px × 16px：IEのタブ
- 24px × 24px：IE9の「ピン留め機能」
- 32px × 32px：Chrome、Firefox、Safariなどのタブ
- 48px × 48px：Windowsのサイトアイコン
- 64px × 64px：高解像度のWindowsサイトアイコン