提供意見
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
創作網路故事的最佳做法
遵循以下創作網路故事 的最佳做法,就能持續吸引觀眾。建議先把重心放在重要的事項,如果還有時間,再遵循其他建議的最佳做法。
述說故事
述說故事的重要最佳做法
影片優先
影片比文字或圖片更具吸引力。請盡可能使用影片,並以圖片和文字做為補充。
更多述說故事的最佳做法
述說故事的建議最佳做法
加入個人觀點
深入探索事實背後的意義,分享您的個人意見。讓故事更貼近個人,引起共鳴。
建立敘事線
在不同網頁之間營造故事的懸疑性。透過提供背景資訊和敘述文字,引導使用者逐步瞭解故事進展。在故事最後,為觀看完整內容的觀眾提供一點回報。
設計
設計的重要最佳做法
減少字元數
避免使用多個含有大段文字的網頁。建議將文字量減少至每頁大約 280 個半形字元,也就是一則 Tweet 的長度。
不要遮擋文字
確認網頁上的其他內容並未遮住文字。避免將文字內嵌在圖片中,這樣當系統為配合不同裝置尺存而調整圖片大小時,可防止文字受到遮擋。
讓文字保持在範圍內
確保觀眾都能看到網路故事中的所有文字內容。避免將文字內嵌在圖片中,這樣當系統為配合不同裝置尺存而調整圖片大小時,可防止文字溢位。
謹慎使用動畫
運用動畫讓故事更生動活潑,不過請避免使用容易使人疲乏的擾人或是重複性動畫。
更多設計最佳做法
設計的建議最佳做法
使用網路故事專用的行動號召
如果故事本來是為 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 故事技術。因為在理想情況下,您的網路故事都已經整合至更廣泛的網址策略中。
舉例來說,如果有關於 "New York Travel" 的文章採用了 "/new-york/travel/title-of-article.html"
這樣的格式,請考慮為網路故事採用完全相同的目錄結構和網址格式。
使用 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
,讓使用者更容易找到您的故事。
其他資源
提供意見
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權 ,程式碼範例則為阿帕契 2.0 授權 。詳情請參閱《Google Developers 網站政策 》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-03-22 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
想進一步說明嗎?
{
"last_modified": "上次更新時間:2024-03-22 (世界標準時間)。",
"state": ""
}