https://webcode-lab.com/attic/

Coding Rules・SEO施策 チェックサイト

  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
  • keyvisualimage
HOME > Common Rules > Checklist

Check List (チェックリスト)


ルールに則ったコーディングができているかのチェックリストです。(細かい説明はリンクを貼っています。)

最低限、必須のルールのみに絞っています。
コーディング(プログラミング)終了後には必ずチェックをしてください。
尚、特殊な理由でルールが適用できない場合は、その旨を完了報告と共にお知らせください。

「CODE」ボタンをクリックすると参考コードが開きます。




Check List 1 :基本・設定事項


サイト構造
HTML5で作成
各ページは「html」・「php」ファイルで作成
下層ページはディレクトリ構造にする
共通パーツ「_common」ディレクトリを各ページでインクルード
スマートフォンサイトは、root直下に「sm」ディレクトリを置き、その中に展開

パス記述
サイト内リンクには、「index.html」や「index.php」を付けない(基本wwwも
_commonディレクトリ内のパス記述は、「ルート相対パス」か「フルパス」表記
_commonディレクトリ内は相対パスNG!
「フルパス」の場合は、頭のhttp:やhttps:を除いた「//」から始まるパス表記(将来のhttps化に備え)

Htaccess設定
HTML文書でのPHP使用とバージョン(サーバー名設定1箇所)
(root直下 .htaccess)
PHP高速化(サーバー名設定4箇所・ドメイン名設定4箇所)
RewriteEngine On
重複ページ最適化(www・index最適化 4行)
ブラウザキャッシュ(納品直前に設定)
gzipローカルファイル採用(サーバーgzip圧縮変換設定より前に記述)
サーバーgzip圧縮変換
※サーバー名要確認(計5箇所)・クライアントドメイン名要確認(計7箇所)

_common設置
「_common」の中に「css・js・image・php・tag」5ディレクトリ
「_common/tag/」の中に「top.html・meta_fix.html・meta.html・gtm.html」4ファイル
「_common/php/」の中に「ua_switch.php
「_common/image/」の中にKeyビジュアル用「keyV」ディレクトリ
  (※keyVプラグイン使用の場合、その中に「icon」ディレクトリ※icon画像込)
スマートフォンサイト「sm」直下にもスマホ用「_common」設置

※(以上赤字全て必須設置
名称変更不可、「top.html・meta_fix.html」に関しては内容変更不可

PHPインクルード
Htaccessにて、HTML文書でのphp使用とバージョン指定要
 ※上記 Htaccessの項目、PHP使用とバージョン
includeの記述は、相対パスか絶対パス指定
 ※階層が変わる場合は絶対パスが便利

タグ
例)
include("../common/tag/header.html");(相対パス) include($_SERVER['DOCUMENT_ROOT']."/common/tag/header.html");(絶対パス)


ページの先頭へ




Check List 2 :コーディング事項


ページTOP宣言
【順序1】全ページ一番上で文字コード宣言
【順序2】<PCサイトのみ>スマートフォン自動転送プログラムのインクルード
    ( 自動転送プログラム
【順序3】<SMサイトのみ>ディレクトリ名を変数に代入(PHPコード)
タグ
<?php
//SM自動転送プログラム用変数
$page_name = "○○○/";
?>
【順序4】HTML5 TOP宣言(top.htmlをインクルード)

<head>内の記述順
【順序1】<head>の一番上で「meta_fix.html」をインクルード
【順序2】次にタイトル・キーワード・ディスクリプション等

【順序3】その次に「meta.html」をインクルード
※「gtm.html」はここでなく、<body>の一番上でインクルード

<PCサイト用参考 SMサイトも同様の順序に>

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'."\n" ?> <?php //SM自動転送プログラム PCサイトのみ include("_common/php/ua_switch.php"); //html宣言 include("_common/tag/top.html"); ?> <head> <?php //meta_fix.htmlをインクルード include("_common/tag/meta_fix.html"); ?> <title>PAGETITLE|SITENAME</title> <meta name="keywords" content="" /> <meta name="description" content="" /> (その他ページ固有の<style>など) ←直書きの場合CSSや<style>が先 <?php //meta.htmlをインクルード include("_common/tag/meta.html"); ←この中も、CSSや<style>が先、次にJSや<script> ?> (その他ページ固有のJS・<script>など) ←Above the Foldで使用しないscriptは、</body>直前(footer.html)に記述 </head> <body> <?php //googleGTM include("_common/tag/gtm.html"); ?> ……

meta_fix.html
PCサイト用・SMサイト用ともに変更不可

meta.html
【順序1】CSSファイル(style)の記述
【順序2】次にJSファイル(script)の記述
順序に注意)
※Jqueryは圧縮minタイプでCDN利用(※_common/js/にも本体を置く)

footer.html
Above the Foldで使用しないJS・scriptは、footer.html最後に記述

<SMサイトのみ>
 「PCビュー」リンク設定は、該当のPCサイト下層ページPATHのリンクを貼る
 (リンク先PATHディレクトリ名を「PHP変数」利用)
タグ
<a href="/<?=$page_name?>?dsp=pc">PCサイトを見る</a>

CSS
main.cssなどサイト共通のCSSに追加
Common CSS

Form
チェックボックスやラジオボタンには、<label>要素使用(クリック領域を広く取る)
氏名等の「ふりがな」はひらがな表記で( 「フリガナ」「カタカナ」)
GTM用に、フォームにIDを付与 ※次項参照

GTMコード
_common/tag/内に、「gtm.html」の名前でGTMコードを貼り付けたファイルを置く
全ページの<body>直後に「gtm.html」をインクルード


規定フォームのタグ(<form>)内にIDを付与
   (問い合わせフォーム id="contact_form"・予約フォーム id="reserve_form"
その他のフォーム、購入関係などは、フォーム毎に任意で固有のIDを付与
   (例:商品フォーム id="pen_red"
   ※IDをSEO担当者に伝える
スマホサイトのみ、ラインタップリンク<img>画像タグに規定IDを付与(id="line"
   ※リンク対象が画像タグでない場合、<span id="line">ライン</span>でも可

※サイト内の他GTM用IDと重複しないよう注意
任意で付与したID名は伝える
※従来設置していた、アナリティクス・アドワーズ・リマーケティングコードは設置しません。

<gtm.html>

※各クライアント様毎に、またサイト毎に、下記コードは異なります。 <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NTJHXC" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NTJHXC');</script> <!-- End Google Tag Manager -->
<各ページ>
サイトの全ページで、<body>直下にインクルード ソースは以下の通り(相対パスはそれぞれ階層により書き換えてください)
<html> <!-- gtmコード body直後に --> <?php include("../_common/tag/gtm.html"); ?>

ページの先頭へ


次回までにお願いする課題

  • 課題1. 知っているHTML5のマーキング情報を、みなさんへ共有しましょう。
  • 課題2. 共有CSS・共有JSを構築しましょう。提案をお待ちしています。
  • 課題3. 今後サイトコーディングで必要になるプラグインを教えてください。
  • 課題4. 分からないことなどあれば聞いてください。
12/04勉強会