創作網路故事的最佳做法

遵循以下創作網路故事的最佳做法,就能持續吸引觀眾。建議先把重心放在重要的事項,如果還有時間,再遵循其他建議的最佳做法。

述說故事

述說故事的重要最佳做法
影片優先 影片比文字或圖片更具吸引力。請盡可能使用影片,並以圖片和文字做為補充。

更多述說故事的最佳做法

述說故事的建議最佳做法
加入個人觀點 深入探索事實背後的意義,分享您的個人意見。讓故事更貼近個人,引起共鳴。
建立敘事線 在不同網頁之間營造故事的懸疑性。透過提供背景資訊和敘述文字,引導使用者逐步瞭解故事進展。在故事最後,為觀看完整內容的觀眾提供一點回報。

設計

設計的重要最佳做法
減少字元數 避免使用多個含有大段文字的網頁。建議將文字量減少至每頁大約 280 個字元,也就是一則 Twitter 訊息的長度。
不要遮擋文字 確認網頁上的其他內容並未遮擋住文字。避免將文字內嵌在圖片中,這樣當系統為配合不同裝置尺存而調整圖片大小時,可防止文字受到遮擋。
讓文字保持在範圍內 確保觀眾都能看到網路故事中的所有文字內容。避免將文字內嵌在圖片中,這樣當系統為配合不同裝置尺存而調整圖片大小時,可防止文字溢位。
謹慎使用動畫 運用動畫讓故事更生動活潑,不過請避免使用容易使人疲乏的擾人或是重複性動畫。

更多設計最佳做法

設計的建議最佳做法
使用網路故事專用的行動號召 如果故事本來是為 Instagram、Snapchat 或 YouTube 等社交平台所創作,在重新改造故事時,請務必移除特定平台專屬的任何觀眾行動號召。請確保使用者能夠執行網路故事中建議的任何動作。
使用滿版影片和圖片 在故事中使用滿版的素材資源,提供觀眾更身歷其境的體驗。
避免使用低解析度或變形的圖片及影片 使用高畫質圖片,並謹慎調整圖片大小,以符合直立的畫面。
為封面網頁加上標誌 加入能代表品牌的高解析度標誌。
縮短影片長度 建議每個網頁的影片長度不要超過 15 秒,或者最長不超過 60 秒。
加入音訊 使用長度至少 5 秒且音量適中的高品質音訊片段,並確保語音能夠正常聽見。
考慮在僅有影片的故事中使用自動播放功能 在影片型的網路故事中使用影片自動播放功能,能為訪客帶來輕鬆愉快的使用體驗。

搜尋引擎最佳化 (SEO)

SEO 的重要最佳做法
提供優質內容 和任何網頁一樣,網路故事最重要的目的是提供觀眾實用又有趣的優質內容。因此請提供完整的敘事結構並遵循述說故事的最佳做法,以吸引觀眾繼續觀看。
保持標題簡短 標題長度不得超過 90 個字元。建議使用少於 70 個字元的描述性標題。
確保 Google 搜尋能找到您的故事 請勿在故事中加入 noindex 屬性,這個屬性會禁止 Google 為網頁建立索引,並讓該網頁無法顯示在 Google 上。此外,請將您的網路故事加入 Sitemap。您可以透過 Search Console 中的索引涵蓋範圍報表Sitemap 報告,確認 Google 是否能找到您的網路故事。
讓網路故事成為標準網頁 所有網路故事都必須為標準網頁。請確定每則網路故事都使用 link rel="canonical" 指向自身。例如:<link rel="canonical" href="https://www.example.com/url/to/webstory.html">
附加中繼資料

確保網路故事符合 AMP 故事中繼資料規範。您可以加入網頁中常用的標記,例如:

更多 SEO 最佳做法

SEO 的建議最佳做法
加入結構化資料 建議在網路故事中加入結構化資料,協助 Google 搜尋瞭解網路故事的結構和內容。
在圖片中加入替代文字 建議在圖片中加入替代文字,讓使用者更容易找到您的故事。
將故事整合到網站中

建議將網路故事整合進您的網站,例如在首頁或適當的類別頁面中設置連結。舉例來說,如果您的網路故事以旅遊目的地為主題,而您的網站其中有一頁列出了所有與旅遊相關的文章,那麼也請在該類別頁面上連結該則網路故事。也可以將網路故事連結至 www.example.com/stories 這類特殊到達網頁,這類網頁會從首頁等重要網頁中連出。

使用 AMP 故事網頁附件 AMP 故事網頁附件可呈現除了網路故事本身以外的其他資訊。這項功能非常實用,可針對網路故事呈現的內容提供額外詳細資訊、深入探討或未來發展。
在影片中加入字幕 加上影片字幕,方便觀眾進一步瞭解故事內容。避免在影片中直接嵌入字幕,以確保字幕不會與其他內容重疊或出現在畫面外。
對純影片故事進行最佳化調整

建議採用語意式 HTML 來建構網路故事。不過,有些網路故事編輯工具在匯出故事時採用的格式,可能會將每張投影片都轉換為一個影片檔案,並將該投影片中的所有文字嵌入影片中。在這種情況下,我們建議以 amp-video 元素 title 屬性的形式,加入該影片中的完整文字。再次提醒您,請只在網路故事無法使用語意式標記時才採用這種做法。

支援橫向顯示器 如要讓電腦版 Google 搜尋結果顯示網路故事,請支援橫向顯示器

技術

技術方面的重要最佳做法
確保故事網頁格式正確 網路故事必須是有效的 AMP 網頁。為了避免無效 AMP 的問題,請使用 AMP 驗證工具來測試故事,並修正任何偵測到的錯誤。
避免在代表圖片中加入文字 避免使用包含嵌入文字的圖片,因為當使用者在搜尋結果中預覽故事時,這類圖片可能會干擾故事的標題。如果使用者無法清楚閱讀標題,繼續閱讀的可能性就會降低。
加入大小適當和顯示比例合宜的代表圖片 請確保與 <amp-story> poster-portrait-src 屬性連結的圖片至少為 640x853 像素,且使用的顯示比例為 3:4。
加入顯示比例合宜的標誌 請確保與 <amp-story> publisher-logo-src 屬性連結的標誌圖片至少為 96x96 像素,顯示比例為 1:1。

更多技術最佳做法

技術方面的建議最佳做法
加入 og:image 建議在 <meta> 標記中加入 og:image,讓使用者更容易找到您的故事。

其他資源