4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML headタグ内の基本設定

Last updated at Posted at 2019-01-26

title, discription 他

とりあえずページTOP固定で入れておきたいのが以下。 (レスポンシブ前提)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

更に個々のページで個別に設定したいのが以下。

head
<title></title>
<meta name="description" content="">

他にも検索避けのrobotや、OGPタグ、Twitterカードなど必要に応じて。

参考にしたサイト:サルワカ

favicon関連

260x260以上のpngを用意して下記サイトでGenerateするとファイル群とコードをアウトプットしてくれる。
Favicon Generator の[Select your Favicon picture]から。
出力結果は例えば下記。(local確認用にファイルパスだけ相対パスに変更している)

head
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#222222">
<meta name="msapplication-TileColor" content="#222222">
<meta name="theme-color" content="#ffffff">

Favicon Generator の[Check Favicon]で設定が足りているかチェック
それぞれの設定値など→ 参考にしたサイト

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?