Web Stories 是網頁版的限時動態?如何打造成功的 Web Stories?

如何打造成功的 Web Stories?

Web Stories 可以很輕鬆地閱讀,讀者喜歡在短時間快速閱讀,等待大眾運輸的時間或喝咖啡的時間,有機會吸收經過濃縮的內容精華。以下方法幫助你打造令人滿意的 Web Stories,以確保每一次閱讀都能吸引人並帶來愉悅。

什麼是Web Stories?

AMP Stories在2020年五月時改名為Web Stories,由於背後的技術架構是AMP,且早期名稱為AMP Stories,所以還是可以看到有人以AMP Stories稱呼之,但正確的官方名稱是Web Stories。

類似於Instagram和Facebook的限時動態,Web Stories 利用更視覺化的方式傳遞內容,並同時保有速度上的優勢。很多美國出版媒體都已經採取了類似的技術。

不同於社群媒體平台限時動態的是,Web Stories 是一個網頁,有著自己的網址,所以搜尋引擎能夠抓取並索引上面的內容,而任何人都能透過搜尋或直接在瀏覽器上輸入網址找到Web Stories

Web Stories 範例:Forbes專題報導

網址:Expert Grilling Tips from Famous Chefs

截圖 2022 03 05 上午11.47.00
美國網路媒體使用Web Stories製作圖文報導

先來快速地說說幾個重點:

  • 講一個完整而有趣的故事。
  • 高質量的圖片和醒目的標題可以提高封面的影響力。
  • 利用全屏滿版的影片或圖像製作。
  • 你可以利用精簡的文字表達你的內容,尤其是在使用視覺圖像時,每頁少於10個英文單字(中文內容則是2-4行)。
  • 使用影片時,最好選擇較短的影片,15秒以內的影片為佳。
  • 某些人和某些情況下需要無聲觀看,透過為影片添加字幕來保持內容的包容性。
  • 給讀者一些啟發,平均長度為10到20頁,使大多數作者都能講述一個好的故事。
  • 不要過度使用動畫或嵌入動畫,並注意過場時間。

了解你要訴說的故事

計劃你的故事介紹,並建立完整的敘述,知道要說的內容後,將其分解,可以撰寫故事大綱,每個 Web Story 頁面應傳達一個能與其他頁面緊密結合的想法。

每個 Web Story至少必須有4頁,理想情況下應少於30頁。Web Stories 必須講得很好並且易於讀者消化。如果你的敘述需要,請超過30頁。

吸引人的故事封面

封面是 Web Story 的包裝,這是讀者首先看到的東西,如果他們不打開它,則只會看到封面內容。確保封面具有吸引力!好的封面要包含兩個要素:醒目的圖像和簡短易記的標題。

圖像

使用適合全屏的高質量肖像圖像或影片,透過添加收藏夾圖標和 logo,讓讀者知道你的品牌。

標題

保持標題清晰整潔,最好少於10個字,且少於40個字符。如果是有時效限制的故事,請包括作者和出版物名稱,並添加發布日期等資訊。

品牌和日期

讀者需要知道誰發布了Web Story,以及何時發布。在封面上註明品牌logo 和出版日期,可以增進信任,如果用戶喜歡你的內容,也可以提高忠誠度。這個由CNN發布的 義大利旅遊 Web Story ,可以從故事封面很容易地看到是誰發布這個故事以及標題、時間。

優質的視覺內容

優質的視覺效果吸引了讀者,並吸引了他們的注意力,使他們可以輕鬆、快速地閱讀內容。主要使用高質量的影片和圖像,且所有圖像和影片應為全屏,並在有意義的地方添加一些動畫效果。

影片

影片吸引了眾多讀者,可以在你的 Web Story 中盡量準備多一點影片內容。每個頁面的影片應少於15秒,如果你有較長的影片,請考慮將其分成較短的秒數。

Web Story 是以直式使用的,因此請記住以下幾點:

  • 盡可能在高端行動設備中拍攝影片。
  • 以480p拍攝。
  • 每秒至少拍攝24幀。
AMP 001
圖片來源:AMP

調整影片大小,以便在底部留出足夠的空間容納文本和字幕,並非所有讀者都能或希望聽到影片內容。

圖片

使用具有高解析度(828 x 1,792)的全屏圖像,避免橫向裁切照片。

將圖像重點放在重要的方面,裁切不必要或分散注意力的元素,並確保照片的關鍵主題清晰且完整。請記住,頂部和底部可能會在某些設備上被裁剪,因此請進行相應的測試。

AMP 002
圖片來源:AMP

文字內容

確保文字內容的可讀性,盡量使用大小24pt 以上的字體,應使其盡可能大且清晰,將文字顏色與故事頁面背景或圖像做對比設計,例如加上文字底色等等,且不要使用只有文字的圖像或影片。

若有文字很多的內容,應將其精簡化,可以以標題配上內容摘要呈現,並利用頁面附件的功能,在頁面附件中包含完整文字內容,如果感興趣,他們可以在行動裝置上向上滑動閱讀完整內容。盡量不要讓文字內容佔據整個故事頁面的10%以上。

這些基本的內容你都掌握了嗎?可以多多練習並設計屬於你的網站或文章的 Web Stories 唷!

資料來源:Best practices for creating a successful Web Story

延伸閱讀:Google 新推出 WP 外掛可望帶來更多流量

如何編輯網頁圖、文 /part 4:分類圖集、回饋評論

如何編輯網頁圖、文

Elementor教學:在這篇文章中將說明如何使用 Elementor 為網頁編輯圖、文內容,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget (小工具) ,只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,在網頁編輯上也較簡單易懂,可以輕鬆地完成編輯圖文的動作。

本篇教學以 demo-002 作示範,以下教學將會用圖片及文字的方式呈現。

Gallery(圖集)分類版 更換網頁圖片文字

可以發現這裡的Gallery最上面有一排分類,現在看到的是All全部的圖片。

T demo0035
Gallery

點選分類開胃菜後,就會剩下開胃菜的圖片,而這裡也設定滑鼠游標滑過圖片時會顯示文字介紹。

T demo0038
Gallery

欲編輯該項目,同樣地在它上面點選右鍵,編輯 Gallery,這裡不建議直接按左鍵,可能會點開圖片。

T demo0036
Gallery 設定

左側編輯區域顯示的是分類,也可以新增分類,分類標題點開後就可以編輯圖片。

T demo0039

Title可以編輯分類名稱,點選圖片區可以編輯圖庫。

T demo0037 1
點開圖庫會出現編輯視窗

可以新增或刪除此分類的圖片,也可以編輯圖片的標題及說明文字。

回饋、評論文字編輯

T demo0040
此兩個評論須分開編輯

在此demo設計中,只有兩個評論,且不會有輪播動畫。欲編輯該項目,同樣地在它上面點選右鍵,編輯 Testimonial Carousel,或直接按左鍵。

T demo0041
編輯 Testimonial Carousel

左側編輯區域中,點開Item #1 即可編輯文字。

T demo0042
編輯 Testimonial Carousel

這裡的顧客回饋只有 Content Name 有內容,只需要編輯此兩個區域即可。

若你看過其他demo,可以發現有些顧客回饋或評論還有大頭貼及Title描述,也是在這裡做編輯。

其他教學文章

如何編輯網頁圖、文 /part 3:行動呼籲圖文、計數器、banner圖片

如何編輯網頁圖、文

Elementor教學:在這篇文章中將說明如何使用 Elementor 為網頁編輯圖、文內容,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget (小工具) ,只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,在網頁編輯上也較簡單易懂,可以輕鬆地完成編輯圖文的動作。

本篇教學以 demo-002 作示範,以下教學將會用圖片及文字的方式呈現。

編輯 Call to action(行動呼籲) 圖文

滑鼠移到圖片上會有文字顯現,這個要怎麼修改呢?

T demo0027
Call to action

欲編輯該項目,同樣地在它上面點選右鍵,編輯 Call to action,或是直接按左鍵。

T demo0028
此四個 Call to action 圖文是需要分開編輯的

左側的編輯區域可以看到 ImageContent

Image 區塊點選圖片可以更換圖片,Content 區塊可以更改標題描述

計數器的數字、文字編輯

在一些網站中可以看到計數器,會跑數字的小動畫,要更改數字及符號等也是很容易的。

T demo0031
圖中的三個%數區塊就是計數器

欲編輯該項目,同樣地在它上面點選右鍵,編輯計數器,或是直接按左鍵。

T demo0032
此三個計數器區塊是需要分開編輯的

左偏區域可以編輯數字及數字後欲呈現的符號,這裡是? %,開始數字1,動畫會從數字1開始跑到結束數字90。計數器的標題也可以更改。而計數器下方的台灣當地新鮮食材,可以直接點選修改。

橫幅banner圖片修改

此demo中的橫幅banner是圖文分開的,可以直接分開修改。

T demo0033
橫幅banner

更改圖片時,須在藍色框框上按右鍵,選擇編輯段

T demo0034
橫幅banner 設定

在左側編輯區域上方點選樣式,樣式下的背景就是更改圖片的地方。欲修改文字部分的話,只要在文字上按右鍵編輯就可以了。

其他教學文章

如何編輯網頁圖、文 /part 2:切換收合工具、圖示方框

如何編輯網頁圖、文

Elementor教學:在這篇文章中將說明如何使用 Elementor 編輯網頁圖、文內容,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget (小工具) ,只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,在網頁編輯上也較簡單易懂,可以輕鬆地完成編輯圖文的動作。

本篇教學以 demo-001 作示範,以下教學將會用圖片及文字的方式呈現。

切換小工具(收合列表)編輯文字

繼續往下滑 demo-001,可以看到菜單區域。

T demo0020
切換小工具
T demo0021
切換小工具

在 Our Menu 右側的菜單,稱為切換小工具,是可以收合的列表。欲編輯該項目,同樣地在它上面點選右鍵,編輯切換,或是直接按左鍵。

T demo0022
切換小工具設定

左側為編輯區域,可以編輯切換項目,也可以刪除或新增項目

T demo0023
切換小工具設定

點按項目可以編輯標題描述內容,拖曳標題區塊可以變換前後位置。

編輯圖示方框

可愛的圖示加文字也可以自己編輯唷!

T demo0024
圖示方框

在欲編輯的圖示方框上方按右鍵選擇編輯,或直接按左鍵,編輯區塊會出現在左側。

T demo0025
此三個圖示方框是需要分開編輯的

左側編輯區塊,可以看到圖示標題描述內文連結區域,可以直接進行修改。別忘了修改完畢後,記得更新儲存!

其他教學文章

如何編輯網頁圖、文 /part 1:大圖輪播、文字內容、圖集

如何編輯網頁圖、文

Elementor教學:在這篇文章中將說明如何使用 Elementor 為網頁編輯圖、文內容,Elementor 是一套網站前端視覺編輯器,裡面具有許多已經完成程式碼建構的 widget (小工具) ,只需要在網頁模板上建立網頁區塊,再將小工具以拖曳的方式加入到網頁中,就能完成網頁編輯的動作,在網頁編輯上也較簡單易懂,可以輕鬆地完成編輯圖文的動作。

本篇教學以 demo-001 作示範,以下教學將會用圖片及文字的方式呈現。

大圖輪播替換圖文

一進到網頁我們會看到大圖輪播。

T demo008
大圖輪播

如何編輯輪播中的圖文呢?我們進到使用Elementor編輯的後台後,在圖上點按右鍵。

T demo001
在編輯網頁中的輪播圖上點右鍵,並按編輯Slides

左側編輯區就是主要更改圖文的地方,除了編輯原有的圖文,也可以看到新增項目

T demo002
左側會跑出編輯區域

目前有三張輪播圖,因此有三個項目,點按項目之後就可以編輯圖片及圖中的文字。

編輯完成後,記得按下更新儲存,以免編輯後的內容不見(養成按下儲存的好習慣!)

標題、文字內容編輯

往下滑,我們可以看到介紹的區塊。

T demo009
標題、文字內容編輯

同樣的,我們在欲編輯的文字旁邊點選右鍵,或是直接在文字上按左鍵。

滑鼠移到文字上方時會跑出藍色區塊,可以在藍色區塊右上方的鉛筆圖示點選右鍵

同樣在左側就可以看到編輯欄位出現,文字編輯器也有一些基本功能,例如粗體、斜體等等。

樣式的區塊可以修改文字的對齊方式、字型、大小、行高等等。

更換 Gallery(圖集) 圖片

接下來,我們可以看到四個正方形的圖片,屬於圖集。

T demo0017 1
Gallery

同樣地在圖上點選右鍵後,編輯Gallery。

T demo0018 1
左邊區塊為編輯區域

點按圖片區可以更改圖片,Order by 則是圖片排列的順序,現在是選擇 Random(隨機排列),每次重新整理後圖片的排列順序都不同。也可以選擇 Default(預設值),就會依照後台的圖片順序做排列。Link 的部分則是點選圖片後會呈現什麼,現在是 Media File(媒體檔案),點選圖片後會出現該圖的畫面,另外有 NoneCustom URL(連結) 可以選擇。

T demo0019 1
點按圖片區或跑出編輯圖庫的視窗

可以先把原來的圖片刪除(按叉叉按鈕),再點選新增至圖庫,可以上傳新的圖片或是選擇媒體庫原有的圖片,選擇四張圖片後在右下角點選新增至圖庫,會回到這個畫面,再按右下角的插入圖庫就大功告成!而這裡的圖片順序就是預設值會出現的圖片順序,若要變換順序,可以將圖片前後拖曳更換位置。

其他教學文章

12個你需要知道的HTTP狀態碼

你需要知道的HTTP狀態碼
section 006
當網站跳出404

什麼是HTTP狀態碼(HTTP Status Codes)?

這些狀態碼等同於瀏覽器瀏覽網站當時和伺服器之間對話,他們溝通了兩者之間是否可以接觸並且是否有問題,了解狀態代碼以及如何使用它們將有助於快速診斷網站錯誤,從而最大限度地減少網站的停機時間,您甚至可以使用這些狀態代碼中的一部分來幫助搜尋引擎和人員訪問您的網站,HTTP 狀態碼的正確性,也關係到 SEO 的友善程度

HTTP 狀態碼分為五種回應

  1. 資訊回應 (Informational responses, 100199)
  2. 成功回應 (Successful responses, 200299)
  3. 重定向 (Redirects, 300399)
  4. 用戶端錯誤 (Client errors, 400499)
  5. 伺服器端錯誤 (Server errors, 500599)

較常見的HTTP狀態碼

“200” OK

請求成功,很棒。

成功的意義依照 HTTP 方法而定:

  • GET:資源成功獲取並於訊息主體中發送。
  • HEAD:entity 標頭已於訊息主體中。
  • POST:已傳送訊息主體中的 resource describing the result of the action。
  • TRACE:伺服器已接收到訊息主體內含的請求訊息。

“301” Moved Permanently

已永久移動到新位置。

請求資源的 URI 已被改變。有時候,會在回應內給予新的 URI。

“302” Found(Moved Temporarily)

暫時移到新位置。

“400” Bad Request

明顯的用戶端錯誤,伺服器無法處理這個請求。

“401” Unauthorized

未認證。

需要授權以回應請求。它有點像 403,但這裡的授權,是有可能辦到的。

“403” Forbidden

沒有權限。

用戶端並無訪問權限,例如未被授權,所以伺服器拒絕給予應有的回應。不同於 401,伺服端知道用戶端的身份。

“404” Not Found

找不到資源。

這意味著伺服器找不到瀏覽器正在請求的文件或網頁,404不會標註缺少的網頁或資源是否永久遺失或只是暫時遺失,您可以試試在自己網站上輸入不存在的網址,就可以看到這樣的網頁狀態碼,你的訪客如果碰到一個有404錯誤的網頁,可能會再嘗試看看,或是會尋找相同資訊的另一個網站。

網站可能會有一些回應404錯誤的網頁,這些網頁並不是只能選擇重新定向,還有其他的操作方式。許多人會誤解「將404錯誤網頁使用301重新定向,讓網頁轉移至特定網址的首頁」是維持SEO的最佳辦法,不過在多數情況來說,這並不是好方法,因為它會使用戶不明白造訪的網頁已不存在。

如果產生404錯誤網頁的網頁是流量較大的高權威網頁,或者訪客或連結想要到達的確定網址,則應該使用301個重新定向到最相關的頁面, 例如如果您的網頁設計方案不再存在,則可能需要將此URL重新定向到您的網頁設計方案分類網頁。

在這些實例以外,是有必要將失效的URL連結導向到一個404錯誤頁面,這將防止它們被搜尋引擎索引並重複爬取,按照Google Search Console指南的建議,為您的訪問者提供自定義404錯誤頁面的好的方式, 例如購物車網站在產品下架時經常會產生404錯誤頁面,所以這些網站是建置自定義的404錯誤頁面是好選擇。

“410” Gone

過時網頁。

410比404保存得更久,這代表著該網頁已經消失。 該頁面不再可用,並且沒有設定轉址,您網站上的任何指向410頁面的連結都將瀏覽器和訪客發送到一個遺失的網頁連結,所以如果您看到410頁面,請從您的網站內容中刪除任何引用或連結。

“500” Internal Server Error

伺服器端錯誤。

這問題並不是頁面缺漏或者是無法找到網頁,而是明顯的伺服器問題,500狀態碼是個典型的伺服器錯誤,將會影響瀏覽你網站的人,人類用戶和機器人同樣都會無法瀏覽,你的連結權限將無法傳遞,搜尋引擎更喜歡維護良好的網站,因此您需要調查這些狀態代碼,並在遇到這些代碼時立即進行修正。

“502” Bad Gateway

通常是伺服器的某個服務沒有正確執行。

“503” Service Unavailable

伺服器臨時維護或是快掛了,暫時無法處理請求。

500狀態碼的另一種類型,503狀態碼代表著伺服器目前無法使用,每個人(人或其他)會被要求稍後再回來,這可能是由於伺服器暫時超載或伺服器維護中,一個503狀態碼確保搜尋引擎知道情況,讓它過一陣子就會回來,表明網頁或網站只會短暫停機。

“504” Gateway Timeout

伺服器上的服務沒有回應。

200請求成功,很棒。
301已永久移動到新位置。
302暫時移到新位置。
400明顯的用戶端錯誤,伺服器無法處理這個請求。
401未認證。
403沒有權限。
404找不到資源。
410過時網頁。
500伺服器端錯誤。
502通常是伺服器的某個服務沒有正確執行。
503伺服器臨時維護或是快掛了,暫時無法處理請求。
504伺服器上的服務沒有回應。
常見的HTTP狀態碼 表格統整

資料來源:HTTP Status CodesHTTP 狀態碼

延伸閱讀:HTTP 301、302轉址的差異