前回の講座で作ったhead.pugを使ってheadの中身を作ります。
全体の流れ。
- 【共通パーツの制作】共通パーツを組み合わるレイアウトファイルを制作しよう
- 【共通パーツの制作】headを制作しよう
- デザインカンプの情報の整理や必要な情報を取得しよう
- サイトを作る上でのhtml,cssの基本設定をしよう
- 【共通パーツの制作】headerを制作しよう
- 【共通パーツの制作】footerを制作しよう
- 【共通パーツの制作】メインコンテンツを制作しよう
- TOPページを制作しよう
- 特長ページを制作しよう
- サービス詳細ページを制作しよう
- セミナー/イベント一覧を制作しよう
- セミナー/イベント詳細ページを制作しよう
- ブログ/コラムページを制作しよう
今回制作するhead.pugが追加されたコードです。
そもそもheadには何を書けばいいのか
head.pugにはhtmlの<head></head>に記載する内容を書いていきます。
headにはコンピュータに理解させる情報を記載しますが、そもそも一般的にheadに何を書いたらいいのか、SEOなどを意識して書くには何を書けばいいのかわからないかと思います。
ですので、まずはheadに書くべき情報から整理しましょう。
リスト形式で上げますのでチェックリストとしてお使いください。基本＋SEOを意識した設計です。
- 文字コードUTF-8設定
- ページタイトル
- SNS用タイトル
- SNS用ページタイプ
- SNS用ページURL
- SNS用アイキャッチ画像
- SNS用サイト名
- SNS用言語設定
- ページの説明（検索結果の抜粋に表示される文章）
- css用ビューポート設定
- カノニカル
- アップルタッチアイコン
- ショートカットアイコン
- cssの読み込み
- jsの読み込み
SNS用のmeta設定はほかにもFacebook用、Twitter用とありますが、基本的に上記を抑えればシェアされたときに必要な情報はまかなう事ができます。
他のSNS用のmeta情報について知りたい方はこちらを参考にしてください。
headのコードを書こう
head.pugに上記でだした設定を行うコードを記載していきます。
head.pug
//- 文字設定 meta(charset="UTF-8") //- サイトタイトル title title //- SNSシェア設定 //- https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html meta(property="og:title" content='ページタイトル') meta(property="og:type" content="サイトの種類（companyなど）") meta(property="og:url" content="ページURL") meta(property="og:image" content="画像URL") meta(property="og:site_name" content='サイト全体のタイトル、ランド名など') meta(property="og:description" content='ページの説明文') meta(property="og:locale" content="ja_JP") //- サイトの説明文 //- https://wacul-ai.com/blog/seo/internal-seo/meta-description-for-seo/ meta(name="description" content='説明文') //- cssでメディアクエリを使用する際に必要 //- https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607 meta(name="viewport" content="width=device-width, initial-scale=1") //- カノニカル設定 //- https://ferret-plus.com/1809 link(rel="canonical" href="URL") //- iPhoneやandroidでブックマークショートカットを制作際にホーム画面に表示されるアイコン //- https://html5css3tag.com/pagegeneral/lgeneral0050/ link(rel="apple-touch-icon" href="./apple_touch_icon.png") //- ファビコン //- https://bitsofco.de/all-about-favicons-and-touch-icons/ link(rel="icon" type="image/x-icon" href="./favicon.ico") //- googleフォントの読み込み link(href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet") //- cssの読み込み link(rel="stylesheet" href="/common/css/app.css") //- jsの読み込み script(src="/common/js/first.js") script(src="/common/js/vendor.js" defer) //- 普通にhtmlもかけます <script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js" defer></script> script(src="/common/js/bundle.js" defer)
それぞれの詳細はコメントに記載されている記事を参考にしてください。
40行目以降のこちらの環境都合で読み込んでいるcssやjsについては解説します。
41行目:cssファイルの読み込み
41行目でcssファイルを読み込んでいます。
cssはscssで記載し、app.cssでまとめてサイト全てを1つのcssファイルで賄います。
ローカルからのファイルの読み込みの場合、全てのURLをrootからの応対パスで読み込んでいますが、WordPress化の際に絶対パスにしています。本番では必ず絶対パスです。
絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？
44行目以降のjsの読み込み
44行目以降は全てjsの読み込みです。
44行目のfirst.jsにはjQueryなどのライブラリを使用しない、なるべく速く読み込みたい処理を記載します。
45行目のvendor.jsはライブラリやパッケージなどをまとめて記載しておくファイルです。例えばjQueryなんかはCDNで読み込む事もできますが、ローカルから読み込んだ方が早いし通信回数を減らせるので、jQueryをダウンロードしてvendor.jsにコピペして使用します。
48行目は画像の遅延読み込みを実装するためのjsです。これもvendor.jsに入れる事もできますが、普通にhtmlも書けますという事をアピールしたかったのでCDNで読み込んでみました。
49行目のbundle.jsはこれから制作するjsが入るファイルです。
deferについて
他の教材ではjsをbodyの終了タグの直前に記載することが多いですが、今回はDOMがレンダリングされる前に読み込みたいファイルなどもあり、headに記載しなければいけないscriptも存在するため、ファイルの読み込みが散らばってしまいます。
ですのでhead内に全てのscriptをまとめて記載しつつ（記載場所をまとめたほうが管理しやすい）、deferを使用する事で問題を解決しています。
body終了タグの直前でjsを読み込む理由や読み込み順によっておこる問題点などについては以下の記事を参照ください。
JavaScriptを書く場所や読み込む場所はどこがいいのか？
完成したhtmlファイル
こちらのpugファイルをコンパイルしhtmlにすると以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>title</title>
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="サイトの種類（companyなど）">
<meta property="og:url" content="ページURL">
<meta property="og:image" content="画像URL">
<meta property="og:site_name" content="サイト全体のタイトル、ランド名など">
<meta property="og:description" content="ページの説明文">
<meta property="og:locale" content="ja_JP">
<meta name="description" content="説明文">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="URL">
<link rel="apple-touch-icon" href="./apple_touch_icon.png">
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/common/css/app.css">
<script src="/common/js/first.js"></script>
<script src="/common/js/vendor.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js" defer></script>
<script src="/common/js/bundle.js" defer></script>
</head>
<body>
<div class="l-root-container">
<div class="l-header">headerコンテンツ</div>
<div class="l-content-container">
mainコンテンツ
</div>
</div>
<footer class="l-footer">footerコンテンツ</footer>
</body>
</html>
htmlを見てわかる通り、pugでは『//- コメント』はコンパイル後のhtmlには反映されませんので、好きなだけコードを解説を書いても納品ファイルを荒らすことなく開発が可能です。
