整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
信最近很多小伙伴在逛Dribbble時(shí)候，發(fā)現(xiàn)最近流行一波新的設(shè)計(jì)風(fēng)格，和以往不同的是，這次趨勢(shì)又回到之前擬物化了，但它與純擬物化還是有區(qū)別的，現(xiàn)在它有一個(gè)流行詞語(yǔ)叫“新擬態(tài)”，今天就和大家分享下國(guó)外一位設(shè)計(jì)師對(duì)這個(gè)趨勢(shì)的看法！
譯文如下：
雖然UI以各種擬態(tài)化的形式存在（例如，您的桌面OS垃圾桶），現(xiàn)在這種風(fēng)格的趨勢(shì)更加明顯。正如卡米爾·法拉納（Kamil Falana）指出的那樣，從無(wú)生命的“表達(dá)”到現(xiàn)實(shí)主義的過(guò)渡開(kāi)始出現(xiàn)。
不久前，我們還觀察到，這種變化開(kāi)始在我們身邊發(fā)生，蘋(píng)果（iOS13系統(tǒng)）就是一個(gè)很好的例子。向最小化設(shè)計(jì)和輕擬物化發(fā)展，最終帶來(lái)了無(wú)紋理3D視覺(jué)感官。受到了大家的喜歡，來(lái)看一張高清圖。
Apple Pencil
如下圖設(shè)計(jì)風(fēng)格，在dribbble上獲得認(rèn)可度比較高！
Dribbble用戶alexplyuto的作品獲得了四千多次贊，并帶動(dòng)了這一趨勢(shì)。
這種設(shè)計(jì)引發(fā)了一波設(shè)計(jì)潮流趨勢(shì)，盡管其中的有部分并沒(méi)有實(shí)際意義（可滑動(dòng)的后退箭頭？），但這使我們對(duì)UI 再次產(chǎn)生濃厚的興趣！
備注：可看出目前扁平化設(shè)計(jì)過(guò)于雷同，用戶審美疲勞。偶爾出現(xiàn)新設(shè)計(jì)趨勢(shì)風(fēng)格，反而更個(gè)給各位設(shè)計(jì)師們帶來(lái)新鮮感！
由于按鈕的視覺(jué)表現(xiàn)看著變化不大（因?yàn)樾×艘恍恢庇^），因此我們將重點(diǎn)放在實(shí)際的卡片概念上，以使這種視覺(jué)表現(xiàn)更能直觀感受出來(lái)。
擬態(tài)化卡片（左圖）、現(xiàn)代材料卡片（右圖）
如現(xiàn)代材料（升級(jí)版）卡片，通常是在畫(huà)布中以浮層的形式出現(xiàn)，厚度更加明顯。陰影既可以增加深度，也可以在很多情況下定義形狀本身，因?yàn)殛幱巴ǔＪ菬o(wú)邊界的。
擬態(tài)化卡片從背景中突出。它是由與背景顏色完全相同的卡片制成的凸起形狀。當(dāng)我們從側(cè)面看時(shí)，它不會(huì)浮起來(lái)。
通過(guò)調(diào)節(jié)兩個(gè)陰影，一個(gè)陰影為負(fù)值，另一個(gè)陰影為正值，很容易實(shí)現(xiàn)此效果。但是要使其正常顯示，我們的背景不能是全黑或全白。它至少需要一點(diǎn)色調(diào)，以便可見(jiàn)“深色”和“淺色”陰影。您可以使用任何色調(diào)作為背景，以便根據(jù)您的選擇將其變暖或變冷。但是必須能看到深色或者淺色投影。
這是例子，根據(jù)您的喜好進(jìn)行調(diào)整：
這種風(fēng)格的主要好處是“新鮮”（至少持續(xù)很長(zhǎng)時(shí)間）。它為界面帶來(lái)了“新感覺(jué)”，并使其脫穎而出。它也可以與其他樣式混合使用，這樣就避免很呆板整個(gè)畫(huà)面變成這種柔軟凸起的效果。
到目前為止，有一些問(wèn)題需要解決。我們發(fā)現(xiàn)了兩個(gè)主要問(wèn)題：
圖形與背景對(duì)比度的主要問(wèn)題是，當(dāng)它們都是相同的顏色時(shí)，就沒(méi)有可測(cè)量的對(duì)比度；客觀上存在陰影，因此我們可以近似并嘗試測(cè)量其外部的第一個(gè)像素。
在上面的示例中，我們得出了這些對(duì)比度值：
如您所見(jiàn)，現(xiàn)代材料卡片和新擬態(tài)化卡片的對(duì)比度都非常低。并且卡片本身并不用于主要的操作控件上（只是一個(gè)背景），只要我們保持按鈕突出并具有足夠高的對(duì)比度，就可以了。
兩者之間的差異很小，如果我們想為卡片使用更好的對(duì)比度，我們就必須這樣做：
而且由于幾乎沒(méi)有人會(huì)嘗試使用如此強(qiáng)烈的陰影，這意味著其余UI元素必須可訪問(wèn)。這種假設(shè)得出的結(jié)論是，如果我們通過(guò)版式，相近度和與重要元素的對(duì)比來(lái)進(jìn)行正確的層次劃分，那么這些卡片/凸起的塑料卡片并不那么重要。
尚未對(duì)此進(jìn)行測(cè)試（我將嘗試找到時(shí)間做這件事），但現(xiàn)在我們假設(shè)下面元素的兩個(gè)“版本”均為“確定”。即使有些人看不到陰影，也有足夠的對(duì)比度讓他們看到圖標(biāo)并“使用它”。
盡管“按鈕”看起來(lái)像按鈕，但是如果圖標(biāo)本身與背景形成鮮明對(duì)比，它將仍然有效。因此，這里要記住的主要事情是，如果要使用這種樣式，請(qǐng)以足夠高的對(duì)比度保留所有重要元素。
畢竟，大多數(shù)“現(xiàn)代材料”卡片視圖也不會(huì)通過(guò)陰影來(lái)做對(duì)比。
但是，如果我們決定將組件用作按鈕而不是卡片，則會(huì)出現(xiàn)可訪問(wèn)性的主要問(wèn)題。
我們可以像下面的示例一樣輕松創(chuàng)建帶有內(nèi)部陰影的按下?tīng)顟B(tài)。
對(duì)比度測(cè)試
這里的問(wèn)題實(shí)際上很大。
此按下?tīng)顟B(tài)的對(duì)比度太小，不足以表示差異。是否可以通過(guò)改變的其余部分來(lái)表達(dá)按鈕的狀態(tài)，這里有一些想法，例如使用輪廓和填充圖標(biāo)，下劃線或甚至用顏色填充按下?tīng)顟B(tài)。
嘗試各種想法，但狀態(tài)必須立即被識(shí)別。
開(kāi)發(fā)實(shí)現(xiàn)其實(shí)它比我們認(rèn)為的在CSS中實(shí)現(xiàn)“軟陰影”外觀要容易。我們尚未研究Swift和Kotlin，但我認(rèn)為這不應(yīng)該成為問(wèn)題。
https://neumorphism.io/#55b9f3（實(shí)現(xiàn)新擬態(tài)效果CSS代碼）
剛才說(shuō)的形狀只是一方面。這種設(shè)計(jì)新樣式還帶有更多的按鈕和圖標(biāo)。通常情況下，我們只需要回到“過(guò)去的美好時(shí)光”并使用位圖。這似乎是一種回歸，不必?fù)?dān)心-這是沒(méi)有必要的。
您可以輕松地將可開(kāi)發(fā)的設(shè)計(jì)與這些卡片形狀組合在一起（新擬態(tài)卡片），從而獲得很好的效果。
作者練習(xí)的稿子（還未發(fā)布，還在設(shè)計(jì)中）
盡管這一新趨勢(shì)影響了許多設(shè)計(jì)師，但對(duì)比以前使用的卡片組件可訪問(wèn)性問(wèn)題相比，它的問(wèn)題并不那么嚴(yán)重。
所以去瘋狂的順應(yīng)這一趨勢(shì)，并對(duì)其進(jìn)行調(diào)整以使其成為您的趨勢(shì)。UI設(shè)計(jì)師的工作就是需要不斷來(lái)回挑戰(zhàn)自我，探索最新潮流，以符合產(chǎn)品審美。如果沒(méi)有這種不斷的探索的精神，所有產(chǎn)品將再次看起來(lái)相同，同質(zhì)化嚴(yán)重。
但也要記住，每個(gè)新趨勢(shì)都帶有不可抗拒性因素，如果要使用，必須精心的設(shè)計(jì)探索， 驗(yàn)證后才拿去面對(duì)用戶。
本篇文章，作者通過(guò)對(duì)新擬態(tài)設(shè)計(jì)趨勢(shì)分析，在文中提及“新擬態(tài)”和以前材料卡片的區(qū)別，同時(shí)證實(shí)了新擬態(tài)風(fēng)格優(yōu)勢(shì)！但也存在一定的弊端！如何去權(quán)衡與設(shè)計(jì)的把控，需要設(shè)計(jì)師們多去研究探索！
就我個(gè)人而言，我認(rèn)為目前新擬態(tài)設(shè)計(jì)風(fēng)格，其實(shí)更適合像車(chē)機(jī)那種偏實(shí)體硬件的HMI設(shè)計(jì)又或者智能硬件平臺(tái)，智能櫥窗，智能鏡等，但是如果在移動(dòng)端去使用，那么需要去適當(dāng)做簡(jiǎn)化。如何去簡(jiǎn)化以適應(yīng)新趨勢(shì)，這需要不斷去嘗試。
最后作者也說(shuō)了新擬態(tài)設(shè)計(jì)風(fēng)格，需要注意的是對(duì)比度問(wèn)題，需要將該效果應(yīng)用到合適的位置，如果是操作組件上，那么它的反饋態(tài)和常態(tài)都需要有明顯的對(duì)比。
這一趨勢(shì)如果要盛行起來(lái)，需要大廠來(lái)引領(lǐng)，比如今年蘋(píng)果會(huì)出現(xiàn)的IOS14或者Google材料3.0到來(lái)。扁平化是蘋(píng)果帶來(lái)的，材料設(shè)計(jì)師google帶來(lái)的。
如今新擬態(tài)才初出茅廬，還未被廣泛使用，需要有先驅(qū)者引領(lǐng)。畢竟國(guó)內(nèi)的環(huán)境大家都不敢冒險(xiǎn)去嘗試運(yùn)用到線上！
原文：https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6
作者：Michal Malewicz
編譯作者：Tony，微信公眾號(hào)：功夫UX，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng)，簡(jiǎn)歷指導(dǎo)，每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn)，擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì)。
本文由@Tony 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
T之家 7 月 11 日消息，微軟公司在 7 月補(bǔ)丁星期二發(fā)布的 Windows 10、Windows 11 系統(tǒng)累積更新中，修復(fù)了追蹤編號(hào)為 CVE-2024-38112 的零日漏洞。
該零日漏洞由 Check Point Research 的安全專(zhuān)家李海飛（Haifei Li，音譯）于 2023 年 1 月發(fā)現(xiàn)，是一個(gè)高度嚴(yán)重的 MHTML 欺騙問(wèn)題，有證據(jù)表明有黑客在過(guò)去 18 個(gè)月里，利用該漏洞發(fā)起惡意攻擊，可以繞過(guò) Windows 10、Windows 11 系統(tǒng)的安全功能。
該專(zhuān)家發(fā)現(xiàn)網(wǎng)絡(luò)攻擊者通過(guò)分發(fā) Windows Internet 快捷方式文件（.url），以欺騙 PDF 等看起來(lái)合法的文件，用戶一旦點(diǎn)開(kāi)這些文件，就會(huì)下載并啟動(dòng) HTA 以安裝密碼竊取惡意軟件。
Internet 快捷方式文件只是一個(gè)文本文件，其中包含各種配置設(shè)置，如顯示什么圖標(biāo)、雙擊時(shí)打開(kāi)什么鏈接等信息。保存為 .url 文件并雙擊后，Windows 將在默認(rèn)網(wǎng)絡(luò)瀏覽器中打開(kāi)配置的 URL。
不過(guò)攻擊者發(fā)現(xiàn)可以通過(guò)在 URL 指令中使用 mhtml: URI 處理程序，來(lái)強(qiáng)制 Internet Explorer 打開(kāi)指定的 URL，如下圖所示：
IT之家注：MHTML 是一種 "聚合 HTML 文檔的 MIME 封裝" 文件，是 Internet Explorer 中引入的一種技術(shù)，可將包括圖像在內(nèi)的整個(gè)網(wǎng)頁(yè)封裝成一個(gè)單一的檔案。
攻擊者使用 mhtml: URI 啟動(dòng) URL 后，Windows 會(huì)自動(dòng)在 Internet Explorer 中啟動(dòng) URL，而不是默認(rèn)瀏覽器。
漏洞研究人員 Will Dormann 稱，在 Internet Explorer 中打開(kāi)網(wǎng)頁(yè)會(huì)給攻擊者帶來(lái)額外的好處，下載惡意文件時(shí)安全警告較少。
盡管微軟早在兩年前就宣布停止支持該瀏覽器，并以 Edge 代替其所有實(shí)用功能，但這款過(guò)時(shí)的瀏覽器仍可被惡意調(diào)用和利用。
外一個(gè)研究團(tuán)隊(duì)進(jìn)行了一項(xiàng)HTML研究，該研究基于從Google排名前20位的搜索結(jié)果中收集的大約800萬(wàn)個(gè)索引頁(yè)，其中包含3000萬(wàn)個(gè)關(guān)鍵字
他們撰寫(xiě)了有關(guān)標(biāo)記結(jié)果的信息，以及排名前20的Google結(jié)果頁(yè)如何實(shí)現(xiàn)它們的內(nèi)容，然后進(jìn)行了進(jìn)一步介紹，并獲得了有關(guān)它們的HTML 使用情況見(jiàn)解。
與SEO有什么關(guān)系？
HTML的編寫(xiě)方式?jīng)Q定了用戶看到的內(nèi)容以及搜索引擎如何解釋網(wǎng)頁(yè)。有效，格式正確的HTML頁(yè)面還可以減少搜索引擎可能對(duì)結(jié)構(gòu)化數(shù)據(jù)，元數(shù)據(jù)，語(yǔ)言或編碼的誤解。
我們打算從一開(kāi)始就做一次技術(shù)性SEO審核：HTML用法的細(xì)分以及結(jié)果與現(xiàn)代SEO技術(shù)和最佳實(shí)踐的關(guān)系。
在本文中，我們將解決Google可以理解的元標(biāo)記，JSON-LD結(jié)構(gòu)化數(shù)據(jù)，語(yǔ)言檢測(cè)，標(biāo)題用法，社交鏈接和元分布，AMP等問(wèn)題。
Google可以理解的元標(biāo)記
當(dāng)談到主要的搜索引擎作為流量來(lái)源時(shí)，可悲的是只有谷歌和其余的人，最近Duckduckgo獲得了關(guān)注，Bing幾乎不存在。
因此，在本部分中，我們將僅關(guān)注Google在Search Console幫助中心中列出的meta標(biāo)簽。
餅圖顯示了Google可以理解的meta標(biāo)簽總數(shù)，以下部分對(duì)此進(jìn)行了詳細(xì)說(shuō)明。
<meta name=“描述” content=“ ...”>
元描述是?150個(gè)字符的摘要，總結(jié)了頁(yè)面的內(nèi)容。當(dāng)搜索的短語(yǔ)包含在描述中時(shí)，搜索引擎會(huì)在搜索結(jié)果中顯示元描述。
選擇器 計(jì)數(shù)
<meta name=“ description” content=“ *”>4,391,448
<meta name=“描述” content=“”>374,649
<meta name=“ description”>13,831
在極端情況下，我們發(fā)現(xiàn)了685,341個(gè)元內(nèi)容少于30個(gè)字符的元和1,293,842個(gè)元內(nèi)容文本超過(guò)160個(gè)字符的元。
<標(biāo)題>
從技術(shù)上講，標(biāo)題不是meta標(biāo)記，而是與meta name=“ description”結(jié)合使用。
當(dāng)涉及SEO時(shí)，這是兩個(gè)最重要的HTML標(biāo)簽之一。根據(jù)W3C，這也是必須的，這意味著缺少標(biāo)題標(biāo)簽的任何頁(yè)面均無(wú)效。
研究表明，如果您將標(biāo)題保持在合理的60個(gè)字符以內(nèi)，則可以期望在SERP中正確顯示標(biāo)題。過(guò)去，有跡象表明Google的搜索結(jié)果標(biāo)題長(zhǎng)度有所延長(zhǎng)，但這并不是永久性的變化。
考慮到以上所有情況，我們發(fā)現(xiàn)在全部6,263,396個(gè)標(biāo)題中，有1,846,642個(gè)標(biāo)題標(biāo)簽似乎太長(zhǎng)（超過(guò)60個(gè)字符），而1,985,020個(gè)標(biāo)題的長(zhǎng)度卻認(rèn)為太短（少于30個(gè)字符）。
餅狀圖顯示了標(biāo)題標(biāo)簽的長(zhǎng)度分布，長(zhǎng)度小于30個(gè)字符為31.7％，長(zhǎng)度大于60個(gè)字符為約29.5％。
標(biāo)題太短不應(yīng)該是問(wèn)題，畢竟，這取決于網(wǎng)站業(yè)務(wù)，是主觀的。意義可以用更少的詞來(lái)表達(dá)，但這絕對(duì)是優(yōu)化機(jī)會(huì)浪費(fèi)的跡象。
選擇器 計(jì)數(shù)
<title> * </ title> 6,263,396
缺少<title>標(biāo)簽 1,285,738
另一個(gè)有趣的事情是，在Google排名第1-2頁(yè)的網(wǎng)站中，有351,516個(gè)（約占750萬(wàn)個(gè)的5％）在其索引頁(yè)上使用相同的標(biāo)題和h1文本。
另外，您知道嗎，使用HTML5，您只需要指定HTML5文檔類(lèi)型和標(biāo)題即可擁有完全有效的頁(yè)面？
<！DOCTYPE html> <title>紅色</ title>
<meta name=“ robots | googlebot”>
這些元標(biāo)記可以控制搜索引擎抓取和編制索引的行為。機(jī)器人元標(biāo)記適用于所有搜索引擎，而“ googlebot”元標(biāo)記特定于Google。”
- Google可以理解的元標(biāo)記
選擇器 計(jì)數(shù)
<meta name=“ robots” content=“ ...，...”> 1,577,202
<meta name=“ googlebot” content=“ ...，...”> 139,458
帶有元漫游器的HTML代碼段及其內(nèi)容參數(shù)。
因此，漫游器元指令可向搜索引擎提供有關(guān)如何對(duì)頁(yè)面內(nèi)容進(jìn)行爬網(wǎng)和索引的說(shuō)明。除了googlebot元數(shù)很少之外，我們很想知道最常見(jiàn)的robots參數(shù)，因?yàn)橐粋€(gè)巨大的誤解是您必須在HTML的頭部添加robots meta標(biāo)簽。這是前5名：
選擇器 計(jì)數(shù)
<meta name=“ robots” content=“ index，follow”> 632822
<meta name=“ robots” content=“ index”>180,226
<meta name=“ robots” content=“ noodp”>115,128
<meta name=“ robots” content=“ all”>111,777
<meta name=“ robots” content=“ nofollow”>83,639
<meta name=“ google” content=“ nositelinkssearchbox”>
“當(dāng)用戶搜索您的網(wǎng)站時(shí)，Google搜索結(jié)果有時(shí)會(huì)顯示特定于您網(wǎng)站的搜索框，以及指向您網(wǎng)站的其他直接鏈接。此元標(biāo)記告訴Google不要顯示附加鏈接搜索框。”
- Google可以理解的元標(biāo)記
選擇器計(jì)數(shù)
<meta name=“ google” content=“ nositelinkssearchbox”>1,263
毫不奇怪，當(dāng)網(wǎng)站出現(xiàn)在搜索結(jié)果中時(shí)，很少有網(wǎng)站選擇明確告訴Google不要顯示附加鏈接搜索框。
<meta name=“ google” content=“ notranslate”>
“此meta標(biāo)簽告訴Google您不希望我們?yōu)樵擁?yè)面提供翻譯。”- Google理解的meta標(biāo)簽
在某些情況下，可能不希望將您的內(nèi)容提供給更多的用戶。就像上面的Google支持答案中所說(shuō)的那樣，此meta標(biāo)簽告訴Google您不希望他們提供此頁(yè)面的翻譯。
選擇器 計(jì)數(shù)
<meta name=“ google” content=“ notranslate”> 7,569
<meta name=“ google-site-verification” content=“ ...”>
“您可以在網(wǎng)站的頂級(jí)頁(yè)面上使用此標(biāo)簽來(lái)驗(yàn)證Search Console的所有權(quán)。”
- Google可以理解的元標(biāo)簽
選擇器 計(jì)數(shù)
<meta name=“ google-site-verification” content=“ ...”>1,327,616
當(dāng)我們討論這個(gè)主題時(shí)，您是否知道如果您是Google Analytics（分析）媒體資源的經(jīng)過(guò)驗(yàn)證的所有者，那么Google現(xiàn)在會(huì) 在Search Console中自動(dòng)驗(yàn)證該網(wǎng)站嗎？
<meta charset=“ ...”>
“這定義了頁(yè)面的內(nèi)容類(lèi)型和字符集。”
- Google可以理解的元標(biāo)記
這基本上是好的元標(biāo)記之一。它定義頁(yè)面的內(nèi)容類(lèi)型和字符集。考慮到下表，我們注意到我們分析的索引頁(yè)中只有大約一半定義了元字符集。
選擇器 計(jì)數(shù)
<meta charset=“ ...”> 3,909,788
<meta http-equiv=“刷新” content=“ ...; url=...”>
“此元標(biāo)記會(huì)在一段時(shí)間后將用戶發(fā)送到新的URL，有時(shí)會(huì)用作一種簡(jiǎn)單的重定向形式。”
- Google理解的元標(biāo)記
最好使用301重定向而不是元刷新來(lái)重定向您的網(wǎng)站，尤其是當(dāng)我們假設(shè)30倍重定向不會(huì)丟失PageRank 且W3C 建議不要使用此標(biāo)記時(shí)。Google也不是粉絲，建議您使用服務(wù)器端301重定向。
選擇器 計(jì)數(shù)
<meta http-equiv=“刷新” content=“ ...; url=...”>7,167
從我們解析的總共750萬(wàn)個(gè)索引頁(yè)中，我們發(fā)現(xiàn)了7167個(gè)使用上述重定向方法的頁(yè)。作者并不總是擁有對(duì)服務(wù)器端技術(shù)的控制權(quán)，顯然他們使用此技術(shù)來(lái)啟用客戶端重定向。
此外，使用Workers是一種最先進(jìn)的替代方案，目的是為了克服使用傳統(tǒng)技術(shù)堆棧和平臺(tái)限制時(shí)遇到的問(wèn)題。
<meta name=“ viewport” content=“ ...”>
“此標(biāo)簽告訴瀏覽器如何在移動(dòng)設(shè)備上呈現(xiàn)頁(yè)面。此標(biāo)簽的存在向Google表示該頁(yè)面適合移動(dòng)設(shè)備。”
- Google可以理解的元標(biāo)簽
選擇器 計(jì)數(shù)
<meta name=“ viewport” content=“ ...”> 4,992,791
從2019年7月1日開(kāi)始，所有網(wǎng)站開(kāi)始使用Google的移動(dòng)優(yōu)先索引編制索引。Lighthouse檢查文件頭中是否有meta name=“ viewport”標(biāo)記，因此無(wú)論您使用的是哪種框架或CMS，此meta都應(yīng)位于每個(gè)網(wǎng)頁(yè)上。
考慮到上述情況，我們可以預(yù)期在分析的750萬(wàn)個(gè)索引頁(yè)面中，有超過(guò)4,992,791個(gè)網(wǎng)站的網(wǎng)站在其頭部使用了有效的meta name=“ viewport”。
設(shè)計(jì)適合移動(dòng)設(shè)備的網(wǎng)站可確保您的頁(yè)面在所有設(shè)備上都能正常運(yùn)行，因此請(qǐng)確保 此處的網(wǎng)頁(yè)適合移動(dòng)設(shè)備。
<meta name=“ rating” content=“ ...” />
“將網(wǎng)頁(yè)標(biāo)記為包含成人內(nèi)容，以表示該網(wǎng)頁(yè)已被安全搜索結(jié)果過(guò)濾。”
- Google可以理解的元標(biāo)記
選擇器 計(jì)數(shù)
<meta name=“ rating” content=“ ...” />133,387
此標(biāo)簽用于表示內(nèi)容的成熟度等級(jí)。直到最近，它才被添加到Google可以理解的meta標(biāo)簽中。請(qǐng)查看Kate Morris撰寫(xiě)的有關(guān)如何標(biāo)記成人內(nèi)容的文章。
JSON-LD結(jié)構(gòu)化數(shù)據(jù)
結(jié)構(gòu)化數(shù)據(jù)是一種標(biāo)準(zhǔn)化格式，用于提供有關(guān)頁(yè)面的信息并分類(lèi)頁(yè)面內(nèi)容。結(jié)構(gòu)化數(shù)據(jù)的格式可以是Microdata，RDFa和JSON-LD，所有這些都可以幫助Google了解您網(wǎng)站的內(nèi)容并觸發(fā)頁(yè)面的特殊搜索結(jié)果功能。
在與出色的Dan Shure交談時(shí)，他提出了一個(gè)好主意，可以在搜索結(jié)果和“知識(shí)圖”中查找結(jié)構(gòu)化數(shù)據(jù)，例如組織的徽標(biāo)。
在本部分中，我們將僅使用JSON-LD（用于鏈接數(shù)據(jù)的JavaScript對(duì)象表示法）來(lái)收集結(jié)構(gòu)化數(shù)據(jù)信息。無(wú)論如何，這是Google建議的有關(guān)網(wǎng)頁(yè)含義的線索。
一些有用的信息：
高級(jí)網(wǎng)絡(luò)排名的HTML研究?jī)H依賴于分析索引頁(yè)面。有趣的是，即使指南中未對(duì)此進(jìn)行說(shuō)明，但Google似乎并不關(guān)心索引頁(yè)上的結(jié)構(gòu)化數(shù)據(jù)，正如幾年前Gary Illyes 在Stack Overflow回答中所說(shuō)的那樣。但是，在Google理解的 JSON-LD結(jié)構(gòu)化數(shù)據(jù)類(lèi)型上，我們發(fā)現(xiàn)了總共2,727,045個(gè)功能：
餅圖顯示了Google可以理解的結(jié)構(gòu)化數(shù)據(jù)類(lèi)型，其中“附加鏈接”搜索框?yàn)?9.7％（最高值）。
結(jié)構(gòu)化數(shù)據(jù)功能 計(jì)數(shù)
文章 35,961
面包屑 30,306
書(shū) 143
輪播 13,884
公司聯(lián)系方式 41,588
課程 676
評(píng)論家評(píng)論 2,740
數(shù)據(jù)集 28
雇主總評(píng)分 7
事件 18,385
事實(shí)檢查 7
常見(jiàn)問(wèn)題頁(yè)面 16
如何 8
招聘啟事 355
現(xiàn)場(chǎng)直播 232
當(dāng)?shù)氐纳虡I(yè) 200,974
商標(biāo) 442,324
媒體 1,274
占用 0
產(chǎn)品 16,090
問(wèn)答頁(yè)面 20
食譜 434
評(píng)論片段 72,732
網(wǎng)站連結(jié)搜尋框 1,354,754
社會(huì)概況 478,099
軟件應(yīng)用 780
可以說(shuō) 516
訂閱和付費(fèi)內(nèi)容 363
視頻 14,349
rel=規(guī)范
rel=canonical元素（通常稱為“規(guī)范鏈接”）是一種HTML元素，可幫助網(wǎng)站管理員防止重復(fù)的內(nèi)容問(wèn)題。它通過(guò)指定“規(guī)范URL”（網(wǎng)頁(yè)的“首選”版本）來(lái)實(shí)現(xiàn)。
選擇器 計(jì)數(shù)
<link rel=canonical href=“ *”> 3,183,575
meta name=“ keywords”
<meta name=“ keywords”>已過(guò)時(shí)并且Google不再使用它已經(jīng)不是什么新鮮事了。對(duì)于大多數(shù)搜索引擎來(lái)說(shuō)，<meta name=“ keywords”>似乎也是垃圾郵件信號(hào)。
“盡管主要搜索引擎不使用元關(guān)鍵字進(jìn)行排名，但是它們對(duì)于像Solr這樣的現(xiàn)場(chǎng)搜索引擎非常有用。”
- JP Sherman解釋了為什么如今這種過(guò)時(shí)的元數(shù)據(jù)仍然有用。
選擇器 計(jì)數(shù)
<meta name=“ keywords” content=“ *”> 2,577,850
<meta name=“ keywords” content=“”> 256,220
<meta name=“ keywords”> 14,127
標(biāo)題
在750萬(wàn)頁(yè)中，h1（59.6％）和h2（58.9％）是使用最多的28個(gè)元素之一。盡管如此，收集所有的標(biāo)題后，我們發(fā)現(xiàn)，H3是出場(chǎng)最多的標(biāo)題- 29565562 3H公司出70428376個(gè)總標(biāo)題的發(fā)現(xiàn)。
隨機(jī)事實(shí)：
缺少alt標(biāo)簽
分析這組數(shù)據(jù)后，這個(gè)永恒的SEO和可訪問(wèn)性問(wèn)題似乎仍然很常見(jiàn)。在總共669,591,743張圖像中，幾乎90％缺少alt屬性或?qū)⑵渑c空白值一起使用。
餅狀圖顯示了img標(biāo)簽的alt屬性分布，其中缺失的alt占主導(dǎo)地位-在我們發(fā)現(xiàn)的約6.7億張圖像中，占81.7％。
選擇器 計(jì)數(shù)
img 669,591,743
img alt=“ *” 79,953,034
img alt=“” 42,815,769
img w / missing alt 546,822,940
語(yǔ)言檢測(cè)
根據(jù)規(guī)范，用戶代理可以使用通過(guò)lang屬性指定的語(yǔ)言信息以各種方式控制渲染。
我們?cè)诖颂幐信d趣的部分是有關(guān)“輔助搜索引擎”的。
“ HTML lang屬性用于識(shí)別網(wǎng)絡(luò)上文本內(nèi)容的語(yǔ)言。這些信息有助于搜索引擎返回特定于語(yǔ)言的結(jié)果，屏幕閱讀器也可以使用這些信息來(lái)切換語(yǔ)言配置文件，以提供正確的口音和發(fā)音。”
- LéonieWatson
不久前，約翰·穆勒（John Mueller）說(shuō)Google忽略了HTML lang屬性，而是建議使用鏈接hreflang。Google Search Console文檔指出，Google使用hreflang標(biāo)記將用戶的語(yǔ)言偏好與頁(yè)面的正確變體進(jìn)行匹配。
條形圖顯示750萬(wàn)個(gè)索引頁(yè)中有65％使用html元素上的lang屬性，同時(shí)21.6％至少使用鏈接hreflang。
在我們可以查看的750萬(wàn)個(gè)索引頁(yè)中，有4,903,665個(gè)使用html元素上的lang屬性。大約是65％！
關(guān)于hreflang屬性，這表明存在一個(gè)多語(yǔ)言網(wǎng)站，我們發(fā)現(xiàn)大約有1,631,602個(gè)頁(yè)面—這意味著大約21.6％的索引頁(yè)面至少使用 鏈接rel=“ alternate” href=“ *” hreflang=“ *”元素。
Google跟蹤代碼管理器
從一開(kāi)始，Google Analytics（分析）的主要任務(wù)就是生成有關(guān)您的網(wǎng)站的報(bào)告和統(tǒng)計(jì)信息。但是，如果要將某些頁(yè)面分組在一起以查看人們?nèi)绾螢g覽該渠道，則需要一個(gè)唯一的Google Analytics（分析）標(biāo)簽。這就是事情變得復(fù)雜的地方。
Google跟蹤代碼管理器使您更輕松地進(jìn)行以下操作：
我們搜索了* googletagmanager.com / gtm.js參考資料，發(fā)現(xiàn)大約有345,979個(gè)頁(yè)面正在使用Google跟蹤代碼管理器。
rel=“ nofollow”
“ Nofollow”為網(wǎng)站管理員提供了一種告訴搜索引擎“不遵循此頁(yè)面上的鏈接”或“不遵循此特定鏈接”的方法。
Google不遵循這些鏈接，并且同樣不轉(zhuǎn)讓權(quán)益。考慮到這一點(diǎn)，我們對(duì)rel=“ nofollow”數(shù)字感到好奇。我們?cè)?50萬(wàn)個(gè)索引頁(yè)面中找到了總共12,828,286個(gè)rel=“ nofollow”鏈接，計(jì)算得出的平均每頁(yè)為1.69 rel=“ nofollow”。
上個(gè)月，Google宣布了兩個(gè)新的鏈接屬性值，用于標(biāo)記鏈接的nofollow屬性：rel=“ sponsored”和rel=“ ugc”。我建議您閱讀Cyrus Shepard 關(guān)于Google的nofollow，贊助商和ugc鏈接如何影響SEO的文章，了解Google更改nofollow的原因，nofollow鏈接的排名影響等等。
賽勒斯·謝潑德（Cyrus Shepard）的文章中的表格顯示了Google的nofollow，Sponsored和UGC鏈接屬性如何影響SEO。
我們走得更遠(yuǎn)，查找了這些新的鏈接屬性值，找到了278 rel=“ sponsored”和123 rel=“ ugc”。為了確保我們擁有與這些查詢相關(guān)的數(shù)據(jù)，我們專(zhuān)門(mén)在Google宣布此事后兩周更新了索引頁(yè)數(shù)據(jù)集。
加速移動(dòng)網(wǎng)頁(yè)（AMP）是Google的一項(xiàng)舉措，旨在加快移動(dòng)網(wǎng)絡(luò)的速度。許多發(fā)布者正在使其內(nèi)容與AMP格式并行可用。
為了讓Google和其他平臺(tái)了解這一點(diǎn)，您需要將AMP和非AMP頁(yè)面鏈接在一起。
在我們?yōu)g覽的數(shù)百萬(wàn)個(gè)頁(yè)面中，我們發(fā)現(xiàn)只有24,807個(gè)非AMP頁(yè)面使用rel=amphtml引用其AMP版本。
社會(huì)的
我們想知道當(dāng)今網(wǎng)站的可共享性或社交性，因此知道Josh Buchea列出了一個(gè)很棒的列表，其中包含 所有可能出現(xiàn)在您網(wǎng)頁(yè)頂部的內(nèi)容，我們從中提取了社交部分，并獲得了以下數(shù)字：
Facebook開(kāi)放圖
條形圖顯示了Facebook Open Graph元標(biāo)記的分布，在下表中進(jìn)行了詳細(xì)說(shuō)明。
選擇器 計(jì)數(shù)
元屬性=“ fb：app_id” content=“ *”277,406
元屬性=“ og：url”內(nèi)容=“ *”2,909,878
元屬性=“ og：type” content=“ *”2,660,215
元屬性=“ og：title” content=“ *”3,050,462
元屬性=“ og：image” content=“ *”2,603,057
元屬性=“ og：image：alt” content=“ *”54,513
元屬性=“ og：description” content=“ *”1,384,658
元屬性=“ og：site_name” content=“ *”2,618,713
元屬性=“ og：locale” content=“ *”1,384,658
元屬性=“ article：author” content=“ *”14,289
Twitter卡
條形圖顯示了Twitter Card meta標(biāo)簽的分布，在下表中有詳細(xì)說(shuō)明。
選擇器 計(jì)數(shù)
元名稱=“ twitter：card” content=“ *” 1,535,733
元名稱=“ twitter：site” content=“ *” 512,907
元名稱=“ twitter：creator” content=“ *”283,533
元名稱=“ twitter：url” content=“ *”265,478
元名稱=“ twitter：title” content=“ *”716,577
元名稱=“ twitter：description” content=“ *”1,145,413
元名稱=“ twitter：image” content=“ *”716,577
元名稱=“ twitter：image：alt” content=“ *”30,339
說(shuō)到鏈接，我們抓住了所有指向最受歡迎的社交網(wǎng)絡(luò)的鏈接。
下表顯示了外部社交鏈接分布的餅圖。
選擇器 計(jì)數(shù)
<a href*="facebook.com">6,180,313
<a href*="twitter.com">5,214,768
<a href*="linkedin.com">1,148,828
<a href*="plus.google.com">1,019,970
顯然，仍有許多網(wǎng)站仍鏈接到其Google+個(gè)人資料，考慮到最近Google+的關(guān)閉，這可能是一個(gè)疏忽。
rel=上一個(gè)/下一個(gè)
根據(jù)Google的說(shuō)法，使用rel=prev / next不再是索引信號(hào)，正如今年早些時(shí)候宣布的那樣：
“在評(píng)估索引信號(hào)時(shí)，我們決定停用rel=prev / next。研究表明，用戶喜歡單頁(yè)內(nèi)容，在可能的情況下盡量做到這一點(diǎn)，但對(duì)于Google搜索來(lái)說(shuō)，多部分內(nèi)容也可以。”
- Google網(wǎng)站管理員發(fā)布的推文
但是，如果對(duì)您來(lái)說(shuō)很重要，Bing表示它將它們用作提示以發(fā)現(xiàn)頁(yè)面和了解網(wǎng)站結(jié)構(gòu)。
“我們將這些標(biāo)記（如大多數(shù)標(biāo)記）用作頁(yè)面發(fā)現(xiàn)和網(wǎng)站結(jié)構(gòu)理解的提示。此時(shí)，我們不會(huì)基于這些頁(yè)面將頁(yè)面合并在一起，也不會(huì)在排名模型中使用prev / next。”
- Bing的FrédéricDubut
不過(guò)，這是我們?cè)诓榭磾?shù)百萬(wàn)個(gè)索引頁(yè)面時(shí)發(fā)現(xiàn)的使用情況統(tǒng)計(jì)信息：
選擇器 計(jì)數(shù)
<link rel=“ prev” href=“ *”20,160
<link rel=“ next” href=“ *”242,387
大概就這樣吧！
通過(guò)使用大約800萬(wàn)個(gè)索引頁(yè)面中的數(shù)據(jù)了解平均網(wǎng)頁(yè)的外觀，可以使我們更清楚地了解趨勢(shì)，并幫助我們直觀地了解SEO現(xiàn)代和新興技術(shù)中HTML的常見(jiàn)用法。但這可能是一個(gè)永無(wú)止境的傳奇-盡管有大量的數(shù)字和統(tǒng)計(jì)數(shù)據(jù)需要探索，但仍有許多問(wèn)題需要回答：
我們還希望解決其他問(wèn)題，例如“第一字節(jié)時(shí)間”（TTFB）值，該值與排名高度相關(guān)。我強(qiáng)烈建議為此使用HTTP存檔。他們定期抓取Web上的熱門(mén)站點(diǎn)，并記錄有關(guān)幾乎所有內(nèi)容的詳細(xì)信息。根據(jù)最新信息，他們已經(jīng)分析了4,565,694個(gè)獨(dú)特的網(wǎng)站，這些 網(wǎng)站具有完整的Lighthouse評(píng)分，并且為整個(gè)數(shù)據(jù)集存儲(chǔ)了諸如jQuery或WordPress之類(lèi)的特定技術(shù)。Rick Viscomi的巨大道具，他喜歡稱呼自己為“管家”，做得非常出色。
（文： Catalin Rosu 前端開(kāi)發(fā)工程師 Advanced Web Rank 高級(jí)程序員）
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
