內容重頁的 4 個設計技巧
已發表: 2015-08-10最近，當我正在審查一個新網站的發布和重新設計時，我發現自己對我看到的每一個新的、很酷的設計功能都點頭表示同意。 然而，當我繼續滾動時，我在網站設計中發現了一些東西，這讓我所有的興奮都戛然而止。 你問，什麼可能會在視覺上如此令人反感？ 文字的長城。 我不是在談論僅僅一兩行文案，而是大段落破壞了網站簡約設計的流暢性。 用戶和我留下了大量肯定永遠不會被閱讀的內容。
然而，作為一名在搜索引擎優化方面經驗豐富的營銷人員，我知道在許多情況下，這段文字是一種痛苦的必需品。 如果給定頁面上沒有大量的關鍵字豐富的文本（比如說大約 600-700 個單詞），那麼該頁面不太可能在搜索引擎中有機地排名。 但是，總有一些方法可以實現您對排名良好、內容繁重的頁面的渴望，以及您對提供無縫用戶體驗的精美清晰網站的渴望。 管理良好平衡的最佳方法之一是將您的文本包含在您的網頁中，但除非用戶追求，否則不要將其放在視線之外。 通過這種方式，您的內容將出現並且能夠被搜索引擎抓取，但在大多數情況下可以保持在視線之外。 有幾個站點功能在實施時可以幫助實現這一目標。 以下 4 個站點功能對於滿足這兩個需求特別有幫助。 通過應用以下任何元素，您可以幫助製作在視覺上令您的用戶感到愉悅的網頁，並為您的品牌提供 SEO 友好。
1. 翻轉狀態
翻轉是將引人注目的視覺內容與信息豐富的文本結合起來的好方法。 懸停/懸停狀態有多種選項，可以讓您包含一小段文本，當您的光標懸停在特定圖像上時將顯示這些文本。 應用時，圖像通常會變成半透明，文本會疊加在上面。 Emporium Pies 使用這種技術為其網站上的每個產品提供詳細信息和號召性用語。 當您將鼠標懸停在其中一個餡餅的圖像上時，您將看到新信息，包括名稱、成分以及繼續了解有關該單個餡餅的更多詳細信息的選項。 該公司利用這個機會用他們的產品形象吸引潛在客戶，然後繼續他們進入一個新的頁面，其中包含更多引人入勝的內容，例如餡餅的製作方法、成分，甚至是關於它的??飲料的建議最適合搭配。 該網站提供了大量信息和內容，並且僅在用戶選擇使用該信息時才提供該信息，從而使其用戶友好。
雖然 EmporiumPies.com 將這種技術用於產品圖像，但這種方法也有助於社交鏈接、標籤和號召性用語； 它可以很容易地用於包含一小段關鍵字豐富的副本。 在這兩種情況下，每張圖片都可以提供包含關鍵字富文本以幫助您的頁面排名的機會。
2. 旋轉木馬
實施旋轉輪播或圖像滑塊可以在您的網頁上打開大量空間。 圖像輪播使您的網頁區域可以替換為一系列交替的“幻燈片”和消息。 您可以使用此站點功能包含的副本數量僅受您選擇包含的幻燈片數量的限制。
商業投資公司 Evolution Capital Partners 主頁上的輪播可容納顯示在每張幻燈片上的小段文本。 它們保持在視線之外，直到用戶單擊並滾動瀏覽輪播的每個部分。 這使公司有機會在其頁面上包含四倍的內容量，而不會壓倒或分散訪問者的注意力。 四個是一個空間？ 不錯的選擇。
3. 導航標籤
在設計簡潔的頁面上包含附加副本的另一種方法是在導航選項卡中隱藏文本。 例如，Blue Fountain Media 的網站包括案例研究頁面，其中包含僅在選擇該選項卡時才可見的選項卡式內容。
這使我們能夠展示視覺元素，例如我們工作的屏幕截圖和比較，但也為我們留下了包含一些與我們提供的服務相關的關鍵字富文本的空間。 我們現在可以選擇將其均勻分佈在多個不同的選項卡上，而不是在一個頁面上展示我們所有的工作。
4.點擊展開
與導航選項卡類似，單擊展開功能會隱藏內容，直到用戶單擊“更多”或“詳細信息”號召性用語。 點擊展開是一個特別有用的功能，因為它允許營銷人員隱藏內容，同時吸引訪問者閱讀剩餘的副本。 此功能使您可以用一小段初始信息來取笑讀者，這些信息暗示了整個副本的整體主題。 將引人入勝的預覽與強烈的號召性用語相結合，可以提高您的內容被閱讀的機會。 您可以包含您想要的所有信息，並讓讀者選擇是否要繼續閱讀。
Dujour 的預告文本，帶有展開按鈕。 網絡月刊Dujour.com很好地融入了點擊展開功能。 頭版展示了許多單獨的故事，只顯示了一個簡短的小簡介來指示每個故事的內容。 單擊“閱讀更多”號召性用語後，每個完整故事都會完全打開，展開顯示，並允許您閱讀和滾動多個段落。 這種緊湊的設計允許在任何給定時間向讀者展示許多不同的文章，而不會佔用網頁上太多的空間。 Dujour 能夠顯示相當數量的內容，同時不會影響用戶體驗。
具有擴展內容的 Dujour。 在實施整合網站內容和文本的技術時，務必小心謹慎。 雖然偽裝和任何其他陰暗的 SEO 技術顯然會導致 Google 受到處罰，但這些策略是以更微妙的方式包含文本的安全且合法的方式。 您是否有其他方法可以謹慎地包含大量文本？ 在下面的評論中讓我們知道或在推特上@BFMweb。