コーディング基本ルール

SEOの評価の一つとして「page speed insights」のスコアが加味されるようになっています。
https://developers.google.com/speed/pagespeed/insights/

ページを作成する環境によって（w2やエビス、ec-beingなど別サービス内でのページ作成）は、対応が難しい内容もございますが、スコアを落とさず、SEO的に価値のあるページを作成するために、コーディングの際は、下記の内容に気を付けて構築を行うようにしてください。
※2020.10.9時点

htaccess

・ファイルの圧縮設定をする。
https://kinsta.com/jp/blog/enable-gzip-compression/

#ファイルの圧縮
<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    # Remove browser bugs (only needed for ancient browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent
</IfModule>

・キャッシュを有効にする。
https://yws.tokyo/serve-static-assets-with-an-efficient-cache-policy/

# ブラウザキャッシュ
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/webp "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/eot "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

・URLを統一する。
https://junjun-web.net/web/domain-normalization/
https://www.en-pc.jp/tech/url_canonicalization.html
https://otamunote.com/url-normalization/
https://on-ze.com/archives/2510
※.htaccessが使えない環境の場合、canonicalでも対応可。

┣　/index.php , /index.html を /に統一

RewriteEngine On
RewriteCond %{THE_REQUEST} ^.*/index.(htm|html|php)
RewriteRule ^(.*)index.(htm|html|php)$ https://%{HTTP_HOST}/$1 [R=301,L]

┣　wwwありから、なしに統一

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]

┣　wwwなしから、ありに統一

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [R=301,L]

┣　httpから、httpsに統一

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

┣　エラー時のリダイレクト

ErrorDocument 400 http://sample.com
ErrorDocument 401 http://sample.com
ErrorDocument 403 http://sample.com
ErrorDocument 404 http://sample.com
ErrorDocument 500 http://sample.com
ErrorDocument 502 http://sample.com
ErrorDocument 504 http://sample.com

・includeなどを使用して、ページ内のパーツをhtmlファイル化している場合は、「x-robots-tag」を使用して、noindexにする。
細分化したパーツファイル自体に価値は無いので、クロールでindexされるとサイト全体の評価が低下する原因となるため。
例：<!–#include virtual=”header.html” –>を使用してページを構成している場合

<Files "header.html">
  Header set X-Robots-Tag "noindex"
</Files>

CSS

・外部CSSはHTMLのパースを妨害しないように遅延読み込みにする。
ファーストビュー部分のレイアウト崩れが起きないように、遅延読み込みさせた場合はファーストビューで必要となるクリティカルcssの記述のみ<style></style>を使用して、インラインで埋め込む。

クリティカルcssは下記のサイトを使用して抽出する。
https://jonassebastianohlsson.com/criticalpathcssgenerator/

###media=printでファイルの指定
<link rel="stylesheet" href="～.css" media="print" onload="this.media='all'">

###jsが動作しなかった時のために、noscriptでの記述も入れとく
<noscript>
<link rel="stylesheet" href="～.css">
</noscript>

・importでcssやfontファイル読み込むと、表示速度が下がるためlinkタグを使用して読み込むようにする。

・fontは読み込み完了までの表示対策のため、「display-font:swap」　を指定しておく。
※現時点では、全てのブラウザがサポートしている訳ではないが、最新のchromeは対応済

・googlefontを読み込む時は、hrefの引数に「&display=swap」を付ける。

・閲覧しているページ内の要素に関係ないCSSの記述が多いと、CSSファイルの容量削除の指摘を受けるので、CSSファイルは可能な限り必要最低限のファイルで分けて構成する。
例：トップページであれば、全ページ共通用のcommon.cssとトップ固有のtop.cssで構成するようにする。

・「Noto Sans JP」や「貂明朝」などの日本語フォントはファイル容量が重いため、見出しとかワンポイントで使用しているだけなら、極力画像にして、altタグをいれる。

・font awesomeなどアイコン系のフォントは必要なアイコンのみに絞って使用する。
http://www.nowhere.co.jp/blog/archives/20170321-191521.html

・sassを使用する時は、可能な限りメディアクエリの記述は1か所にまとめる。何度も「@media screen and (max-widht:767px){cssの記述}」が出てこないようにする。

■aタグのhoverはSPのios端末で2重クリックの原因になる可能性があるので、メディアクエリを使用してPCだけに適応されるようにする。

javascript

・jqueryを新しく入れるサイトの場合、特別な理由が無ければ、3系を使用する。（2020年10月時点）

・jsは「defer」「aysnc」を使って非同期で読み込む。
※ページ構成に必要なファイルの存在は早めに知らせた方がよさそうなので、jsファイルの読み込みは、ページ下部ではなく、headなどの上部で「defer」「aysnc」を指定して読み込ませておく
https://qiita.com/phanect/items/82c85ea4b8f9c373d684

★実行タイミングのイメージ
下記の記述の場合、②→①→④（③はファイルダウンロード完了後実行）の順番で実行される。
※jsの中でonloadを指定している記述がある場合は、その部分の記述は上記の実行タイミングに関係なく最も後に実行される。

①　<script src="/common/js/jquery.3.5.1.min.js" defer></script>
②　<script src="/common/js/viewport.js"></script>
③　<script src="/common/js/lazysizes.min.js" async></script>
④　<script src="/common/js/common.js" defer></script>

・ページ内にインラインで記述したjsは「defer」「aysnc」の指定が出来ないため、可能な限り外部ファイル化する。

・閲覧しているページ内の要素に関係ないjsの記述が多いと、jsファイルの容量削除の指摘を受けるので、jsファイルは可能な限り必要最低限のファイルで分けて構成する。
例：トップページであれば、全ページ共通用のcommon.jsとトップ固有のtop.jsで構成するようにする。

・関数名の被りを防ぐため、関数を定義する場合は下記のルールで行う。

■関数名は日付(年月)で記載
例：
function contens2302() {
実行文
}

画像

★imgタグにはwidthとheightを入れるようにする。
※widhtとheightに入れる値は、表示したい画像サイズではなく、動的に入力されるオリジナルの画像サイズのままで大丈夫です。
例：オリジナルサイズが、1000×1000の画像があり、それを500ｘ500で表示させたい場合も、widhtとheightに入れる値は、「widht=”1000″ height=”1000″」で大丈夫です。widthとheightの値を適宜適切なサイズで入れ直す必要はありません。
※ブラウザ上の表示サイズは、cssやclassで制御する。

「widht」「height」の値の入力はvs codeの機能で対応
また、画像の縦横比の崩れを防ぐために、imgタグに対して「max-width:100%」と「height:auto」を入れる

Command + shift + p
Updateで検索し、Emmet Update Image Sizeの右端にある設定アイコン（Configure Keybinding）をクリック
左端にある、鉛筆アイコン（Change Keybinding）をクリック
option + shift + iを打ち、Enter
*ショートカットは任意のものでOK

こうすることで、imgタグにカーソルがある状態でoption + shift + iを押すと、自動でwidth/heightが入力（アップデート）されます

*マークダウン記法 ![代替テキスト](URL)では、当然ですがwidthとheightは入りません。
*一つでも画像のリンク切れがあると、Emmet: Update Image Sizeが働きません

img {
max-width: 100%:
height: auto;
}

★ファーストビューで使用していない画像は遅延読み込みを行うようにする。
ほぼすべてのブラウザにて、ブラウザ機能の「load」が使えるようになっている。(2022/12 現在)
そのため、下記の方法にて対応する。（<img>タグに「loading=”lazy”」を付与）
https://web.dev/lazy-loading-images/

「loading="lazy"」 を付与
<img src="./test.jpg" alt="">
↓
<img src="./test.jpg" alt="" loading="lazy">

尚、background-imgを対象にしたい場合は、
上記対応ができないため、JSにて対応する。
https://web.dev/lazy-loading-images/#images-css

★ファーストビューで使用している画像は、「decoding=”async”」を指定してメインスレッドのパースをブロックしないようにする。
https://spelldata.co.jp/blog/blog-2019-12-19.html
https://gist.github.com/hrdtbs/d280ab78c257cbd90a058304cd9fdc6b
※デコードとは、画像のメディアデータを、画面表示に適したビットマップ形式に変換するプロセスのこと

「decoding="async"」 を付与
<img src="./test.jpg" alt="">
↓
<img src="./test.jpg" alt="" decoding="async">

・画像の容量が不必要に多いと、「効率的な画像フォーマット」「次世代フォーマットでの画像配信」といった指摘を受けるのでページ内で使用するjpg、pngは必ず圧縮する。
https://tinypng.com/

可能であれば既存の画像フォーマット（jpg、png）と次世代フォーマット（webp）の2つを用意する。
webpへの圧縮方法はcliにて一括処理
【設定方法】
https://www.doe.co.jp/seo/posts/squoosh-cli-windows/
キャプチャ
.shファイルの設定内容

squoosh-cli --webp '{"quality":85}' -s '.jpg' -d ../ ./*.jpg
squoosh-cli --webp '{"quality":80}' -s '.png' -d ../ ./*.png
squoosh-cli --mozjpeg '{"quality":90,"baseline":false,"arithmetic":false,"progressive":true,"optimize_coding":true,"smoothing":0,"color_space":3,"quant_table":3,"trellis_multipass":false,"trellis_opt_zero":false,"trellis_opt_table":false,"trellis_loops":1,"auto_subsample":true,"chroma_subsample":2,"separate_chroma_quality":false,"chroma_quality":75}' -d ../ ./*.jpg
squoosh-cli --oxipng auto -d ../ ./*.png

htaccessが使えれば、htaccessでwebpの表示を制御する。

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{HTTP_ACCEPT} image/webp
 RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png)$
 RewriteCond %{REQUEST_FILENAME}.webp -f
 RewriteCond %{QUERY_STRING} !type=original
 RewriteRule (.+).(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
 </IfModule>
<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>
 AddType image/webp .webp

htaccessの仕様が難しければ、pictureタグで対応する。

<picture>
<source type="image/webp" srcset="sample.webp" />
<img src="sample.png" />
</picture>

・css内で既存の画像フォーマット（jpg、png）と次世代フォーマット（webp）を出し分けたい場合は、「modernizr.js」を使用する。
https://blog.ekaki-j.com/webp-conversion-2

CSS記述例：

/WebP対応ブラウザの場合/
.webp .header {
background-image: url(img/header-image.jpg.webp);
}
/WebP非対応ブラウザの場合/
.no-webp .header {
background-image: url(img/header-image.jpg);
}

その他

・同一コンテンツをPCとSPで別々のページとして作成する必要がある場合、重複コンテンツの判定を避けるため、alternateタグを使用する。
https://seolaboratory.jp/41731/

・hタグのマークアップを意識する。
hタグの使用レベル
h1・・・ページ内に1つ。主にはパンクズやtitleの内容。
h2・・・ページ内の各セクションごとに使用可能。重要な見出しなど。
h3~h6・・各セクション内で適宜使用。商品リストがあるのであれば、商品名など。

・iframeを使用する場合は、「title」を付ける

<iframe title="My Daily Marathon Tracker" src="https://www.mydailymarathontracker.com/"></iframe>

・2021年時点のメディアクエリは、
→PCが、768以上
→SPが、767以下
→TabletはPCと同じレイアウト表示