コース目次 / 第9章
仕上げ・公開②
タブのアイコンとSNS用のカードを設定して、完成版を公開しなおします。
最後の章です。ここまでで、あなたのサイトには自己紹介・カード・ダークモード・メモ機能が入りました。仕上げとして 「人に見せたときの見え方」 を整えて、卒業します。
今日のゴール
2つ増えます。
- ブラウザのタブに小さなアイコンが出る
- URLを SNS やメッセージアプリに貼ったとき、タイトルと画像の入ったカードが出る
どちらも「中身」ではなく「外から見たときの顔」です。ここを整えると、一気に「ちゃんとしたサイト」に見えます。
ミニ解説その1: favicon
favicon(ファビコン) は、ブラウザのタブに出る小さなアイコンのことです。ブックマーク一覧でも使われます。
指定は1行だけです。
<link rel="icon" href="images/favicon.png" />ミニ解説その2: OGP
OGP(オージーピー) は、URLを SNS に貼ったときに出るカードの中身を指定する仕組みです。指定しないと、リンクがそっけない文字列のまま表示されます。
<meta property="og:○○" content="値" /> という形で書きます。使うのは5つです。
| 名前 | 何を書くか |
|---|---|
og:type |
ページの種類。ふつうのサイトは website |
og:title |
カードに出る大きな文字 |
og:description |
その下の説明文 |
og:url |
このページのURL |
og:image |
カードに出る画像 |
ここだけ注意です。 og:image と og:url は、images/ogp.png のような相対パスでは動きません。SNS のコンピュータがよそから取りにくるので、https:// から始まるフルのURLで書く必要があります。第5章で Netlify が発行したあなた自身のURLを使ってください。教材のコードに出てくる haruto-camera.example.com は説明用の書き見本で、実在しないアドレスです。
準備: 画像を2枚置く
このページの下のZIPをダウンロードして、中の images/favicon.png と images/ogp.png を、自分の images フォルダにコピーしてください。
Mac をお使いの方
Finder でZIPをダブルクリックして開き、2つのファイルを選んで command + C、自分の images フォルダで command + V です。
Windows をお使いの方
エクスプローラーでZIPを右クリック →「すべて展開」で開き、2つのファイルを選んで Ctrl + C、自分の images フォルダで Ctrl + V です。
自分で用意する場合の目安は、favicon が正方形(64×64ピクセル程度)、OGP画像が横長(1200×630ピクセル)です。
書き写す
<head> の <title> のすぐ下に足します。URLの部分は3か所とも、自分のURLに書き換えてください。 書き見本のまま公開すると、SNS に貼ってもカードが出ません。
<meta name="viewport" content="width=device-width, initial-scale=1" /> <title>はるとの記録</title>+ <meta name="description" content="カメラと旅行が好きなはるとの記録。写真と、行ってよかった場所のメモを置いています。" />+ <meta property="og:type" content="website" />+ <meta property="og:title" content="はるとの記録" />+ <meta property="og:description" content="カメラと旅行が好きなはるとの記録。写真と、行ってよかった場所のメモを置いています。" />+ <meta property="og:url" content="https://haruto-camera.example.com/" />+ <meta property="og:image" content="https://haruto-camera.example.com/images/ogp.png" />+ <link rel="icon" href="images/favicon.png" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />書き終わったファイル全体です。長くなりましたが、増えたのは <head> の中の7行だけです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>はるとの記録</title>
<meta name="description" content="カメラと旅行が好きなはるとの記録。写真と、行ってよかった場所のメモを置いています。" />
<meta property="og:type" content="website" />
<meta property="og:title" content="はるとの記録" />
<meta property="og:description" content="カメラと旅行が好きなはるとの記録。写真と、行ってよかった場所のメモを置いています。" />
<meta property="og:url" content="https://haruto-camera.example.com/" />
<meta property="og:image" content="https://haruto-camera.example.com/images/ogp.png" />
<link rel="icon" href="images/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<p class="site-name">はるとの記録</p>
<nav class="nav">
<a href="#likes">好きなもの</a>
<a href="#hobby">趣味</a>
<a href="#memo">メモ</a>
<a href="#links">リンク</a>
<button class="theme-button" type="button">ダーク</button>
</nav>
</header>
<main class="container">
<section class="about">
<img class="icon" src="images/icon.png" alt="はるとのアイコン" />
<h1>こんにちは、はるとです</h1>
<p class="intro">カメラと旅行が好きです。撮った写真と、行ってよかった場所を少しずつここに置いていきます。</p>
</section>
<!-- 好きなものを3つならべる -->
<section id="likes">
<h2>好きなもの</h2>
<div class="cards">
<div class="card">
<h3>カメラ</h3>
<p>古いフィルムのカメラを1台だけ使っています。</p>
</div>
<div class="card">
<h3>旅行</h3>
<p>電車で行ける小さな町を歩くのが好きです。</p>
</div>
<div class="card">
<h3>コーヒー</h3>
<p>旅先で豆を買って帰るのが習慣になりました。</p>
</div>
</div>
</section>
<section id="hobby">
<h2>趣味</h2>
<p>休みの日はカメラを持って歩いています。朝いちばんの光がいちばん好きで、そのために早起きするようになりました。去年は瀬戸内の島を何日かかけてまわりました。</p>
</section>
<section id="memo">
<h2>行きたい場所メモ</h2>
<div class="memo-form">
<input class="memo-input" type="text" placeholder="行きたい場所" />
<button class="memo-button" type="button">追加</button>
</div>
<ul class="memo-list"></ul>
</section>
<section id="links">
<h2>リンク</h2>
<ul>
<li><a href="https://www.flickr.com/">写真を見るのに使っているサイト</a></li>
<li><a href="https://www.jnto.go.jp/">旅行の下調べに使っているサイト</a></li>
</ul>
</section>
</main>
<footer class="site-footer">
<p>はるとの記録</p>
<p class="site-url">https://haruto-camera.example.com/</p>
</footer>
<script src="script.js"></script>
</body>
</html>保存してリロードすると、タブに小さなアイコンが出ます。OGP のほうは、公開してからでないと確認できません。
公開前チェック
再公開の前に、最後にもう一度だけ確認してください。第5章と同じ内容ですが、この章でメモ機能などを足しているので、もう一度見ておく価値があります。
- 本名・顔写真・住所・電話番号など、載せたくないものが残っていませんか
- 写真に、家や学校、職場が分かるものが写っていませんか
- リンク先は、人に見せて問題のないサイトですか
- スマホで開いて崩れていませんか(第6章のデバイスモードでも確認できます)
再公開する
ここがいちばん間違えやすいところです。 Netlify のトップページにある Drop の枠に落とすと、まったく別の新しいサイトが作られてしまいます(URLも別物になります)。更新したいときは、必ず自分のサイトの画面を開いてからドロップしてください。
Mac をお使いの方
- Netlify にログインし、自分のサイトをクリックして開きます。
- 上のタブから
Deploys(デプロイ)を選びます。 - 画面の下のほうにあるドロップ用の枠に、Finder から
mysiteフォルダをドラッグして落とします。
Windows をお使いの方
- Netlify にログインし、自分のサイトをクリックして開きます。
- 上のタブから
Deploys(デプロイ)を選びます。 - 画面の下のほうにあるドロップ用の枠に、エクスプローラーから
mysiteフォルダをドラッグして落とします。
Published(公開済み)と出れば完了です。自分のURLを開いて、ダークモードのボタンとメモ機能が動くか確認してください。
OGPを確認する
自分のURLを、SNS やメッセージアプリに貼ってみてください。タイトル・説明・画像の入ったカードが出れば成功です。
あなたの番
og:titleとog:descriptionを自分の言葉で書いてください。 説明は「どんな人が、何を置いているサイトか」が1〜2文で分かれば十分です。カードに出るのは最初の100文字ほどなので、長すぎないほうがきれいに見えます。<title>とog:titleは違っていてもかまいません。 タブに出るのが<title>、SNSのカードに出るのがog:titleです。- OGP画像を自分で作りたい人は、1200×630ピクセルで、文字を大きめに入れると小さく表示されても読めます。
うまくいかないときは
SNSに貼ってもカードが出ない/古い内容のまま
SNS 側が、前に読んだ内容をしばらく覚えているためです。あなたのコードが間違っているとは限りません。
各SNSには、覚えた内容を読み直させるための確認ツールがあります。「(SNS名) カード 確認ツール」などで検索すると出てきます。そこに自分のURLを入れて読み直させると、新しいカードが出るようになります。
それでも出ないときは og:image と og:url が https:// から始まっているか確認してください。相対パスでは動きません。
タブのアイコンが出ない
images/favicon.png が本当にその場所にあるか確認してください。また、ブラウザはアイコンを強く覚えるので、変えたのに出ないときは、いったんタブを閉じて開き直すか、時間をおいてください。
再ドロップしたら別のURLになった
トップページの Drop に落としてしまった状態です。新しくできたほうのサイトは、Netlify の設定画面から削除できます。元のサイトを開き直して、Deploys タブからドロップし直してください。
おつかれさまでした
これでコース1は終わりです。あなたは自分のパソコンに環境を作り、HTML と CSS と JavaScript を書き、それを世界に公開しました。もう「作ったことがある人」です。
下の「完了して次へ」を押すと、卒業ページに進みます。
こうなっていればOK
うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。
この章はまだ完了していません。