目錄
這次帶給大家常用的<meta>程式碼整理匯總,使用<meta>程式碼的注意事項有哪些,下面就是實戰案例,一起來看一下。 " >這次帶給大家常用的<meta>程式碼整理匯總,使用<meta>程式碼的注意事項有哪些,下面就是實戰案例,一起來看一下。
SEO優化" >SEO優化
网页相关" >网页相关
首頁 web前端 H5教程 常用的程式碼整理匯總

常用的程式碼整理匯總

Jun 04, 2018 am 11:36 AM
meta 整理 匯總

這次帶給大家常用的程式碼整理匯總,使用程式碼的注意事項有哪些,下面就是實戰案例,一起來看一下。

必要屬性

##值 描述
#content some text 定義與http-equiv或name屬性相關的元資訊

可選屬性

#

SEO優化

參考文件

  • #頁面關鍵字,每個網頁應具有描述該網頁內容的一組唯一的關鍵字。
    使用人們可能會搜索,並準確描述網頁上所提供資訊的描述性和代表性關鍵字及短語。標記內容太短,則搜尋引擎可能不會認為這些內容相關。另外標記不應超過 874 個字元。

<span style="font-size: 14px;"><meta name="keywords" content="your tags" /></span>
登入後複製
  • 頁面描述,每個網頁都應有一個不超過 150 個字元且能準確反映網頁內容的描述標籤。

<span style="font-size: 14px;"><meta name="description" content="150 words" /></span>
登入後複製
  • 搜尋引擎索引方式,robotterms是一組使用逗號(,)分割的值,通常有下列幾種取值:none,noindex,nofollow,all,index和follow。確保正確使用nofollow和noindex屬性值。

<span style="font-size: 14px;"><meta name="robots" content="index,follow" /><!--<br/>    all:文件将被检索,且页面上的链接可以被查询;<br/>    none:文件将不被检索,且页面上的链接不可以被查询;<br/>    index:文件将被检索;<br/>    follow:页面上的链接可以被查询;<br/>    noindex:文件将不被检索;<br/>    nofollow:页面上的链接不可以被查询。<br/> --></span>
登入後複製
  • 頁面重新導向與重新整理:content內的數字代表時間(秒),既多少時間後再刷新。如果加url,則會重定向到指定網頁(搜尋引擎能夠自動偵測,也很容易被引擎視作誤導而受到懲罰)。

<span style="font-size: 14px;"><meta http-equiv="refresh" content="0;url=" /></span>
登入後複製
  • 其他

<span style="font-size: 14px;"><meta name="author" content="author name" /> <!-- 定义网页作者 --><meta name="google" content="index,follow" /><meta name="googlebot" content="index,follow" /><meta name="verify" content="index,follow" /></span>
登入後複製

#行動裝置

  • viewport:能優化行動瀏覽器的顯示。如果不是響應式網站,請不要使用initial-scale或停用縮放。
    大部分4.7-5吋設備的viewport寬設為360px;5.5吋設備設為400px;iphone6設為375px;ipone6 plus設為414px。

<span style="font-size: 14px;"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  --></span>
登入後複製
  1. width:寬度(數值/ device-width)(範圍從200 到10,000,預設為980 像素)

  2. height:高度(數值/ device-height)(範圍從223 到10,000)

  3. initial-scale:初始的縮放比例(範圍從>0 到10)

    #
  4. minimum-scale:允许用户缩放到的最小比例

  5. maximum-scale:允许用户缩放到的最大比例

  6. user-scalable:用户是否可以手动缩 (no,yes)

  7. minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)

注意,很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

  • WebApp全屏模式:伪装app,离线应用。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 --></span>
登入後複製
  • 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /></span>
登入後複製
  • 添加到主屏后的标题

<span style="font-size: 14px;"><meta name="apple-mobile-web-app-title" content="标题"></span>
登入後複製
  • 忽略数字自动识别为电话号码

<span style="font-size: 14px;"><meta content="telephone=no" name="format-detection" /> </span>
登入後複製
  • 忽略识别邮箱

<span style="font-size: 14px;"><meta content="email=no" name="format-detection" /></span>
登入後複製
  • 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner

<span style="font-size: 14px;"><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> </span>
登入後複製
  • 其他 参考文档

<span style="font-size: 14px;"><!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微软的老式浏览器 --><meta name="MobileOptimized" content="320"><!-- uc强制竖屏 --><meta name="screen-orientation" content="portrait"><!-- QQ强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- UC强制全屏 --><meta name="full-screen" content="yes"><!-- QQ强制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC应用模式 --><meta name="browsermode" content="application"><!-- QQ应用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 点击无高光 --><meta name="msapplication-tap-highlight" content="no"></span>
登入後複製

网页相关

  • 申明编码

<span style="font-size: 14px;"><meta charset=&#39;utf-8&#39; /></span>
登入後複製
  • 优先使用 IE 最新版本和 Chrome

<span style="font-size: 14px;"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!-- 关于X-UA-Compatible --><meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 --><meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 --><meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 --></span>
登入後複製
  • 浏览器内核控制:国内浏览器很多都是双内核(webkit和Trident),webkit内核高速浏览,IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

<span style="font-size: 14px;"> <meta name="renderer" content="webkit|ie-comp|ie-stand"></span>
登入後複製

国内双核浏览器默认内核模式如下:
1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)
2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)

  • 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。

<span style="font-size: 14px;"><meta http-equiv="Pragma" content="no-cache"></span>
登入後複製
  • Windows 8

<span style="font-size: 14px;"><meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --><meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --></span>
登入後複製
  • 站点适配:主要用于PC-手机页的对应关系。

<span style="font-size: 14px;"><meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--<br/>[wml|xhtml|html5]根据手机页的协议语言,选择其中一种;<br/>url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。<br/> --></span>
登入後複製
  • 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta

<span style="font-size: 14px;"><meta http-equiv="Cache-Control" content="no-siteapp" /></span>
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

H5+Canvas使用案例详解

怎样使用javascript Date Format方法

屬性 #值 ##描述
#http-equiv #content-type / expire / refresh / set-cookie 把content屬性關聯到HTTP頭。
name #author / description / keywords / generator / revised / others #把content 屬性關聯到一個名稱。
content #some text 定義用於翻譯content屬性值的格式。

以上是常用的程式碼整理匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
首個超越GPT4o級開源模型! Llama 3.1洩密:4050億參數,下載連結、模型卡都有了 首個超越GPT4o級開源模型! Llama 3.1洩密:4050億參數,下載連結、模型卡都有了 Jul 23, 2024 pm 08:51 PM

快準備好你的GPU! Llama3.1終於現身了,不過出處卻不是Meta官方。今日,Reddit上新版Llama大模型洩漏的消息遭到了瘋傳,除了基礎模型,還包括8B、70B和最大參數的405B的基準測試結果。下圖為Llama3.1各版本與OpenAIGPT-4o、Llama38B/70B的比較結果。可以看到,即使是70B的版本,也在多項基準上超過了GPT-4o。圖源:https://x.com/mattshumer_/status/1815444612414087294顯然,3.1版本的8B和70

六年種方式快速體驗最新發布的 Llama 3! 六年種方式快速體驗最新發布的 Llama 3! Apr 19, 2024 pm 12:16 PM

Meta昨晚發布了Llama38B和70B模型,Llama3指令調整模型針對對話/聊天用例進行了微調和優化,在常見基準測試中優於許多現有的開源聊天模型。例如,Gemma7B和Mistral7B。 Llama+3模型對數據和規模進行了提升,達到了新的高度。它是在Meta最近發布的兩個客製化的24KGPU叢集上,對超過15Ttoken的資料進行訓練的。這個訓練資料集比Llama2大7倍,包含多4倍的程式碼。這使得Llama模型的能力達到了目前的最高水平,它支援8K以上的文字長度,是Llama2的兩倍。下面

新款經濟實惠的 Meta Quest 3S VR 頭戴裝置出現在 FCC 上,暗示即將推出 新款經濟實惠的 Meta Quest 3S VR 頭戴裝置出現在 FCC 上,暗示即將推出 Sep 04, 2024 am 06:51 AM

Meta Connect 2024 活動定於 9 月 25 日至 26 日舉行,在本次活動中,該公司預計將推出一款價格實惠的新型虛擬實境耳機。據傳這款 VR 耳機是 Meta Quest 3S,它似乎已經出現在 FCC 清單上。這個建議

Llama3突然來襲!開源社群再次沸騰:GPT4級模式自由訪問時代到來 Llama3突然來襲!開源社群再次沸騰:GPT4級模式自由訪問時代到來 Apr 19, 2024 pm 12:43 PM

Llama3來了!就在剛剛,Meta官網上新,官方宣布了Llama380億和700億參數版本。並且推出即為開源SOTA:Meta官方數據顯示,Llama38B和70B版本在各自參數規模上超越一眾對手。 8B模型在MMLU、GPQA、HumanEval等多項基準上都勝過Gemma7B和Mistral7BInstruct。而70B模型則超越了閉源的當紅炸子雞Claude3Sonnet,和谷歌的GeminiPro1.5打得有來有回。 Huggingface連結一出,開源社群再次沸騰。眼尖的盲生還第一時間發現

最強模型Llama 3.1 405B正式發布,祖克柏:開源引領新時代 最強模型Llama 3.1 405B正式發布,祖克柏:開源引領新時代 Jul 24, 2024 pm 08:23 PM

剛剛,大家期待已久的Llama3.1官方正式發售了! Meta官方發出了「開源引領新時代」的聲音。在官方部落格中,Meta表示:「直到今天,開源大語言模型在功能和效能方面大多落後於封閉模型。現在,我們正在迎來一個開源引領的新時代。我們公開發布MetaLlama3.1405B,我們認為這是世界上最大、功能最強大的開源基礎模型。長文《OpenSourceAIIsthePathForward》,

分析師討論傳聞中的 Meta Quest 3S VR 耳機的發布定價 分析師討論傳聞中的 Meta Quest 3S VR 耳機的發布定價 Aug 27, 2024 pm 09:35 PM

自 Meta 首次發布 Quest 3(亞馬遜售價 499.99 美元)以來,已經過去一年多了。此後,蘋果推出了價格昂貴得多的 Vision Pro,而位元組跳動現在在中國推出了 Pico 4 Ultra。然而,有

預計2024年,Meta計畫推出名為'Orion'的革命性AR眼鏡原型 預計2024年,Meta計畫推出名為'Orion'的革命性AR眼鏡原型 Jan 04, 2024 pm 09:35 PM

12月24日消息,meta,一家在社群媒體界有著巨大影響力的科技企業,現正將其雄厚的期望寄託於擴增實境(AR)眼鏡,一種被認為是下一代運算平台的技術。近期,meta的技術主管安德魯・博斯沃思(AndrewBosworth)在一次採訪中透露,該公司預計在2024年推出一款代號為「Orion」的先進AR眼鏡原型。長期以來,meta在AR技術上的投入絲毫不亞於其他領域,他們投入了巨額資金,達數十億美元,旨在打造一款能與iPhone相媲美的革命性產品。儘管去年他們宣布終止Orion眼鏡的大規模生產計劃,

META是什麼意思 META是什麼意思 Mar 05, 2024 pm 12:18 PM

META通常指一個名為Meta宇宙(Metaverse)的虛擬世界或平台。 meta元宇宙,是人類運用數位科技建構的,由現實世界映射或超越現實世界,可與現實世​​界互動的虛擬世界 ,具備新型社會體系的數位生活空間。

See all articles