Connect with us

網站分析

GOOGLE搜尋結果頁面(SERP)重新設計前後比較

Published

on

GOOGLE搜尋結果頁面(SERP)重新設計前後比較

早年Google一直在測試兩個整體SERP格式和重新設計AdWords區塊,然後推出這些改變到大部分的SERP結果。這次我們快速回顧SERP前後的改變,並看看谷歌的未來。

一、基本搜索結果

讓我們從一個非常基本的搜索結果,為[pygmalion]的查詢。以下為前後的SERP結果:

基本搜尋SERP

新版本的標題字體較大,而Google已經將連結底線移除並把連結實際上變小一點。代碼段和區塊連結都是保持不變。

二、擴展搜尋外觀的網站鏈接

這裡有一個結果與擴展站點的鏈接。查詢是[卡羅來納州廣場購物中心]

擴展網站連結SERP

如同主要結果,網站鏈接也越來越大和標題字體沒有底線,這個例子表明一些標題標記分類字體變大。這可能會影響點擊率,所以你需要考慮更短的標題並將重要的關鍵字提前(至少對關鍵頁)。

請注意,淡淡的水平分隔在底部,這樣會令SERP的其餘部分變大。由於水平分隔線經常用於新的設計,所以我堅信他們視覺的改變會朝著卡片狀的外觀發展(近似於手機,Google+和谷歌)。

三、圖像垂直結果

這是新的圖像垂直成果模樣。查詢是[羅杰威廉斯大學]

圖片搜尋SERP

四、垂直新聞結果

下面是[wtop traffic]查詢,顯示出經過重新設計後的垂直新聞結果。請注意,這些都是過去日期得到的搜尋結果因此與實際的搜尋結果有所分別,但數量與版面是相同的:

新聞搜尋SERP

所有文章的鏈接都使用較大的字體(長短與換行都有相同的意義)。而垂直圖像搜尋結果中,新聞搜尋結果得到上方與下方的分隔。一般情況下,你可以看到,幾乎每一個類型的結果都顯著佔用了更多的垂直空間。

五、本地搜尋結果區塊

對於查詢[lands end],這裡顯示三個本地搜尋結果,並同樣集中在San Diego, CA

地方搜尋SERP

更大的字體,沒有底線、水平分隔線,你知道該怎麼做。注意實際位置信息(地址和電話)使用顏色較淡的灰色文字。

六、有深度的文章

下面是在谷歌查詢棕櫚油的垂直搜尋結果、有深度的文章。

深度文章搜尋SERP

重新設計的搜尋結果幾乎沿用了其他垂直的模式。請注意實際的標題字體深入篇In-depth articles”,是有點小並且稍呈灰色

Google一直在測試有深度的文章在不同時候的搜尋結果變化。很多人認為,這種擴大的格式可以取代某些更簡單的狀況,下面是最近的測試(這不是確定最終版本,這樣的設計可能會改變)、用於查詢[foreclosure]

深度文章搜尋SERP結果

雖然這個測試格式與重新設計的規則很相似,但這是完全不同於Google目前處理深入文章的方式。請注意,這個測試版本出現在2”位置(第一有機結果之後),而當前深入的文章區塊通常出現在或靠近頁面1的末端。期待有深度的文章,將來可得到大幅度的修改。

七、影片搜尋結果

2014年,視頻搜尋結果比一個實際垂直搜尋結果增強了許多、下面是之前和之後對[wild kratts]的查詢:

影片搜尋SERP

本質上只是一個搜尋的結果,帶著片段的資料和加入常規佈局和縮圖特徵,而縮圖亦維持不變。這也是作者的結果和審查屬實片段,標題和URL的字體有變化,但總體佈局,縮圖大小等,似乎都相同。

八、AdWords的(上方)

除了一般設計變更外,Google一直以來都在測試一個新的AdWords格式,這些可能會同時推出,但測試本身是分開的。這裡有一個相當複雜的AdWords來自於查詢[keens]時出現的頂部區塊:

廣告SERP

除了較大的,無底線標題和水平分割,彩色背景也消失,旁邊的每一個廣告出現黃色[廣告]框。在“Ads related to…”文字已經被移除。

九、AdWords(右方)

在右側列AdWords的區塊也有變化,但不同的是少了幾分戲劇性。下面是相同的查詢(查詢[keens]):

AdWordsSERP

整個區塊有一個黃色的[廣告]標籤,而且也沒有改變背景(因為舊版本的沒有彩色的背景)、新字體並擴大標題顯著和增大廣告空間的垂直區域

注意的是AdWords的區塊在左欄的底部看起來是非常相似。其他SERP的元素,包括知識面板,答案盒,支付購物,輪播似乎已經不受到重新設計影響(到目前為止)

未來搜尋結果趨勢

2014年谷歌向著更加卡片狀的格式改變搜尋結果頁面。儘管我對未來的SERP概念受到行動裝置與Google現在與未來超越水平的重新設計強烈的影響,但不要忽視Google正在使用的分隔而分離出的SERP元素方式。由於手機與平板使用者的增加,新的設備正開始發酵,Google希望有更容易混合並匹配的SERP資料,在不同的裝置與情境中提供最相關的組合,目前桌上型電腦依舊是固定的兩欄SERP格式,但Google的設計決策正在推動越來越多的移動設備,而未來是可以很容易地重新排列個人化的信息。

而這個想法正在改變SERP結果,以下圖片是搜索(芝加哥郊區)[星巴克]的地方,注意分隔線如何分隔並擴大頂部的廣告,注意區塊#1,當地有三個結果和一個消息框,最後裁示搜尋成果的其餘部分:

未來SERP趨勢

雖然水平線可能不是一個很大的變化,但Google顯然努力為不同的SERP單位分隔,可以潛在化的混合與匹配。另外可注意,其中2”在這個頁面上,就這麼簡單,因為它們可能看起來,這些設計變化正在重新定義自然搜索結果。

現在最棘手的問題是沒有人關心。雖然這是有點苛刻,但這是現實:Google測試了數以百萬計的獨立訪問者,幾十個商家在抱怨新的設計是不會動搖Google的決定。在這一點上,這個決定是98%會提出,並且它是基於Google的目標和谷歌的數據所做的。你能做的就是試圖評估這些變化如何影響你的營收,並相應地調整。不要浪費你的時間默默的看著這波新的改變。

最後一點,雖然這重新設計似乎推出了,但Google好像還沒正式確認這些改變,它可能仍然是在測試中(儘管已經是廣泛的測試)。我想匯集整理後,同時我們還可以比較之前和之後的版本作對比,但是這樣的設計還是可以在未來數天,數週或數月內改變。

繼續閱讀
發佈留言

Leave a Reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *

SEO

SEO 必備概念 – 行銷人的 HTML 入門基礎教學

Published

on

SEO 必備概念行銷人的 HTML 入門基礎教學

HTML 其實相當簡單又易學。
我們跟客戶合作時,經常會與許多做行銷的朋友討論 SEO 相關的網頁技術,我們認為有許多SEO 的觀念都需要一些關於 HTML 的知識來輔助。你們或許平常沒有太多機會接觸到 HTML 語言,所以令 HTML 不但聽起來陌生又難懂,而且可能都不知道該從何學起。其實HTML 是相當簡單且容易學,如果在 SEO 的路上有了 HTML 的觀念會相當有幫助。

透過這篇文章為大家介紹 HTML

HTML 語言到底是什麼?

HTML (英語:HyperText Markup Language,簡稱:HTML),是一種用來建立網頁的基礎語言,人跟人之間對話需要透過語言,而我們與瀏覽器之間的溝通方式,就是HTML 語言。瀏覽器 ( Chrome 或者是蘋果手機的 Safari等等 ) 透過讀取與翻譯 HTML 語言將網頁內容呈現出來後,就成為我們在瀏覽器上看到的網頁外觀。

* Render – 彩現,又稱為繪製,是指當瀏覽器理解了 HTML 的內容後,透過 HTML 提供給瀏覽器的資訊轉換成圖像與文字呈現出來,然後變成我們所看到的網頁內容,這樣的過程我們稱為彩現。

網頁由原始碼轉換到圖像的過程,稱為彩現 ( Render )

  上方從原始碼到網頁外觀的過程,就被稱為彩現

HTML 是由很多的標籤組成。而HTML 語言的標籤,必須在「<」與「>」之間,起始標籤只需要以「<」與「>」包括,但結束的標籤必須要加上左斜線做區分。

例如:<element> 網頁元素內容 </element>

範例:<title> 全台最大的 SEO Blog 上線囉! </title>

HTML 的結構

HTML 的結構分為三大部分,宣告、HeadBody,而這三個區塊分別有不同的功能。以下我們會簡單介紹這三個區塊到底是負責什麼功能,讓你不再看見原始碼就害怕!

第一部分宣告

1  <!DOCTYPE html>

<!DOCTYPE html> ,透過這個標籤,就知道我們會使用HTML的語言。亦能瀏覽器知道和理解我們接著會用HTML語言跟他對話。雖然宣告只有一個標籤,但是一定要有的。

第二部分網頁表頭 ( 頭:Head )

網頁表頭中會有網頁名稱、網頁的 STYLE 樣式、與網頁相關的資訊。

<head>
<title> HTML</html>
</head>

網頁表頭的是由 <head> 標籤起始~ </head> 標籤結束,上面說的各種資料會放在這兩個標籤裡面。

第三部分網頁主體 ( 身體:Body )

網頁主體和身體,包含了你在網頁上看到的內容。不管是文章、圖片或是充滿特色的介面,這些內容都是包含在網頁主體中。由 <body> 標籤起始,到 </body> 標籤結束,文章、連結、圖片、表格等,不同資訊類的內容,都會放在 <body> </body> 之間。

<body>
<h1>首頁</h1>
<p> 內容 </p>
</body>

網頁內容這個區塊是包含了很多的資訊,而且在這些資訊中,有很多的內容會呈現在使用者的面前。我們需要多加留意HTML 並不只是一個個標籤分別排列,像 <div> 這樣的標籤是由很多的小標籤組合而成,最後才變成一個有著許多綜合內容的區塊。下圖的 div 中就有著 APPLE特別活動、於美國芝加哥等等以及連結,組合成一個 div

重溫一下

內容整理有以下三個重點:

  • 第一 <!DOCTYPE html> 是負責向瀏覽器宣告網頁用的編碼是 HTML*註解 語法使瀏覽器了解接下來該怎麼翻譯。( HTML 5 版本,為方便記憶我們簡稱為 HTML )
  • 第二 提供網頁的資訊,包含網頁的名稱、資訊、樣式等網頁相關的訊息。( Head 之中包含了各類網頁的資訊,名稱、樣式等等 )
  • 第三 就是包含了網頁上的主體內容,例如文章、圖片、連結等等很多需要被呈現在使用者面前的內容。( Body 之中幾乎都是呈現在網頁上的內容 )需要暫時關閉「尋找我的 iPhone」。而您必須要知道自範例:img標籤變成圖片,h4h2標籤變成標題內容等等

HTML 中的不同標記均提供了瀏覽器需要知道的格式、資訊和內容,而瀏覽器在接收到資訊後會將其資訊化為我們可以看到的圖像內容,也就是大家日常能夠看到的網頁外觀。所以當學習 HTML 時,需要花費很多時間來學習怎樣使用標籤,因此相對有比較少的時間學習架構和基礎。希望透過此文章,大家對HTML 有更完整和清楚的理解!

 

繼續閱讀

Google ads

手機網站-行動裝置優先索引(Mobile-first Indexing)

Published

on

手機網站行動裝置優先索引(Mobile-first Indexing)

根據資策會資料顯示,2015年台灣智慧型手機的普及率達到73%,台灣排名全球第9; 另外,台灣人平均每天花197分鐘使用智慧型手機,而今年智慧型手機的普及率更可能會達到80%以上,這些數據反映出行動裝置對於生活中的重要性。

以往我們都是以桌上型電腦搜尋結果為主,所以雖然很多網站都沒有製作與行動裝置相容的網頁,但因為桌上型電腦的搜尋結果排名良好,以致手機內的搜尋結果排名也有不錯的情況發生。

甚至有些手機版網站的內容只是桌機版內容的簡短摘要,而搜尋引擎還是以桌機板的內容為主要排名依據。

不過這種情況在未來中將會不斷改善,因為Google正在分拆其搜索結果中不同版本的索引到行動裝置和桌機上,這代表未來行動裝置和桌機的搜尋結果排名將會有很大的不同。

那麼我們應該要如何應對這樣的新變化呢?

現在你的網站可能會有下面這三種情況之一

.網站使用響應式網頁設計或是動態服務設計(網址相同)

恭喜你了,你不需要特別做什麼變動(唯一的變動可能是手機搜尋排名提升了!!!!)

. 如果網站是使用所謂的大小網的獨立網址(網址不同),那便需要注意下列幾點:

1.確實的使用 alternate canonical 來宣告桌機和手機網站的頁面關係

在電腦版網頁上加入特殊的 link rel=”alternate” 標記, 指向對應的行動版網址,以便 Googlebot 找到你網站的行動版網頁位置。
在行動版網頁上加入 link rel=”canonical” 標記, 指向對應的電腦版網址。

2.確保手機網站與桌機網站的內容是相符合,不會有手機內容遠少於桌機的情況發生

3.使用google Search Consol 裡的robots.txt測試工具測試是否可以正確抓取手機版網站

robot_stest

.最後一種情況:還沒有行動版網站

現在都已經快邁向2020年了,請不要讓網站還停留在2006…..網路的世界日新月異,要跟上最新的潮流脈動才能帶來為網站帶來流量。歐~~當然也請不要擔心~~沒有行動版網站還是可以在GOOGLE使用手機找到你的網站,只是可能排名會被擠到很後面去就是!!!(謎之音:~~這還叫做不用擔心!!
也不是有行動裝置相容的網站就能在手機搜尋結果獲得好的排名,還是會需要有豐富的頁面內容、順暢的網頁速度、最好還有AMP頁面

最後建議大家及早建立良好的行動版網站,來響應Google未來的演算法變動!!

繼續閱讀

最多瀏覽