更好的研究、更好的設計、更好的結果
已發表: 2022-03-10多年來,我們一直看到的一件事是,在 Web 開發項目的規劃階段很少使用來自數字營銷人員的洞察力。
從 Google Analytics 和SEMrush到VWO (視覺網站優化器)或Hotjar等工具的數據都是可用於在編寫第一行代碼之前提供有價值的洞察力的資源。 基本的 SEO 元素,例如 URL 結構和元數據,也應該參與任何網頁設計項目的決策。
之前已經指出了這一點,這是許多 SEO 和內容專家的痛點。 但是,在本文中,我們將關注與我們自己的首選方法相關的問題,即有效的內容研究和創建,以及用戶意圖如何影響每個階段的過程。
然後,我們將繼續介紹設計過程的各個方面,一路討論 SEO 問題,並最終對我們認為實現兩件事的工作流程進行詳細分解:網站看起來很棒,並且是完全實現的資產設計以實現可衡量的目標。
智能內容研究
網站不僅僅需要建立。 它必須填充材料。 該材料的設計方式將在很大程度上決定網站的成功,即它為客戶的業務或組織帶來了什麼。
這就是為什麼我們覺得奇怪的是,正常的網頁設計過程在其最初階段錯過了關鍵字研究,以及更發達的相關內容策略。 因此,通常在構建框架時沒有充分考慮它將包含什麼。
我們所有的項目在某種程度上都需要關鍵詞研究,這總是需要仔細關注用戶意圖。 作為 SmashingMag 的讀者,您很可能會理解這個概念。 不過,為了清楚起見,值得在內容策略和 SEO 方面重新審視這一點。
在用戶意圖成為事情之前,關鍵字研究涉及收集搜索量列表和“難度”數字,並試圖找出您可能為哪些關鍵字排名,而沒有過多關注它們是否是您的理想用戶實際上可能使用的查詢.
雖然我們仍然必須經歷這個過程,但有效的研究需要更智能地使用我們發現的數據。 我們必須專注於發現目標關鍵詞和開發滿足查詢意圖的材料——同時在此過程中仍然尋找一些相關的“好機會”關鍵詞(即高容量、低競爭)。
這意味著關鍵字研究正在成為一種了解用戶在上下文中搜索的含義、他們想要回答什麼問題以及他們使用什麼樣的語言的方式,所有這些都服務於創建最有可能幫助網站的內容的目的滿足其所有者的目標。
用戶意圖和內容創建
用戶意圖通知關鍵字研究,最終成為內容策略,然後是創建。 我們創建的內容總是有目的的,在大多數情況下,它是為了滿足用戶查詢背後的意圖。
作為一個廣泛的示例,讓我們以查詢“咖啡”為例。 以下是結果的外觀——注意旨在滿足不同意圖的不同類型的內容:

根據他們所針對的受眾,結果差異很大。 有些是針對想在附近找個地方喝咖啡的人,有些是您可以在線訂購喬的網站。 還有一些資源可以查看咖啡的歷史和營養信息。
雖然我們通常不必處理如此寬泛的術語,但所有這些都必鬚根據網站的目的進行考慮、挑选和計劃。 這意味著內容研究,當專注於用戶時,對網站架構甚至美學具有明顯而巨大的影響——即在任何設計過程中首先要解決的問題。
當不考慮內容時
我們在新舊網站上看到的最常見問題之一是內容未能完全解決用戶查詢,無論是準確的短語還是一般意圖。 在某些情況下,這很容易解決——例如,對頁面的元數據和副本進行一些調整通常可以幾乎立即澄清其查詢和用戶定位。
但在許多其他情況下,問題要嚴重得多,並且需要修改架構或導航作為全新內容策略的一部分——如果一直諮詢合適的專業人員,本可以避免這個代價高昂的過程。
以下是我們多次遇到的特定於網站內容的一些場景:
場景一:閃亮的新網站,枯燥的新內容
一位客戶——我們稱他為 John——正在推出一個全新的網站,沒有以前的內容可供參考。
然而,如果約翰直到很晚才被提示考慮複製、內容或搜索引擎優化——通常是在後端開發階段之後——那麼可能會做出錯誤的決定,同時也有可能失去一些他對這個項目的動力、精力和耐心。
急於看到它完成意味著內容的研究或執行不夠好,無法長期有效。 最終,它必須在漫長而昂貴的第二階段 SEO 和內容創建活動中重新審視。
場景 2:同樣的內容,同樣的問題
重建現有網站意味著有現有內容可供查看和參考。 有時,John 太倉促了,或者在這個階段一心想降低成本,根本沒有考慮內容。
舊網站和新網站使用的內容相同,John 想知道為什麼他的網站沒有立即成為所有熱門關鍵詞的第一名。 最終,它必須在漫長而昂貴的第二階段 SEO 和內容創建活動中重新審視。
新內容,否則!
有時,一個有價值的權威網站會被重建,例如作為品牌重塑的一部分。 約翰堅持認為一切都是新的。 如果沒有適當的研究說明這一點,例如分析數據(下面將詳細探討),John 不知道他已經擁有的資產。 他擺脫了搜索引擎認為有價值的舊內容(或者做一些更糟糕的事情,比如切換到新域),並且排名神秘地下降。 最終,它必須在漫長而昂貴的第二階段 SEO 和內容創建活動中重新審視。
事後調用 SEO 時的工作流程問題
當然,我們必須用我們得到的東西來解決問題,但是對於 SEO 來說,在問題解決後很好地處理項目是令人沮喪的,我們最終不得不建議如果一個相對較新的網站有任何問題,則需要將其拆開希望實現它的價值。
當從一開始就沒有考慮 SEO 時,頁面佈局和語義標記沒有考慮摘錄、H 標記、元數據或 CMS 如何長期幫助 SEO。 然後,許多客戶將轉向快速修復諸如 Yoast 之類的 Wordpress 插件。 這些很有可能無效或使用不正確,從而使手頭的問題長期存在。

那麼,你猜怎麼著? 網站啟動後會聘請一位 SEO 專家。
現在客戶對他們現有的代理機構不滿意,並高度重視改進 SEO。 反過來,搜索引擎優化專家很難不破壞網絡代理,但仍需要建議結構和頁面調整。
他們還將面臨客戶期望方面的問題,毫不奇怪,他們會感到被敲竹槓,並不願意在他們閃亮的新網站上花更多的錢。
這一切聽起來很熟悉嗎? 我們論點的關鍵在於,通過從一開始就引入以意圖為中心的關鍵字研究等內聯流程,可以避免這些情況,每個人都能相處融洽。
同時,集成方法將意味著更好的用戶體驗和轉換以及強大的 SEO 性能。 更集中的內容也意味著更低的 PPC 成本,因為相關性是 Google Adword 計算的一部分。
與其在昂貴的設計階段之後進行第二輪昂貴的 SEO 工作,不如簡化整個過程,降低時間和成本,讓客戶更滿意,從而生產出更好的最終產品。
新的設計流程
這一切都很好,但我們如何才能將其付諸實踐呢? 由於復雜程度不同,對於業內許多人來說,設計過程如下所示:
典型的工作流程

值得一提的是,優秀的開發人員將在他們自己的工作流程中專注於用戶體驗和訪客旅程。 相反,一個典型的項目可能會經歷這些階段:

不同的方法
在過去一年左右的時間裡,我們付出了很多努力來完善這個流程,我們相信這種方式可以為我們的客戶帶來最大的價值。 這裡是:
項目計劃

與往常一樣,這應該是第一步,因為它將定義未來工作的範圍。 現實一點,為錯誤留出空間,並且非常清楚你得到了你所付出的。 預算不足可能會導致設計、功能和內容等關鍵領域的不足。 同時,如果項目的所有預算都花在了設計和開發上,就沒有支持營銷策略或持續更新和改進的空間。

同樣,您的目標應該從一開始就明確。 您是否專注於獲取電子郵件地址或銷售產品? 您希望訪問者首先做的一件事是什麼? 如果沒有清楚地理解這一點,您的網站可能會達不到目標。
一旦確定了這一點,您就可以繼續設定更廣泛的目標。 這裡有許多方法,例如 SMART 目標(或具體的、可衡量的、可實現的、相關的和有時間限制的)。 這些將定義一個成功的項目在完成時的樣子。 在這裡要現實一點——如果您當前的網站每月有幾百次訪問,不要指望在幾個月內達到 10,000 次,而無需付出一些認真的努力和投資。

同時,我們是 Google、LinkedIn 等人使用的目標和關鍵結果 (OKR) 方法的忠實擁護者。 這種技術可以很好地用於 Web 項目以及一般的業務策略。
這是一個很棒的視頻,它將為您提供有關 OKR 系統的一些背景知識。
編寫有效的 OKR 本身就是一門藝術,但這裡有一些很好的例子。 不過要記住的主要事情是,您的目標將在一定程度上定義網站的架構。
在最簡單的層面上,如果沒有聯繫表格,人們將無法與您聯繫。 同樣,如果您刪除一堆幫助解釋您的產品或服務是什麼的常見問題解答或博客文章,他們就不太可能取得聯繫。 這使我們進入下一步。

您可能有已經表現良好的頁面。 如果是這種情況,您需要識別它們,以便確保它們已內置到您的新結構中。 如果您在漏斗的任何位置放棄了會帶來流量的頁面,這可能會導致潛在客戶或銷售量的損失。 與 URL 更改一起,這可能是遷移或重大站點更新後流量下降的主要原因之一。 這似乎很明顯,但這是我們一次又一次看到的問題。
防止這種情況的第一步是查看 Google Analytics 或您使用的任何分析平台。 首先找出哪些頁面帶來了自然訪問。 這些應該優先納入您的新計劃,最好不要更改 URL 並在導航結構中保持突出位置。
另一個很棒的工具是關鍵字英雄。 這是相對較新的,但它插入 Google Analytics 並刪除了幾年前應用於自然關鍵字的<not provided>
標籤。

這使用了一些聰明的機器學習,這意味著您將能夠查看哪些關鍵字將流量吸引到您網站上的特定頁面。 這在計劃保留或刪除哪些頁面方面非常有用。
當然,就自然流量而言,並非所有頁面都很重要。 如前所述,有些可能是關鍵的預轉換或銷售,例如常見問題頁面,但很少帶來對該網站的入站訪問。 在此處查看頁面視圖和用戶流,以確保您沒有遺漏任何內容。
同時,值得牢記的是,您的數據可能並不完美。 檢查 Google Analytics 數據的有效性本身就是一個相當大的主題,但您可以採取的最簡單的步驟之一是檢查您的跟踪代碼是否正確實施。
同樣,我們不會在這裡詳細介紹。 但是,在執行內容遷移時,我們建議使用一種技巧。 網絡爬蟲 Screaming Frog 有一個很棒的功能,可以讓您檢查每個頁面上的分析代碼。 我們不止一次地發現了有價值的頁面,這些頁面沒有被跟踪,並且會在重新設計中丟失。

接下來,是時候開始查看您對哪些關鍵字可見了。 我們在這裡使用了一些工具,但最有用的是 SEMrush。 這會監控數十億個關鍵字並跟踪哪些網站正在為其排名。 通過查詢其數據庫,您可以查看您的網站在 Google 的搜索結果中出現了哪些關鍵字,而無需手動將它們輸入到跟踪器中。 它絕不是完美的,因此您需要手動檢查您認為可能錯過的任何術語的位置。


一旦你有了這些信息,你就可以開始在電子表格中將它們一起繪製。 這是一個示例文檔,您可以在第一個選項卡中看到初步發現。


對於 UX 和 SEO,了解您在與誰交談非常重要。 想想你的用戶會知道的語言或短語的類型,以及語氣。 他們是否響應圖像或副本、細節或項目符號、華麗的設計或更多技術頁面?
關鍵字研究在這裡也非常有用,因為它定義了術語並揭示了正確的詞彙——關鍵字研究最終如何過濾的另一個例子,並且對幾乎每一步都很重要。

既然我們知道我們在與誰交談,那麼您如何才能做到最好呢? 我們已經在本文檔前面解釋了以用戶為中心的關鍵字研究背後的概念,但這裡有一些關於我們如何自己去做的見解。 請注意,這本身可能是一個功能,所以為了簡潔起見,我們在這裡只關註一個大綱。
就我們的工具包而言,我們傾向於結合使用 SEMrush 和 Moz。 我們認為同時使用 AdWords 的關鍵字規劃器以及您可以使用的任何其他工具是收集數據的最佳方式,因為每種工具都有自己的優勢,而且長尾關鍵字的數據通常會可以在一種工具中使用,但不能在另一種工具中使用。
這是第一步。
- 列出我們可以找到的所有相關關鍵字以及我們擁有的數據,數量是最重要的。
- 我們還將包括一些衡量他們競爭程度的指標,以及當前是否已經為他們排名的指示。 我們這裡一般使用Moz數據,對應這個key。
鑰匙
0 - 15% | 非競爭性術語,通過優化頁面關鍵字使用可實現最高排名 |
16 - 30% | 低競爭,通過優化的頁面關鍵字使用和輕鏈接強度可實現最高排名 |
31 - 45% | 競爭激烈,排名靠前需要優化的頁面使用和適度的鏈接強度 |
46 - 60% | 只有高度優化的頁面內容和強大的鏈接強度才能獲得具有競爭力的頂級排名 |
61 - 75% | 競爭激烈的術語,最高排名需要頁面優化、完善的歷史記錄和強大的鏈接強度 |
76 - 90% | 極具競爭力的術語,只有通過高度建立的網站和壓倒性的鏈接強度才能獲得最高排名 |
91%+ | 在網絡上最具競爭力的術語中,只有最強大和最受歡迎的網站才能獲得排名 |
- 我們在這裡盡可能多地收集,以便客戶可以看到自己的研究,因此我們可以一次看到所有內容——當然,大部分內容最終都不會被使用,但長列表看起來比一些簡單的更全面,如果經過充分研究的建議。
與五年前相比,當用戶意圖對搜索引擎算法並不那麼重要或不被搜索引擎算法理解時,正是你對收集到的數據所做的事情使研究變得與眾不同並且更有價值。
從關鍵字研究數據中,需要出現網站結構和頁面列表,並儘可能明智地考慮。 為此:
我們會查看我們找到的所有內容,並根據數量、競爭來選擇關鍵字,但最重要的是,該網站是否能夠有效地滿足查詢背後的用戶意圖。 有時數字只是點擊在一起,但大多數情況下你必須妥協——用戶意圖始終是最重要的考慮因素。
然後,我們使用我們選擇的最通用或短尾關鍵字,並將它們視為意圖或主題“節點”,以加深我們的研究並增加我們對潛在有價值內容的洞察力。
除了查看關注著陸頁的關鍵字外,需要和想要的關鍵字和確切的短語(例如也是逐字搜索查詢的問題)也很重要。 AnswerThePublic 是一個很好的工具,可以擴展並查看用戶對您選擇的主題/關鍵字的疑惑。

- 通過擴展,您可以發現具有新意圖的新用戶,並想出新的內容來滿足他們。 因此,該網站是為迎合更多用戶而建立的,它對更多查詢進行排名,它獲得更多流量,它的權威增長,你最終會形成一個良性循環——而不是我們之前的惡性循環。
網站啟動時就提供經過充分研究的內容,從第一天起就能夠實現其價值,因此客戶最終獲得更多轉化和更多收入。 這樣,站點構建期間涉及的額外成本就可以抵消。

有了所有這些信息,就該開始規劃站點了。 定義在什麼頁面上發生了什麼。 了解內容在網站上的去向以及原因。 使其可擴展——添加或刪除內容應該很容易,因為業務目標可以迅速轉變。
對於這個階段,一切都需要有意義。 頁面需要鏈接,因為它在語義上有意義。 那些對用戶和搜索引擎都很重要的內容應該在您的導航中居高不下。
電子商務網站通常在這方面做得很好。 以下面的例子為例——類別和子類別結構意味著頁面應該使用明確的關鍵字。

另一方面,這是一個網站的示例,其中導航是浪費的機會。

沒有可以針對關鍵字組的服務頁面,也沒有任何主要類別的子頁面。 雖然“小型化”可能是一個很棒的概念,但它不是用戶會搜索的。 當然,在這種情況下,這可能不是優先事項,但我們一次又一次地看到這種佈局。
總的來說,這裡的危險可能是在這個階段沒有對 SEO 的認識,客戶可能希望從像我們的第一個示例那樣的導航切換到第二個示例。 在這種情況下,流量和收入都會面臨巨大的風險,作為網絡專業人士,我們有責任明確說明這一點。

雖然內容製作通常發生在項目結束時,但我們認為圍繞真實內容(而不是 lorem ipsum)進行設計更具成本和時間效率,因為它大大減少了項目完成後對設計修改的需求。
這裡還有一個非常有力的案例,即佔位符文本重申了內容次於設計的想法,並且在項目的層次結構中它是次要的。 凱爾·菲德勒(Kyle Fiedler)再次出色地闡述了這個想法,因此我們沒有必要涉足同一領域。
同時,到此為止,您的研究將為您提供為您的作家編寫令人驚嘆的簡報所需的所有信息。 相信我們,他們會感激的!
設計

是時候開始將它們整合在一起了。 初始線框應該是由內容開發定義的基本框和標題,並在此之前生成副本,概述網站的關鍵部分。 同樣,盡可能使用真實內容的線框。 Balsamiq 和wireframe.cc 等工具對此非常有用。

一旦創建了線框,設計就可以開始變得更加現實。 添加一些品牌標識,例如顏色托盤、實際的客戶徽標、公司排版和字體。 此時,您應該開始確切了解網站的外觀。 任何更改都應在此階段進行——編輯 Photoshop 文件比更改代碼容易得多。
發展
到了這個階段,實際的開發階段應該是直截了當的。 為基本設計編寫 HTML 和 CSS 代碼,然後專注於任何交互元素。 從 SEO 的角度來看,值得一提的是 Javascript 是一個非常熱門的話題。 Google 在處理 JS 方面遠非完美,因此控制導航或關鍵內容顯示的腳本需要非常小心地實現。 可以在此處找到有關此主題的更多信息。

根據我們的經驗,這通常是任何項目中最慢的部分。 但是,由於所有內容創建都在流程的早期完成,這項任務應該只需要復制並粘貼到 CMS 中,從而節省大量時間、壓力和延遲。

像往常一樣,測試,測試,再測試。 抓取網站,添加所有跟踪代碼,添加到 Search Console,確保它被編入索引 - 完整的作品!

我們是對的嗎? 目標成功了嗎? 一個網站永遠不會完成。 不斷跟踪和報告,始終牢記項目開始時設定的目標。
雖然看起來很多,但整個過程只添加了幾個額外的步驟。 通過關鍵字研究和內容策略作為項目開始時的重點,網站的目標更加明確,其整個結構被規劃和理解,一切都在正確的位置。 兩個成本高昂且複雜的項目,一個 SEO/內容活動和網頁設計,合而為一——而且一個更易於管理、更高效,並最終產生更好的結果。
這是一種理想的情況——大多數時候我們的工作涉及在沒有考慮 SEO 的情況下構建的網站上工作,然後我們會提供幫助。 隨著越來越多的人意識到 SEO、開發人員和設計師在項目上合作而不是按順序合作背後的邏輯,我們看到我們的角色發生了轉變,這會在此過程中破壞彼此的努力。
延伸閱讀
- “搜索引擎優化和網站設計:你需要知道的一切”,搜索引擎土地
- “內容策略:優化您的成功努力,” Allie Gray Freeland,Smashing Magazine
- “內容策略與講故事,”
- “文字”,粉碎雜誌
- “設計語音體驗”,Smashing Magazine 的 Lyndon Cerejo
- “關鍵詞研究”,搜索引擎優化學習中心,Moz.com
- “了解用戶意圖的重要性”,UXmatters 的 Jordan Julien
- “約翰是客戶密集還是你讓他失望了?”保羅博格,粉碎雜誌
- “在 PPC 廣告系列中降低 CPC 成本的 5 種方法”,Alex Chris,DigitalMarketingPro.net
- “為什麼網頁設計師需要 SMART 目標以及如何編寫它們,”James George,Design Crawl
- “英雄是如何做到的?”信息圖,關鍵字英雄
- “如何檢查所有頁面上的 Google Analytics 代碼”,SiteVisibility
- “Lorem Ipsum 正在扼殺你的設計,”Kyle Fiedler,Smashing Magazine
- “SEO 是網頁設計過程的一部分嗎?”,TemplateMonster 的 Carla Dawson
- “為什麼要與營銷公司合作設計您的網站,” Xander Marketing