コーディングで忘れがち、だけどやっておきたい3つのこと
この記事はこんな型向け
・コーディング初心者
・久しぶりの実装
・工数を見積もるので参考が欲しい
faviconの設定
favicon（ファビコン）とは、ブラウザタブの左上についているアイコンのことです。
●作り方
①画像を準備する
一辺260px以上の正方形PNG画像を作成します。
②準備した画像をfaviconに変換する
ジェネレーターは検索するとたくさん出てきます。
この記事では私がよく使わせてもらっているツールで説明します。
Favicon Generator. For real.
https://realfavicongenerator.net/
「Select your Favicon image」青ボタンをクリックして準備した画像を選択。
次の画面で、各端末での見え方プレビューが表示されます。
必要に応じて調整します。
「Generate your Favicons and HTML code」ボタンをクリックして生成します。
「Favicon Package」青ボタンから各画像がzipでDLできます。
htmlに記述するコードも出してくれるので、コピペして使えます。
●設定の仕方
サーバに画像をアップし、上記でコピーしたソースをhtmlのhead内に記載しいます。
画像パスは、画像のアップ場所に応じて変更します。
もしくは、サーバのルートに置けばタグを書かなくても全ページに適用されます。（サーバによるかも）
OGPの設定
サイトのURLをfacebook、twitterで投稿した際に表示される画像やテキストのことです。
リリース時に自社のSNSで発信するかもしれません。多分する。
その際「画像表示できる？」「作ってない！」とならないようデザイン時に作りましょう。
●作り方
拡張子がJPG ・ PNG ・ WEBP ・ GIFの画像を作成します。
推奨サイズ：1200px×630px
見せたい要素は真ん中の630px以内に収めます。
便利なツールがあるので活用！
OGP画像シュミレーター
http://ogimage.tsmallfield.com/
●htmlの書き方
1.head要素にprefix=”og: http://ogp.me/ns#”を追加する
<head prefix="og: http://ogp.me/ns#">2. headerタグ内のmetaタグで要素を追加する
<meta property="og:url" content="ページURL（絶対パス）" />
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="サムネイル画像URL（絶対パス）" />■og:type
主に下記
website: Webサイトトップページ
blog: ブログのトップページ
article: 記事ページ、Webサイトのトップページ以外
product: 製品の紹介ページ
当てはまらない場合は他にもあります↓
https://ogp.me/#types
gtagの設置
仕事に関連するサイトならほぼ設置するのがgtag。
▼こういったもの（これはhead開始タグ直後に設置）
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxxx-x');
</script>他にチェックすることが多いと忘れがちでリリース後に「設置したっけ…してない！」とならないよう、リリース前に
・gtagは設置するのか
・設置するなら先に欲しい
と伝えましょう。
リリースまで頑張りましょう！
この記事が気に入ったらサポートをしてみませんか？