Pages

Subscribe:

Ads 468x60px

Labels

2015年6月2日 星期二

Google自訂搜尋功能

資料來源
作者:黃玫瑋 / 計算機及資訊網路中心程式設計組副理

想迅速打造專屬於您自己的搜尋引擎嗎?Google自訂搜尋功能可免費客製化您的需求,不僅提供更精確多元的搜尋結果,亦提供圖片搜尋、熱門關鍵字與統計管理等進階功能。您還在等甚麼,立即幫自己的網站訂作一個吧!
從目錄到搜尋在網站剛興起的年代,可以放在網站的資料並不多。網站管理者可以自己將資料依特性加以分類、建立階層式目錄來提供訪客使用。這種目錄通常只提供網站本身資料的分類與連結,卻查不到其它網站的資料。
對於跨網站尋找資料的需求日增,Yahoo、Google等網路服務先驅們提出了解決之道,他們將所有網站的資料加以整理分類,產生了聯合目錄服務的應用,例如:Yahoo Directory(dir.yahoo.com)Google Directory(已經在2011年中止服務)等目錄網站。
這種資料提供方式,使用者首先遇到的問題是:想找的資料到底屬於哪一類?對於埋藏在目錄深處的資料,使用者還得從分類階層下的目錄反覆猜測尋找下去。如果網站管理者或目錄服務提供者分類方式和網站的訪客的分類模式有很大的差別的話,使用者花很多時間也不一定可以找到那份存放目錄結構某處的資料。
當然後續的演變大家都很清楚:搜尋引擎取代了一切。接著搜尋霸主Google幾乎變成了所有人的搜尋引擎。假設我們所感興趣的是「臺灣大學」這個主題,現在,我們再也不會從「分類首頁/教育單位/大學院校/公立大學/臺灣大學」找到「臺灣大學」(Figure 1),而是從搜尋列直接輸入「臺灣大學」,取得「臺灣大學」的相關資料。


Figure 1 Yahoo 分類目錄
使用者愛用「搜尋」勝於「目錄」的演變,回過頭來再影響到各個網站的設計:網站管理者不約而同地在自己網站上加了個搜尋的控制項。當然我們不希望這個搜尋功能查回來的資料都沒有自己網站的資料,客製化搜尋引擎變成大家共通的需求,提供訪客搜尋自己的網站的資料。
自訂搜尋的服務建置方式,除了採購商業軟體或下載免費軟體Lucene等安裝在自己的伺服器之外,也可以用Google 或Microsoft提供的雲端搜尋服務。自行建置除了要採購相關軟硬體、看懂安裝文件之外,搜尋引擎常常會耗掉不少運算資源與儲存空間,幾年下來還會有吃掉伺服器運算時間或爆掉硬碟空間的問題。
如果要真的省事,筆者建議還是利用免費、免安裝、免維護的自訂搜尋功能。當然除了Google 有提供自訂搜尋(CSE: Custom Search Engine)的功能(Figure 2)之外,Microsoft Bing 也有相對的服務。限於篇幅,Microsoft Bing的部分就請讀者自行參考了。


Figure 2 Google搜尋引擎
利用Google CSE自訂搜尋 
請先登入Google,並請在網址列輸入http://www.google.com/cse/,以連線到Google 自訂搜尋(CSE: Custome Search Engine)。在這個網頁(Figure 3)點選「建立自訂搜尋引擎」的按鍵,就可以新增一個自訂搜尋引擎;完成新的搜尋引擎設定後,可以再回來修改,這時就是點選下方的「管理您現有的搜尋引擎」。


Figure 3 新增或管理現有搜尋引擎
設定您的搜尋引擎(Figure 4 )這一頁設定(姓名)及(說明)的翻譯與管理頁有點出入,(姓名)指的是搜尋引擎名稱,(說明)指的是搜尋引擎說明。請輸入搜尋引擎名稱(姓名)、搜尋引擎說明(說明)、語言以及要搜尋的網站後,並勾選同意服務條款,要注意的是要選擇標準版。接下來就可以選擇樣式並試用你的搜尋引擎(Figure 5 試用 )。不過這個時候的搜尋結果是包含廣告的(Figure 8 )。

Figure 4  設定您的搜尋引擎

Figure 5 試用 

Figure 6 管理搜尋引擎

Google CSE自訂搜尋版本 Google 自訂搜尋服務主要有兩個版本:標準版跟Site Search。標準版不用付費,但會在搜尋結果頁顯示廣告;Site Search 則是依照搜尋量收費,但不會出現任何廣告。雖然標準版預設顯示廣告,但還是可以透過設定隱藏廣告(Figure 7),前提是你的網站必須符合Google的條件(詳見公司設定頁之說明)。

Figure 7 進入公司設定選擇廣告狀態
設定隱藏廣告並儲存變更後,再回到原本加上搜尋列的網頁,就可以看到在搜尋結果頁面(請見Figure 8與Figure 9比較),廣告消失了,這樣是不是清爽多了? 

Figure 8 搜尋結果頁面(有廣告)

Figure 9 搜尋結果頁面(無廣告)
Google CSE功能說明
雖然Site Search 有更強的功能,標準版也已經有了許多好用的功能:
  • 搜尋引擎關鍵字:在基本資訊中設定,可以提升包含這個關鍵字的網頁在搜尋結果上的排序。例如:限制條件設定「程式設計組」時,訪客輸入「黃玫瑋」搜尋時,程式設計組的網頁會排在優先順位。(Figure 13)
  • 自動查詢建議:提供關鍵字自動完成功能,例如輸入c,系統就會出現ceiba等相關字彙供使用者快速點選。
Figure 10 自動完成功能設定與關鍵字新增
  • 統計學習:除了可統計搜尋關鍵字使用次數外,訪客常用的這些關鍵字還會自動成為查詢建議的字庫。
Figure 11 統計功能、熱門關鍵字與自建字庫等功能
  • 熱門關鍵字:可利用統計資訊功能,制定熱門查詢的功能,讓瀏覽者可直接點選最近熱門的查詢字彙進行查詢。(Figure 11)
  • 自建字庫:可利用統計資訊功能,建立自己網站常用的字彙(例如單位名稱、人名)等,不用等到統計學習彙整字庫。(Figure 11)
  • 擴充搜尋:搜尋指定網站外的網站。
     
Figure 12 擴充搜尋功能
  • 圖片搜尋:搜尋結果新增圖片頁籤。

    Figure 13 圖片搜尋、顯示縮圖、限制條件等功能
  • 顯示縮圖:提供圖文並茂的搜尋結果。(Figure 13)
  • 限制條件(Refinement):在搜尋結果頁放置頁籤,便利更進一步的縮小搜尋範圍得到更精確的搜尋結果。(Figure 13)

Figure 14 限制條件之功能可縮小搜尋範圍
  • 共同管理:可以邀請其它人一起管理搜尋引擎。
Figure 15 共同管理功能
  • 稽核:可記錄所有管理者何時改了那些設定。
  • 進階功能:提供將搜尋引擎設定下載/上傳的功能。
  • 關鍵字同義字:可以讓搜尋結果包含關鍵字的同義字。例如我們將「台大」設定有「臺灣大學、台灣大學、臺大」等同義字;使用者輸入「台大」搜尋時,搜尋結果將包含有「臺灣大學、台灣大學、臺大」等關鍵字的網頁。
Figure 16 同義字功能
結論簡單的幾個設定,就有如此強大的管理與搜尋功能,對於不善寫程式的網頁設計師來說,實在是一大福音。但Google自訂搜尋的最後一個設定程序是產生一段程式碼供網站管理者使用,所以想使用自訂搜尋的人,還是必須多少懂一些HTML/CSS/JavaScript的語法,比較能順利跟自己的網站首頁整合。
 
小秘訣有時候中文的界面或說明因為翻譯的關係有點難懂,這個時候,只要在原來的網址後面附加「&hl=en」就可以看到同一篇說明的原文。
 
參考資料Bing Webmaster
https://ssl.bing.com/webmaster/developers/appids.aspx?rfp=7 
http://jeez.eu/2009/10/14/using-bings-api-to-create-a-custom-search-engine.html
http://weblogs.asp.net/hajan/archive/2011/03/07/bing-search-using-asp-net-and-jquery-ajax.aspx
免費開放原始碼搜尋引擎 Lucene簡介, 曾保彰
http://www.cc.ntu.edu.tw/chinese/epaper/0010/20090920_1009.htm

SEO優化教學

資料來源
本篇將介紹個人在開發網站上有關於SEO的經驗, 基本上觀念與SEO真的只要做這些事就好@ModernWeb Conf講者所述內容大致相同提供給大家作為參考。

忘掉Meta Keywords

早期會使用為網站加入關鍵字, 以利SEO, 但因為這個東西被過度濫用, 現在Google已經不會參考這個東西, 甚至您的網站有可能會因為這個東西的濫用而被黑名單。
甚至連Google官方的文件都已經不再提keywords meta了, 可參考:Meta tags that Google understands

忘掉PageRank

以往為自己的網站製作反向連結, 能夠提升自己網站的PageRank以利SEO, 但Google已經放棄PageRank作為網站的指標, 也建議做SEO的人不要再用PageRank當作參考指標。

Head內最重要的Title與Meta description

</span><span class="pln" style="color: rgb(0, 0, 0);">越重要的關鍵字放越前面 | 可將網站名稱擺在後面</span><span class="tag" style="color: rgb(0, 0, 136);"></tilte></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><meta</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(102, 0, 102);">name</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(0, 136, 0);">"description"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(102, 0, 102);">content</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(0, 136, 0);">"如果您不主動加入這個meta, google會擷取網頁的內容作為你的頁面description, 建議不要超過150字"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span></code></pre>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
描述你的Canonical</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
<code class="prettyprint prettyprinted" style="font-family: 'Source Code Pro'; font-size: 13.5px; padding: 0.2rem 0.5rem; margin: 0px 0.2rem; white-space: nowrap; border: 1px solid rgb(225, 225, 225); border-radius: 4px; overflow-x: scroll; display: block; background: rgb(241, 241, 241);"><span class="tag" style="color: rgb(0, 0, 136);"><link</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(102, 0, 102);">rel</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(0, 136, 0);">"canonical"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="atn" style="color: rgb(102, 0, 102);">href</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(0, 136, 0);">"http://www.example.com/product.php?item=swedish-fish"</span><span class="pln" style="color: rgb(0, 0, 0);"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span></code></p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
加入上述canonical到您的head當中, 可避免權重分散。</p>
<pre style="overflow: auto; font-family: monospace, monospace; font-size: 15px; margin-bottom: 2.5rem; color: rgb(34, 34, 34); line-height: 24px; background-color: rgb(255, 255, 255);"><code class="prettyprint prettyprinted" style="font-family: 'Source Code Pro'; font-size: 13.5px; padding: 1rem 1.5rem; margin: 0px 0.2rem; border: 1px solid rgb(225, 225, 225); border-radius: 4px; overflow-x: scroll; display: block; background: rgb(241, 241, 241);"><span class="pln" style="color: rgb(0, 0, 0);">http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//www.example.com/product.php?item=swedish-fish&trackingid=1234</span><span class="pln" style="color: rgb(0, 0, 0);">
http</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="com" style="color: rgb(136, 0, 0);">//www.example.com/product.php?item=swedish-fish</span></code></pre>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
假設上述兩個網址所看到的網頁內容是相同的, 一旦Google爬到這兩則網址可能視為不同頁面進行收錄, 而分散了權重, 加入canonical精確描述此頁面內容網址, 一旦Google爬到n個不同網址, 發現canonical的網址相同就會視為同一個頁面。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
可以參考:<a href="http://googlewebmastercentral.blogspot.tw/2009/02/specify-your-canonical.html" rel="nofollow" style="color: rgb(30, 174, 219); text-decoration: none; transition: color 150ms ease-in-out; -webkit-transition: color 150ms ease-in-out; background-color: transparent;">Specify your canonical</a></p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
善用標題標籤H1-H6</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
許多網站使用標題標籤純粹是為了偷懶將字體放大, 通常這些被放大的字都是不重要的, 反而你正告訴Google這是你網站重要的標題。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
例如你可能在一個最新消息的其中一筆資料頁放入:</p>
<pre style="overflow: auto; font-family: monospace, monospace; font-size: 15px; margin-bottom: 2.5rem; color: rgb(34, 34, 34); line-height: 24px; background-color: rgb(255, 255, 255);"><code class="prettyprint prettyprinted" style="font-family: 'Source Code Pro'; font-size: 13.5px; padding: 1rem 1.5rem; margin: 0px 0.2rem; border: 1px solid rgb(225, 225, 225); border-radius: 4px; overflow-x: scroll; display: block; background: rgb(241, 241, 241);"><span class="tag" style="color: rgb(0, 0, 136);"><h1>
</span><span class="pln" style="color: rgb(0, 0, 0);">最新消息</span><span class="tag" style="color: rgb(0, 0, 136);"></h1>
</span><span class="pln" style="color: rgb(0, 0, 0);">...</span><span class="tag" style="color: rgb(0, 0, 136);"><h3>
</span><span class="pln" style="color: rgb(0, 0, 0);">我才是標題</span><span class="tag" style="color: rgb(0, 0, 136);"></h3>
</span><span class="pln" style="color: rgb(0, 0, 0);">最沒意義的文字成了最重要的標題。</span></code></pre>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
如同講者所述: 適度關鍵字埋入, 不要用代名詞。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
盡量讓頁面只有一個h1標籤, 讓最有意義的keyword埋到h1標籤裡。</p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
使用HTML5標籤</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
HTML5提供幾個常用標籤, 以利搜尋引擎在爬取網頁時可以找到網頁的重點內容。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
常用的標籤有:</p>
<pre style="overflow: auto; font-family: monospace, monospace; font-size: 15px; margin-bottom: 2.5rem; color: rgb(34, 34, 34); line-height: 24px; background-color: rgb(255, 255, 255);"><code class="prettyprint prettyprinted" style="font-family: 'Source Code Pro'; font-size: 13.5px; padding: 1rem 1.5rem; margin: 0px 0.2rem; border: 1px solid rgb(225, 225, 225); border-radius: 4px; overflow-x: scroll; display: block; background: rgb(241, 241, 241);"><span class="tag" style="color: rgb(0, 0, 136);"><header></span><span class="pln" style="color: rgb(0, 0, 0);">通常這裡會再放h1, h2, h3搭配使用</span><span class="tag" style="color: rgb(0, 0, 136);"></header></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><article></span><span class="pln" style="color: rgb(0, 0, 0);">文章內容, 通常裡面會再放一個header標籤, 同樣將h1標題置入header</span><span class="tag" style="color: rgb(0, 0, 136);"></article></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><section></span><span class="pln" style="color: rgb(0, 0, 0);">與article有相似功用, 每塊section的附近不必是相關的內容, 建議section內要搭配h系列標題</span><span class="tag" style="color: rgb(0, 0, 136);"></section></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><aside></span><span class="pln" style="color: rgb(0, 0, 0);">側欄</span><span class="tag" style="color: rgb(0, 0, 136);"></aside></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><nav></span><span class="pln" style="color: rgb(0, 0, 0);">搜尋引擎會視這個標籤內的連結為重要連結</span><span class="tag" style="color: rgb(0, 0, 136);"></nav></span><span class="pln" style="color: rgb(0, 0, 0);">
</span><span class="tag" style="color: rgb(0, 0, 136);"><main></span><span class="pln" style="color: rgb(0, 0, 0);">主要內容, 請盡量確保一個站只有一個main標籤, 而最重要的內容就在main標籤內</span><span class="tag" style="color: rgb(0, 0, 136);"></main></span></code></pre>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
簡言之, 越能用HTML5標籤闡釋區塊所代表的意義就不要使用DIV。</p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
有意義的網址</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
使用有意義的網址表達頁面內容以利SEO。</p>
<pre style="overflow: auto; font-family: monospace, monospace; font-size: 15px; margin-bottom: 2.5rem; color: rgb(34, 34, 34); line-height: 24px; background-color: rgb(255, 255, 255);"><code class="prettyprint prettyprinted" style="font-family: 'Source Code Pro'; font-size: 13.5px; padding: 1rem 1.5rem; margin: 0px 0.2rem; border: 1px solid rgb(225, 225, 225); border-radius: 4px; overflow-x: scroll; display: block; background: rgb(241, 241, 241);"><span class="pln" style="color: rgb(0, 0, 0);">www</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">example</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">com</span><span class="pun" style="color: rgb(102, 102, 0);">/?</span><span class="pln" style="color: rgb(0, 0, 0);">p</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="lit" style="color: rgb(0, 102, 102);">1</span><span class="pln" style="color: rgb(0, 0, 0);"> 
www</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">example</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln" style="color: rgb(0, 0, 0);">com</span><span class="pun" style="color: rgb(102, 102, 0);">/</span><span class="pln" style="color: rgb(0, 0, 0);">guide</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">to</span><span class="pun" style="color: rgb(102, 102, 0);">-</span><span class="pln" style="color: rgb(0, 0, 0);">seo</span></code></pre>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
網址也是SEO的指標之一, 後者含有關鍵字, 更有機會排名在前面, 同時在搜尋結果若網址含有關鍵字, 也會被加粗顯示。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
<img src="http://i.imgur.com/yLmF5UV.png" style="border: 0.5rem solid rgb(255, 255, 255); max-width: 100%; border-radius: 0.3rem; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 4px; box-sizing: border-box; height: 85px; width: 500px;"></p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
使用結構化資料Schema.org</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
<img alt="seo - schema.org" src="http://i.imgur.com/96qH4Sq.png" style="border: 0.5rem solid rgb(255, 255, 255); max-width: 100%; border-radius: 0.3rem; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 4px; box-sizing: border-box; height: 248px; width: 600px;"></p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
簡單說就是在HTML標籤中加入一些屬性, 讓搜尋引擎更了解區塊中的內容是什麼, Google現在也建議使用Schema.org, 會記錄您有哪些結構化資料的頁面, 代表這對SEO有一定的影響力。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
至於使用方法可參考<a href="https://schema.org/docs/schemas.html" rel="nofollow" style="color: rgb(30, 174, 219); text-decoration: none; transition: color 150ms ease-in-out; -webkit-transition: color 150ms ease-in-out; background-color: transparent;">schema.org</a>每種type說明頁面底下都有範例, 在這裡就不細談了。</p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
提交Sitemap</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
主動提交sitemap檔給Google某種程度上是催趕Google盡快為您的網站建立索引, 能夠加快網站內容被收錄, 並且是您指定的重要頁面。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
<span style="font-family: sourcehansans-tc-medium; font-size: 2.6rem;">為您的網站加入SSL</span></p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
Google已經宣布, 對於有使用SSL加密連線的網站會進行排名加分, 為網站加入SSL機制以利SEO。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
參考:<a href="http://searchengineland.com/google-starts-giving-ranking-boost-secure-httpsssl-sites-199446" rel="nofollow" style="color: rgb(30, 174, 219); text-decoration: none; transition: color 150ms ease-in-out; -webkit-transition: color 150ms ease-in-out; background-color: transparent;">Google Starts Giving A Ranking Boost To Secure HTTPS/SSL Sites</a></p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
Mobile friendly Website</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
Google會對於行動裝置友善的網站進行排名加分, 使得在行動裝置上搜尋的結果會以mobile friendly的網站作為優先的排序。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
<img alt="seo - google mobile friendly" src="http://i.imgur.com/263dyFL.png" style="border: 0.5rem solid rgb(255, 255, 255); max-width: 100%; border-radius: 0.3rem; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 4px; box-sizing: border-box; height: 96px; width: 400px;"></p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
可利用此工具測試您網站是否符合: <a href="https://www.google.com/webmasters/tools/mobile-friendly/" rel="nofollow" style="color: rgb(30, 174, 219); text-decoration: none; transition: color 150ms ease-in-out; -webkit-transition: color 150ms ease-in-out; background-color: transparent;">Google - 行動裝置相容性測試</a></p>
<h3 style="margin-top: 0px; margin-bottom: 2rem; font-weight: 300; font-size: 2.6rem; line-height: 1.3; letter-spacing: -0.1rem; font-family: sourcehansans-tc-medium; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255);">
加入社群按鈕</h3>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
加入社群按鈕如Google plus button, facebook like, 目前沒有直接的證實這個操作會影響SEO, 只知道搜尋結果會附上多少人+1, 但我認為若對SEO有影響的話也是Google plus, Facebook like的參考價值似乎沒有那麼高。</p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
參考: <a href="http://mashable.com/2012/02/21/google-plus-1-seo/" rel="nofollow" style="color: rgb(30, 174, 219); text-decoration: none; transition: color 150ms ease-in-out; -webkit-transition: color 150ms ease-in-out; background-color: transparent;">How Google's +1 Button Affects SEO</a></p>
<p style="margin-bottom: 2.5rem; color: rgb(34, 34, 34); font-family: 'Lucida Grande', sourcehansans-tc-normal; font-size: 15px; line-height: 24px; background-color: rgb(255, 255, 255);">
結語:個人認為越乾淨的網頁原創度越高的內容越有機會在搜尋引擎搶到第一位。</p>

SEO教學第12課:影響網站排名的因素:網頁關鍵字優化方式?

資料來源


在Title標題標籤中關鍵字出現的次數?我看過標題內沒有關鍵字,仍然排名在前十?怎麼提高關鍵字權重?h1標籤可以幫關鍵字加分嗎?網頁關鍵字怎麼安排?
在Title標題標籤中關鍵字出現的次數?我看過標題內沒有關鍵字,仍然排名在前十?怎麼提高關鍵字權重?H1標籤可以幫關鍵字加分嗎?網頁關鍵字怎麼安排?Descripton meta描述標籤內需要安排關鍵字嗎?關鍵字密度應該多少?
網頁上關鍵字究竟應該怎麼安排?我想是大家最關心的一堂課,畢竟辛苦的SEO優化為的就是期待關鍵字排名的上升,但是關於關鍵字優化實在有太多傳說,各門各派各有說法,其實關鍵字優化沒那麼玄也沒有那麼困難,做好了自然排名就是以下幾點,就可以做好關鍵字排行了。

Title標題標籤中出現關鍵字

如果連網頁標題之中都沒出現關鍵字,那自然不可能出現關鍵字排名,因此標題內一定要內含關鍵字是最最最重要的優化條件!標題中關鍵字優化的方式需要完整出現並且靠前,請見以下說明。
Title標題標籤:關鍵字越靠前越好
Title標題標籤:關鍵字越靠前越好
Title標題標籤:關鍵字越靠前越好
由上圖可以看出前三名關鍵字「seo」都是關鍵字靠近前方並且最靠前的排在第一名的位置,第四、五名是維基百科本身網站權重就高,因為外部連結數量的龐大!之後的六、七名一樣關鍵字都靠近前方。

Title標題標籤:關鍵字完整出現優於鄰近出現
Title標題標籤:關鍵字完整出現優於鄰近出現
Title標題標籤:關鍵字完整出現優於鄰近出現
同樣由上圖可見,假設我們搜尋「關鍵字排名」會發現排名靠前的都是關鍵字完整出現的,再往後瀏覽才出現關鍵字分開的的網站排名。這點一樣是用於description描述標籤

在Title標題標籤中關鍵字出現的次數?

關鍵字在標題內重覆2-3次已經是最多了,過多的重覆只是更容易被搜尋引擎判斷成作弊,對搜尋引擎優化沒有什麼好處。

我看過標題內沒有關鍵字,仍然排名在前十?
曾經有位號稱台灣seo專家的人利用這招招搖撞騙,號稱連標題都不用寫上關鍵字就可以排上前十,炫耀自己的seo功力很強!其實說穿了,只要運用數量龐大的外部連結加上錨文字,就可以辦到。

怎麼提高關鍵字權重?h1標籤可以幫關鍵字加分嗎?

除了Title標題標籤之外,h1標籤是能夠替關鍵字加分的第二重要條件!這點相當簡單替關鍵字加上h1標籤,但是切記一個網頁最好只有一個h1標籤,不僅可以替關鍵字加分,也可以讓搜尋引擎清楚的知道這個網頁的關鍵字是哪一個!相對的如果一個網頁有三個h1標籤那加分的效果就會除以3,而不會疊加權重。

網頁關鍵字怎麼安排?

在網頁中的前250個字符,也就是125個中文字內出現關鍵字,這裡指的是在網頁中出現的文字而不是源碼中的程式,由此可見文章開頭最好就直接切入主題,經常可以看見文章開頭東聊西聊,或是一大堆的廣告文字,到文章後半段才開始講主題,那對關鍵字排名是沒有好處的。

Descripton meta描述標籤內需要安排關鍵字嗎?
雖然google曾經表明,已經不再計算Descripton meta描述標籤內的權重,但是不管從yahoo、google、Bing的搜尋結果來看,描述內的關鍵字仍會被高亮起來,我相信應該是具有一定的權重。反過來說,一篇正常的文章當在描述這個網頁的內容時,應該會自然而然的提到關鍵字,所以不需要太過刻意追求,自然就好。

關鍵字密度應該多少?

有許多seo專家提出各式各樣的關鍵字密度,但我認為要多少的關鍵字密度取決於你的對手,如果你的對手關鍵字密度是3%,那你就3.5%,這樣不僅可以達到關鍵字優化的效果,也可以避免被誤判成作弊,因為,過高的密度在早期會很快速的得到排名,但是經過搜尋引擎多次的運算後,排名會一直往後退,進而產生排名波動過大,最終被判斷成是作弊的行為。而我愛用的關鍵字密度在5%~8%之間,但是並不特別強求一定要到達這個密度,主要還是看競爭對手的關鍵字密度。

內、外部連結需使用關鍵字

試著搜搜看「請點擊」
不準確的關鍵字使用,就是白白浪費外部連結傳遞的權重
不準確的關鍵字使用,就是白白浪費外部連結傳遞的權重
我們會看到排名結果出來的網站,不管標題或內容裡都沒有出現「請點擊」這個關鍵字,原因就在於有許多網站都連向了這個頁面,而在連結上使用的關鍵字就是「請點擊」,同理可證,我們在連結上所使用的關鍵字,等於是告訴搜尋引擎「這個關鍵字可以代表被連結的網頁」,也就是我們經常在強調外部連結的錨文字上要準確,而該關鍵字就可以替該網頁提高排名權重,因此避免使用「繼續閱讀」「請點擊」…等等無法準確代表被連結網頁內容的關鍵字,那最後你得到排名的關鍵字就會是這些無意義的關鍵字。

替圖片的alt加上關鍵字
Alt的用意原本是在,當圖片無法顯示的時候,以讓瀏覽者依然可以了解該圖片是什麼內容。不過搜尋引擎已經把alt內的文字計算進關鍵字權重、關鍵字密度之內,因此在seo搜尋引擎優化上,我們需要在alt內放上關鍵字,但是仍需要注意避免關鍵字密度過高,一般來說一張圖便約出現1-2次關鍵字即可。另外要注意的是,如果圖片被加上連結後,那代表alt所描述的關鍵字指的是被連結的頁面,權重是傳遞到被連結的頁面上。

bing、Yahoo優化需在網址上出現關鍵字?

這是相當特別的一點,在bing、Yahoo優化上有效而google的優化作用就不大,但是這也僅適用於英文的關鍵字,如果採用拼音的方式則完全無效,那使用中文網址呢?如:關鍵字排名.tw,這種網址對關鍵字排名是有效的,但是要想的是,這種中文形式的網址很少人使用,不要為了優化關鍵字而把網址弄的四不像,那就本末倒置了。

關鍵字優化不需要注意的亂七八糟傳說?

因為搜尋引擎不會公開排名的祕密,因此seo業界就有各式各樣的傳聞,常見的有:網址目錄使用關鍵字、圖片檔案名稱使用關鍵字、keywords標籤內使用關鍵字、檔案名使用關鍵字、程式碼內的註釋標籤使用關鍵字。這些都是無效的,只要把上面所提及的關鍵字優化方式做好就可以達到很好的優化效果,在優化關鍵字的時候最重要的就是自然,不要刻意塞關鍵字。

關鍵字搜尋及關鍵字排名(Keyword Research)

什麼是關鍵字(keywords)?

網路使用者在搜索引擎用來查找相關訊息所輸入的關鍵字詞。

相關資訊

網站排名/如何提高關鍵字在百度裏的排名?


 有很多關鍵字人們會經常拼寫錯誤的,找出這些經常出現錯誤拼寫的詞或片語可以為你帶來額外的流量。(就GOOLE來說,它有檢查拼寫錯誤的功能。建議不要用拼寫錯誤的詞、片語作關鍵字)
1、 處理關鍵字:
  首先收集很多與你的網站或產品有關的關鍵字了。接下來的工作就是把收集到的關鍵字進行組合,把它們組成常用的片語或短語。很多人在搜索的時候會使用兩個或三個字組成詞。據統計,平均是2.3個字。不要用普通的,單個字作為關鍵字。這樣的關鍵字很難排到搜索引擎的前十位元。例如:你有以下幾個關鍵字:“搜索引擎、軟體、提高”,試著把他們組合為“搜索引擎軟體”、“搜索引擎提高”等。把字組成關鍵字短語有利於提高你網站的排名,你將會更有效提高你網站訪問量。例如:很少人會用“搜索引擎”或者“軟體”。
2、 捨棄一些關鍵字: 尋找出那些搜索時很少用到的關鍵字:
A:在英文裏,在搜索引擎大小寫是沒有區別的。
B:拼寫錯誤的關鍵字是沒用的,但是找到一個經常出現拼寫錯誤碼的詞可以額外地提高你的訪問量
C:去除那些停用的詞,在英文裏有“the, for , a ,” 等。中文裏有“的,地,你,我”等。
D:沒有人會用“最好的”,“瘋狂的”等詞語進行搜索。如果你的網站裏有類似的詞,最好把他去除。
選擇最佳關鍵字:
  如果你按照上述所說,你一定列出了一大堆的關鍵字。儘管,你已經去除了一些沒人使用的。但是對於你來說還是太多了。現在是時候進入關鍵字優化的最後一步了。
提示:
  試著用剩餘的關鍵字在搜索引擎中進行搜索,不要把焦點放在最流行的關鍵字上。有時候,次關鍵字排名起來還是比較容易的。因為最流行的關鍵字會存在著更多的競爭對手,而次關鍵字反之。在選擇關鍵字時的技巧是找出關鍵字需求與關鍵字競爭的平衡點,即所選關鍵字競爭不是很激烈。
為什麼要使用html的meta標籤?
1、
  meta標籤是內嵌在你網頁中的特殊html標籤,包含著你有關於你網頁的一些隱藏資訊。Meat標籤的作用是向搜索引擎解釋你的網頁是有關哪方面資訊的。對於高級的搜索引擎來說,html 的meta 標籤並不是什麼新奇的東西。但是無論如何它是一個優秀網頁不可缺少的。下面我們就它進行一些講解吧。
2、
  當你計畫搜索引擎優化策略是meta標籤是非常重要的。儘管如此,一般的加入meta 並不能幫助你在搜索引擎中獲得更好的排名。有好幾種meta標籤,但重要的有以下幾個:description標籤, keywords標籤, title標籤(嚴格來說title不算是一個標籤)。當你不時刷新標籤時這幾個標籤顯得特別的重要。如果你希望搜索引擎對你的網站進行索引時就會用到html標籤的重定向(redirect)標籤與robots標籤.
注意:調查表只有20%的網頁用到“關鍵字”與“描述”標籤(即keyword, description)
多個關鍵字用逗號分開。
3、 title 標籤
  title 標籤可能是你網頁中最重要的標籤,它是你網頁中最先看到的部分。把它放在description 與 keyword前。在這個標籤中最好是加上你網站的關鍵字,title標籤在搜索引擎的搜索中佔有非常重要的地位。最好是把它放在其他meta標籤前,這更有利於你網站的排名。(注意:有些搜索引擎會按title標籤的字母的優先權進行排名,儘量在你的title中使用開始的字母)title標籤是人們在搜索引擎中第一個看到有關你網站的描述,所以儘量把它弄得簡單、明瞭。讓人一看就知道你的網站是關於什麼的。
4、 Description標籤
  Description標籤就在title後面,該標籤可以是一小段(一個或者兩個句子)。用於描述你網站。與title標籤一樣,這也是人們在搜索引擎列表中鏈結到你網站的點擊。這些描述將鼓動人們去流覽你的網站而不是你競爭對手的。(描述不能太誇張。不然,當訪問者到你網站發現內容根本不是你說的那個樣子,那麼他很快就會退出去。)很多搜索引擎允許描述的字數在150個左右,所以你要保證你的描述在150以下,否則搜索引擎會自動把多餘的部分剪去從而造成你網站的描述的不完整。搜索引擎認為描述裏的關鍵字遠比網頁中的內容要重要(好像現在這種情況不是那麼明顯了)。真如上所述,這裏提供了非常重要的資訊:確定你的描述能正確的反映你網站的主題,儘量在描述中加入你主要的關鍵字,越靠meta的關鍵字意義越大。這樣會突顯你的關鍵字。
現在大多的搜索引擎(google除外)都會支援descriptin標籤。如果你不使用的話你將會失去排名靠前的可能。
5、keyword 標籤
  相比於description與title標籤,keyword標籤顯得並不是那麼重要了。有些搜索引擎把它完全地忽略,但是使用下正確的keyword標籤對提高排名仍然有效。
除了搜索引擎外,一般情況下人們是看不到的。keyword標籤是一個隱藏的標籤,向搜索引擎提供了一組與你的頁面有關的的關鍵字或關鍵短語列表。你可以用相應的工具找出一系列適用於你網站的關鍵字。(注意:關鍵字標籤中只能包括與你本頁內容相關的關鍵字列表。所有在這裏的關鍵字必須與頁面的內容相聯繫。)
提示:在你每一個頁面中組織相關的關鍵字,每個頁面必須專注於不同的產品或者內容。在標籤中列滿關鍵字對於提高你網站的排名並沒有好處。多個關鍵字間用逗號用隔,逗號表示是邏輯“或”的意思。空格表示邏輯“與”。這是正式在keyword標籤中描述關鍵字必須的。儘管如此,很多搜索引擎也會把關鍵字間以空格分開以達到能搜索出更相關的結果的目的。這樣做的意義是,搜索引擎會把空格分開的關鍵字根據一定的方式自由組合。可以嘗試用兩種方法,看哪一種更加適合你。
關鍵字不宜以同一形式重複3-6次,一般這已經認為是最大的關鍵字重複數(好像現在又發生了變化)。所以,儘量避免把你的關鍵字一次又一次地不斷重複。這對於每一個搜索引擎來說是SPAM(關鍵字垃圾),你會因此而受到懲罰。大多數的搜索引擎會允許你在keyword標籤中使用最多1000個字元。通常,對每一個頁面使用相關連的關鍵字會提高你網站的排名。一個很重要的因素是你關鍵字冗餘度,如果你一個關鍵字是一個字元,而你的keyword標籤中有100個字元,那麼你關鍵字的冗餘度就為1%。搜索引擎將會利用相關的演算法對你的關鍵字冗餘度進行統計你網頁中的每一個重要的詞或短語。去除多餘的關鍵字有利於提高你網站的排名。
基本搜索引擎優化策略:
為什麼有的網站能在搜索引擎上排名很好,而有的卻連找到找不到呢?這個秘密何在呢?正如免費搜索引擎上的指導方針所說,有五個因素你是必須銘記於心的:
1、 你網站的內容與主題。
2、 每頁的關鍵字數。
3、 關鍵字放置的位置。
4、 點擊量。
5、 鏈結數量。
1、 搜索引擎優化策略:網站內容
網站的實際內容是你網路優化策略的一個重要的因素。如果你想你的網站能在搜索結果中排得靠前,在你的網站中必須有實際的內容。搜索引擎的蜘蛛基本上是一個瞎子。他們只能對你網頁內容進行判斷你網站的品質,而不能從圖片、flash動畫上判斷。在所有的頁面中有充足的內容給搜索引擎進行索引是一個成功搜索引擎優化策略的基本需要。很容易明白,為什麼一個沒什麼內容的網站很難排上去。人們在查找資訊的時候,總是希望找到一個包括很多重要資訊的網站。很自然,網頁內容豐富的網站要比那些網頁內容還那麼豐富的網站排名要好得多。每個為他們的網站進行優化的站主牢記。不要忘記更新你的網站。無論是搜索引擎還是訪問者都希望看到比較新的資訊。這是什麼意思呢?這就要求你要收集大量的資訊,專注於這領域的變化。
2、搜索引擎優化策略:關鍵字密度
網頁上通常會有數以百計的詞語,那麼搜索引擎怎樣去分辨哪些是描述你的網站的重要的詞語呢?搜索引擎會統計你一個頁面的字數。那些重複出現的詞或短語被認為比較重要些。搜索引擎利用自身的演算法來統計你頁面中每個字的重要程度。關鍵字數與該頁面字數的比例稱為關鍵字密度,這是一個搜索引擎優化策略最重要的一個因素。
為了得到更好的排名,你的關鍵字必須在頁面中出現若干次,或者在搜索引擎允許的範圍內。
怎樣才能知道關鍵字的密度是多少才能得到較好的排名呢?很簡單,只要你在搜索引擎中搜索你要優化的關鍵字,然後統計一下排在前面幾個網站該關鍵字的密度就可以了。當然也有很多統計關鍵字密度的工具(你可以在本站上找到)。
3、 索引擎優化策略:突出關鍵字
在有價值的地方放置關鍵字,當你統計完你的頁面需要多少個關鍵字後,接下來就是考慮把你的關鍵字放在網頁的什麼地方。突出關鍵字是吸引搜索引擎注意的一個最重要的因素。搜索引擎將會專注於你網頁中某一部分的內容,處於這一關注部分的詞語顯得比其他部分的詞語要重要得多。這就是所謂的“突出關鍵字”。
A: Title 和meta 標籤:在上一節已經提到,title 標籤是網頁中最重要的標籤。所以在title中放置關鍵字顯得非常重要。有一些搜索引擎會額外的注意“描述”與“關鍵字”標籤。
B: 標題(headings) -- 標題標籤為你的訪問者指明了哪些是網站中比較重要的內容。“標題”: 是處於 -- 中的文字。在“標題”標籤中能出現關鍵字對於提高你網站排名有很大的好處。
C: 超鏈結文本: 你鏈結到一個網頁與你網站內容相關,這一想法是非常正常的事。這也是關鍵字在鏈結文本中為什麼那麼重要。
D: URL文本:在你的功能變數名稱和你的網頁中出現關鍵字對於搜索引擎排名會產生很大的影響。這樣的關鍵字被稱為“URL文本”,在另一個網站與你網站建立鏈結時,儘量使用關鍵字作為鏈結文字,這有利於提高你網站的重要性,從而影響到PR。
E: 頂部:網頁頂部的文本,每段開頭的內容顯得特別重要,所以,儘量在這些地方把關鍵字包含進來。

iPhone、Android手機模擬器 (Google Chrome內建)

資料來源:香腸炒魷魚

Windows作業系統上,很多人常常在手機模擬器,想要透過PC來模擬Android或是iPhone的介面,可是往往很多模擬器的使用方式都非常麻煩,就算找到免費的手機模擬器,可能看完介紹就把網頁關閉。不過別擔心,如果你的手機模擬器用途只是單純要來做網頁測試,想要看看自己的網站在iPhone、iPad甚至是Android上看的樣式,那麼Google Chrome內建的手機模擬器就足夠你使用了。
很多人不知道其實在Google Chrome的開發者工具中,有一個模擬器的功能,可以讓你的Google瀏覽器模擬成行動裝置,或者是其他瀏覽器,透過「Use Agent」的參數設定,可以讓你的Google Chome模擬成Android、iPhone、iPad、BlackBerry(黑莓機)、IE7、IE8、IE9、Firefox等等的瀏覽器,讓你修改網頁一次看到所有介面,讓網頁修得更漂亮。
透過Google內建的開發者工具,我們就可以模擬多種的行動裝置畫面(每一個裝置又不同的解析度),並且可以透過內建的開發者工具對網頁調整CSS、HTML設定或者是bug修正,使用上十分的方便,在網頁相容性校正上,也有所幫助。這個Google Chrome手機模擬器功能其實長得非常的密,不特別去找的話,一般使用者根本不會發現這樣的功能。
使用Google Chrome的iPad、iPhone、Android模擬器有何作用,這對網頁設計師來講,在做手機版網頁的微調確實有極大的幫助,同時可以透過單一瀏覽器就可以一口氣校正IE、Firefox、Google Chrome、iPad、iPhone、Android以及黑莓機裝置,是不是很方便呢?看到這裡,你想要找的是Android的APP模擬器,那你可能要改用BlueStacks
第1步  以香腸炒魷魚本站為例,這是一般電腦看到的畫面,但是這樣的畫面用到手機上看就不適合了,因為畫面完全不符合,所以香腸先前有用WordPress專用手機版的外掛,去開發WordPress專屬手機版佈景
iPhone、Android手機模擬器 (Google Chrome內建)
第2步  接著我們要啟用Google Chome的手機模擬器,請先點右上角的圖案,再點選【工具】→【開發者工具】,或者是直接快捷鍵﹝Ctrl﹞+﹝Shit﹞+﹝J﹞。
iPhone、Android手機模擬器 (Google Chrome內建)
第3步  開啟後,請看到開發人員工具右下角,那邊有一顆很不起眼的齒輪,請點選。
iPhone、Android手機模擬器 (Google Chrome內建)
第4步  接著你就會看到一個令人驚豔的設定,這邊全英文。點選【Overrides】並將「User Agent」打勾,下拉選單中可以選擇您要的介面。
iPhone、Android手機模擬器 (Google Chrome內建)
第5步  這邊支援多款的介面,從IE、Firefox、Chrome、Android、BlackBerry、iPhone、iPad各式各樣的解析度都有,選擇你需要的吧!
iPhone、Android手機模擬器 (Google Chrome內建)
第6步  除了勾選「User Agent」別忘了勾選「Device metrics」,最後點一下「F5」重新整理網頁。
iPhone、Android手機模擬器 (Google Chrome內建)
第7步  重新整理後,網頁就會變成手機版了。是不是很簡單呢?這就是香腸炒魷魚的手機版,清單式的文章列表,寬度解析度完全符合手機專屬。
iPhone、Android手機模擬器 (Google Chrome內建)