ウェブサイトのパフォーマンス メタ tag_html/css_WEB-ITnose

HTML 初心者にとってメタタグは苦肉の策であるため無視されがちですが、Web サイトにとっては非常に重要です。

定義: ページに関するメタ情報を提供します。たとえば、検索エンジンのキーワードと説明、更新頻度などです。簡単に言えば、メタタグは検索エンジンと連携し、ウェブサイトの SEO を最適化できます。

形式:

head タグ内

自己終了とタグ

ブラウザのサポート: 完全

属性:

content: http-equiz に関連するメタ情報と名前を定義

http-equiz: コンテンツを変更httpヘッダーに関連付けられます

name: コンテンツを名前に関連付けます

scheme: 属性値の変換に使用されるスキームを指定するために使用されます(h5は廃止されました

charset: 便利なエンコーディング設定(H5

機能: ( ここで説明する内容は、一般的に使用されるもの、または緊急時に役立つものです

エンコード設定

http-equiz="Content-Type" content=""

例:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

ページ言語設定

ブラウザ分類が簡単

例:

<meta http-equiv="content-language" content="es">

定期的な更新とリダイレクト

知らない学生向け

例:

<meta http-equiz="Refresh" content="10"><meta http-equiz="Refresh" content="10; Url=http://www.ecjtu.net">

キーワード

例:

<meta name="keywords" content="华东交大 华东交通大学 日新网">

検索エンジン用のキーワードリストを提供します。は SEO にとって特に重要です。私もインターネットでこのようなことが書かれているのを見ました。

<Meta name="Keywords" Lang="EN" Content="vacation,greece,sunshine"> 

以前、meta の属性についても書きましたが、どの標準にもありません。宣言言語は上記の content-lang を使用するか、lang= のように設定する必要があります。 zh" を HTML タグに追加します。

Web ページのコンテンツの説明

例:

もちろん、検索エンジンに伝えるために使用されます

ロボットのアクセス許可を設定します

例:

<meta name="robots" content="NOINDEX,NOFOLLOW">

コードソースはteambitionです。コンテンツパラメータはall、none、index、noindex、follow、です。デフォルトはすべて

その他の設定

作者、著作権など

携帯電話でのメタ使用 (モバイル版が一般的です!)

name="viewport" は、モバイル ページ ウィンドウを設定するために使用されます。これは応答性のために必須であり、ズーム制御によりレイアウトの乱雑さを防ぐこともできます。

width: 幅、device-width はデバイスの幅を表します。

height: 高さ。 device-height

initial-scale: 初期スケーリング率を設定します

minimum-scale: 最小スケーリング率を設定します

maxmum-scale: 最大スケーリング率を設定します

user-scalable: ユーザーがズームできるかどうかを設定します。デフォルトはyesです

name ="format-detection" ページ内の特定の文字列の形式を検出し、その動作を制限します。これは実際には携帯電話番号です。 content="telephone=no" 携帯電話番号リンクとして認識されない番号を設定します

iPhone のブラウジングを設定する デバイスを全画面でブラウズできるかどうか

ステータス バーのスタイルを設定しますiPhone Safari のデフォルトは黒です

参考資料:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/ doc/uid/TP40008193-SW1

http://www.quirksmode .org/mobile/viewports2.html

http://css-tricks.com/snippets/html/owned-meta-tag/

以下は、役立つと思った情報を収集しているものですが、まだテストしていません。

Cookie設定

コードは設定可能なすべてのオプションを説明しています

例:

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">

ウィンドウ表示設定

ページが他のページに埋め込まれるのを防ぐことができます

例: コンテンツオプション: _blank, _上、 _self 、 _parent、a タグの使用方法

<Meta http-equiv="Widow-target" Content="_top">

RSAC 評価

は、Web サイトが理由もなくポルノ Web サイトとしてブロックされるのを防ぐために使用できます

例:

<meta http-equiv="Pics-label" content="(PICS－1.1'http://www.rsac.org/ratingsv01.html' I gen comment 'RSACi North America Sever' by 'inet@microsoft.com' for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">

RSAC的站点：http://www.rsac.org/

缓存控制

只实现了禁止缓存呢

设置缓存的过期时间，格式为GMT ex:

<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0">

 

其它功能

其实IE一些功能应用也多，但终究不是普遍现象，就提供个链接，有兴趣的可以看下

http://msdn.microsoft.com/en-us/library/ie/ms533876(v=vs.85).aspx

 

 

 

PS:有些meta功能过于陈旧，chrome下看不见效果，ie下也不想测试了。