網站分析

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

Published

8 個月 ago

2020-02-07

itsupport

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好像還沒正式確認這些改變，它可能仍然是在測試中（儘管已經是廣泛的測試）。我想匯集整理後，同時我們還可以比較之前和之後的版本作對比，但是這樣的設計還是可以在未來數天，數週或數月內改變。

SEO

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

Published

1 年 ago

2019-07-15

itsupport

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 的結構分為三大部分，宣告、Head、Body，而這三個區塊分別有不同的功能。以下我們會簡單介紹這三個區塊到底是負責什麼功能，讓你不再看見原始碼就害怕!

第一部分 – 宣告

1 <!DOCTYPE html>

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

第二部分 – 網頁表頭 ( 頭：Head )

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

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

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

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

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

重溫一下

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

第一 <!DOCTYPE html> 是負責向瀏覽器宣告網頁用的編碼是 HTML*註解語法使瀏覽器了解接下來該怎麼翻譯。( HTML 5 版本，為方便記憶我們簡稱為 HTML )

第二提供網頁的資訊，包含網頁的名稱、資訊、樣式等網頁相關的訊息。( Head 之中包含了各類網頁的資訊，名稱、樣式等等 )

第三就是包含了網頁上的主體內容，例如文章、圖片、連結等等很多需要被呈現在使用者面前的內容。( Body 之中幾乎都是呈現在網頁上的內容 )需要暫時關閉「尋找我的 iPhone」。而您必須要知道自範例：img標籤變成圖片，h4與h2標籤變成標題內容等等

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

繼續閱讀

Google ads

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

Published

1 年 ago

2019-07-15

itsupport

手機網站–行動裝置優先索引(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頁面