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 > meta.html

meta.html


スピード施策依頼があった場合の、「_common/tag/」ディレクトリ内に置く、「meta.html」の記述方法です。
「meta.html」の記述は、ページスピードと直結する重要な要素です。ページスピードUP依頼があった場合は、下記を参照してください。
SPEED UP施策 meta.htmlの記述参照

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


meta.htmlの記述


meta.html 記述順序
【順序1】CSSファイル外部読み込み・<style>の記述
【順序2】次にJSファイル外部読み込み・<script>の記述
順序が重要!!CSS(style)が一番先、次にJS(script)
 理由→ページスピードアップ施策

Jquery利用
JqueryはCDN利用する
CDNサーバダウンに備え、ローカルサーバ「_common/js/」にも本体を置く
※CDNはmin圧縮タイプ利用、ローカルサーバー内はmin圧縮+gzip圧縮タイプを利用
※「_common/js/」に置くJSのバージョンと、meta.htmlで記述するJSのバージョンは同じにすること

その他のJSファイル
Above the Foldで不要なJSファイル(SNSなど)は、</body>閉じタグ直前に置く
(共有パーツ「footer.html」内でもOK!)


<meta.html>

<!-- CSSをSCRIPTより先に記述 --> <link rel="stylesheet" href="/_common/css/common.css"> <!-- SCRIPT --> <!-- SCRIPTは、AboveTheFoldで使わないものは</body>直前に記述 Facebook SNS系など --> <!-- Jquery2.1.4 CDN START --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-1.11.3.min.js.gz"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/_common/js/jquery-2.1.4.min.js.gz"><\/script>')</script> <!--<![endif]--> <!-- Jquery END --> <!-- JQUERYを利用するSCRIPTやJSファイルは、Jquery.js読み込み後に記述 --> <script src="/_common/js/common.js"></script>
SMサイト<meta.html> 参照パスを/sm/ディレクトリに変える等してください。

ページの先頭へ


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

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