ส่งความคิดเห็น
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
แนวทางปฏิบัติแนะนำสําหรับการสร้าง Web Stories
ทำตามแนวทางปฏิบัติแนะนำสำหรับการสร้าง Web Stories เพื่อดึงดูดความสนใจของผู้อ่าน เราขอแนะนำให้โฟกัสที่งานสำคัญก่อน และถ้าคุณมีเวลา ก็ลองทำตามแนวทางปฏิบัติที่เราแนะนำได้
การเล่าเรื่อง
แนวทางปฏิบัติแนะนำที่สําคัญสําหรับการเล่าเรื่อง
ให้ความสำคัญแก่วิดีโอ
วิดีโอดึงดูดความสนใจได้ดีกว่าข้อความหรือรูปภาพ จึงควรใช้วิดีโอให้มากที่สุด แล้วเสริมด้วยรูปภาพและข้อความ
แนวทางปฏิบัติแนะนำเพิ่มเติมสำหรับการเล่าเรื่อง
แนวทางปฏิบัติที่แนะนำสําหรับการเล่าเรื่อง
แสดงมุมมองของคุณ
ไปให้ไกลกว่าเพียงข้อเท็จจริง แชร์สิ่งที่คุณคิด บ่งบอกความเป็นคุณในเรื่องราวที่เล่า เล่าด้วยวิธีที่ทุกคนเข้าถึงได้
สร้างโครงเรื่อง
สร้างเรื่องราวที่ทำให้ผู้อ่านสงสัยใคร่รู้และอยากติดตามต่อไปเรื่อยๆ นําผู้ใช้ร่วมทางไปด้วยกันโดยให้ข้อมูลบริบทและการเล่าเรื่อง พร้อมจบเรื่องราวโดยสมบูรณ์เพื่อให้ผู้อ่านรู้สึกคุ้มค่าที่ติดตามเรื่องจนจบ
การออกแบบ
แนวทางปฏิบัติแนะนำที่สำคัญสำหรับการออกแบบ
ลดจำนวนอักขระ
หลีกเลี่ยงการใส่หน้าที่มีข้อความจำนวนมากหลายๆ หน้า ลดปริมาณข้อความให้เหลือประมาณ 280 อักขระต่อหน้า (ความยาวเท่าทวีต 1 รายการ)
อย่าให้มีอะไรมาบังข้อความ
ตรวจสอบว่าข้อความไม่ได้โดนเนื้อหาอื่นในหน้ามาบดบัง หลีกเลี่ยงการใช้ข้อความที่ฝังในเนื้อหา (Burned in Text) เพื่อป้องกันไม่ให้ข้อความโดนบังเมื่อมีการปรับขนาดข้อความให้พอดีกับอุปกรณ์ขนาดต่างๆ
วางข้อความไว้ในขอบเขตที่มองเห็นได้
ตรวจสอบว่าผู้อ่านเห็นข้อความทั้งหมดใน Web Stories หลีกเลี่ยงการใช้ข้อความที่ฝังในเนื้อหา (Burned in Text) เพื่อป้องกันไม่ให้ข้อความล้นออกจากกรอบเมื่อมีการปรับขนาดข้อความให้พอดีกับอุปกรณ์ขนาดต่างๆ
ใช้ภาพเคลื่อนไหวอย่างรอบคอบ
ทำให้เรื่องราวมีชีวิตชีวาด้วยภาพเคลื่อนไหว แต่ให้หลีกเลี่ยงภาพเคลื่อนไหวที่สร้างความรําคาญหรือซ้ำไปซ้ำมา เพราะอาจทำให้ผู้ใช้รู้สึกเหนื่อยหน่ายได้
แนวทางปฏิบัติแนะนำเพิ่มเติมสำหรับการออกแบบ
แนวทางปฏิบัติที่แนะนำสำหรับการออกแบบ
ใช้คำกระตุ้นการตัดสินใจสำหรับ Web Stories โดยเฉพาะ
เมื่อสร้างเรื่องราวที่เดิมสร้างขึ้นสำหรับแพลตฟอร์มโซเชียลอย่างเช่น Instagram, Snapchat หรือ YouTube ขึ้นมาใหม่ อย่าลืมลบคำกระตุ้นการตัดสินใจผู้อ่านที่เป็นของแพลตฟอร์มนั้นๆ โดยเฉพาะ ตรวจสอบว่าผู้ใช้ทำตามการดำเนินการที่แนะนำใน Web Stories ได้
ใช้วิดีโอและรูปภาพแบบเต็มหน้าจอ
การใส่เนื้อหาแบบเต็มหน้าจอในเรื่องราวจะช่วยมอบประสบการณ์ที่สมจริงมากขึ้นให้แก่ผู้อ่าน
หลีกเลี่ยงการใช้รูปภาพหรือวิดีโอที่มีความละเอียดต่ำหรือบิดเบี้ยว
ใช้รูปภาพที่มีคุณภาพสูงและระมัดระวังเวลาปรับรูปภาพเป็นแนวตั้ง
เพิ่มโลโก้ในปกหน้าแรก
ใส่โลโก้ความละเอียดสูงที่บ่งบอกถึงแบรนด์ของคุณ
ทำให้วิดีโอกระชับขึ้น
เราขอแนะนำว่าวิดีโอควรยาวไม่เกิน 15 วินาทีต่อหน้าหรือต้องไม่เกิน 60 วินาที
ใส่เสียง
ใช้คลิปเสียงคุณภาพสูงที่มีความยาวอย่างน้อย 5 วินาที โดยมีระดับความดังที่สมดุลและตรวจสอบว่าผู้ฟังได้ยินเสียงพูด
ลองใช้การเปลี่ยนหน้าโดยอัตโนมัติสำหรับเรื่องราวที่มีแต่วิดีโอ
การเปลี่ยนหน้าโดยอัตโนมัติสำหรับ Web Stories ที่เน้นวิดีโอจะทำให้ประสบการณ์การรับชมเรื่องราวลื่นไหลมากขึ้น
SEO
แนวทางปฏิบัติแนะนำที่สำคัญสำหรับ SEO
มอบเนื้อหาที่มีคุณภาพสูง
เช่นเดียวกับหน้าเว็บอื่นๆ การนำเสนอเนื้อหาคุณภาพสูงที่เป็นประโยชน์และน่าสนใจสำหรับผู้อ่านของคุณเป็นสิ่งสำคัญที่สุดที่ควรทำ โปรดเล่าเรื่องราวที่สมบูรณ์และทำตามแนวทางปฏิบัติแนะนำในการเล่าเรื่อง เพื่อดึงดูดผู้อ่าน
ตั้งชื่อเรื่องสั้นๆ
ชื่อเรื่องต้องยาวไม่เกิน 90 อักขระ ขอแนะนำให้ใช้ชื่อเรื่องที่สื่อความหมายและยาวไม่เกิน 70 อักขระ
ตรวจสอบว่า Google Search ค้นพบเรื่องราวของคุณได้
อย่าใส่แอตทริบิวต์ noindex
ในเรื่องราว เพราะแอตทริบิวต์นี้จะบล็อกไม่ให้ Google จัดทำดัชนีหน้าเว็บและป้องกันไม่ให้หน้าดังกล่าวปรากฏใน Google นอกจากนี้ให้เพิ่ม Web Stories ลงในแผนผังเว็บไซต์ด้วย คุณตรวจสอบได้ว่า Google พบ Web Stories ได้หรือไม่ โดยดูจากรายงานการครอบคลุมของดัชนี และรายงานแผนผังเว็บไซต์ ใน Search Console
ทำให้เรื่องราวเป็นหน้า Canonical ในตัว
Web Stories ทั้งหมดต้องเป็นแบบ Canonical ตรวจสอบว่า Web Stories แต่ละรายการมี link rel="canonical"
ของตัวเอง ตัวอย่างเช่น <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
แนบข้อมูลเมตา
ตรวจสอบว่า Web Stories เป็นไปตามหลักเกณฑ์ด้านข้อมูลเมตาของเรื่องราว AMP ใส่มาร์กอัปที่คุณใส่ในหน้าเว็บตามปกติ เช่น
แนวทางปฏิบัติแนะนำเพิ่มเติมเกี่ยวกับ SEO
แนวทางปฏิบัติที่แนะนําสําหรับ SEO
ใส่ข้อมูลที่มีโครงสร้าง
เราขอแนะนําให้ใส่ข้อมูลที่มีโครงสร้าง ใน Web Stories เพื่อช่วยให้ Google Search เข้าใจโครงสร้างและเนื้อหาของ Web Stories
ใส่ข้อความแสดงแทนในรูปภาพ
เราขอแนะนำให้ใส่ข้อความแสดงแทนลงในรูปภาพเพื่อให้ผู้คนค้นพบเรื่องราวของคุณได้ง่ายขึ้น
ผสานรวมเรื่องราวลงในเว็บไซต์ของคุณ
เราขอแนะนำให้ผสานรวม Web Stories ไว้ในเว็บไซต์ของคุณ เช่น การลิงก์ Web Stories จากหน้าแรกหรือหน้าหมวดหมู่ ในกรณีที่เกี่ยวข้อง ตัวอย่างเช่น หาก Web Stories ของคุณเกี่ยวกับสถานที่ท่องเที่ยว และคุณมีหน้าเว็บที่แสดงรายการบทความท่องเที่ยวทั้งหมด ก็ลิงก์ Web Stories ในหน้าหมวดหมู่นั้นได้ หน้า Landing Page พิเศษเพิ่มเติม เช่น www.example.com/stories
(ซึ่งจะลิงก์จากหน้าหลัก เช่น หน้าแรกของคุณ) ก็อาจมีประโยชน์เช่นกัน
ไม่จำเป็นต้องระบุใน URL ของ Web Stories ว่ามีการใช้รูปแบบ Web Stories หรือเทคโนโลยีเรื่องราว AMP ตามหลักแล้ว Web Stories จะผสานรวมเข้ากับกลยุทธ์ URL ที่กว้างกว่า
เช่น หากบทความ "New York Travel" ของคุณใช้รูปแบบอย่างเช่น "/new-york/travel/title-of-article.html"
ให้พิจารณาใช้โครงสร้างไดเรกทอรีและรูปแบบ URL เดียวกันทั้งหมดสำหรับ Web Stories
ใช้ไฟล์แนบของหน้าเรื่องราว AMP
คุณใช้ไฟล์แนบของหน้าเรื่องราว AMP ได้เพื่อแสดงข้อมูลเพิ่มเติมควบคู่ไปกับ Web Stories วิธีนี้ช่วยระบุรายละเอียดเพิ่มเติม ข้อมูลเจาะลึก หรือเส้นทางต่อไปสําหรับเนื้อหาที่แสดงใน Web Stories
ใส่คําบรรยายในวิดีโอ
เพิ่มคำบรรยายวิดีโอลงในวิดีโอ เพื่อช่วยให้ผู้อ่านเข้าใจเรื่องราวของคุณได้ดีขึ้น หลีกเลี่ยงคำบรรยายวิดีโอที่ฝังลงในวิดีโอเพื่อให้แน่ใจว่าคำบรรยายจะไม่ทับซ้อนกับเนื้อหาอื่นหรือตกขอบหน้าจอ
เพิ่มประสิทธิภาพเรื่องราวที่มีเพียงวิดีโอ
เราขอแนะนําให้คุณใช้ HTML ที่สื่อความหมายในการสร้าง Web Stories อย่างไรก็ตาม เครื่องมือแก้ไข Web Stories บางรายการอาจส่งออกเรื่องราวที่จัดรูปแบบแต่ละสไลด์เป็นไฟล์วิดีโอที่ใส่ข้อความทั้งหมดในวิดีโอ ในกรณีนี้ เราขอแนะนำให้คุณเพิ่มข้อความที่ถูกต้องที่จะแสดงภายในวิดีโอเป็นแอตทริบิวต์ title
ในองค์ประกอบ amp-video
ขอย้ำว่าให้ดำเนินการเช่นนี้เฉพาะเมื่อคุณไม่อาจใช้มาร์กอัปที่สื่อความหมายใน Web Stories ได้
เพิ่มการสนับสนุนสำหรับการแสดงผลในแนวนอน
หากต้องการให้ Web Stories ปรากฏในผลการค้นหาของ Google ในเดสก์ท็อป ให้เพิ่มการสนับสนุนสำหรับการแสดงผลในแนวนอน
ด้านเทคนิค
แนวทางปฏิบัติแนะนำที่สําคัญด้านเทคนิค
ทำให้เรื่องราวเป็นหน้าที่ใช้งานได้
Web Stories ต้องเป็นหน้า AMP ที่ถูกต้อง หลีกเลี่ยงปัญหา AMP ไม่ถูกต้องด้วยการทดสอบ Story โดยใช้เครื่องมือตรวจสอบ AMP และแก้ไขข้อผิดพลาดที่ตรวจพบ
อย่าใส่ข้อความในภาพโปสเตอร์
หลีกเลี่ยงการใช้รูปภาพที่มีข้อความที่ฝังในเนื้อหา เนื่องจากข้อความอาจบดบังชื่อเรื่องเมื่อผู้ใช้ดูตัวอย่างเรื่องราวในผลการค้นหา หากผู้ใช้เห็นชื่อเรื่องไม่ชัดเจน ก็มีโอกาสสูงที่จะไม่อ่านต่อ
ใส่ขนาดและสัดส่วนของภาพโปสเตอร์ที่ถูกต้อง
ตรวจสอบว่ารูปภาพที่ลิงก์กับแอตทริบิวต์ <amp-story> poster-portrait-src
มีขนาดอย่างน้อย 640x853 px และมีสัดส่วนภาพเป็น 3:4
ใส่สัดส่วนภาพที่เหมาะสมสำหรับโลโก้
ตรวจสอบว่ารูปภาพที่ลิงก์กับแอตทริบิวต์ <amp-story> publisher-logo-src
มีขนาดอย่างน้อย 96x96 px และมีสัดส่วนภาพเป็น 1:1
แนวทางปฏิบัติแนะนำเพิ่มเติมทางเทคนิค
แนวทางปฏิบัติที่แนะนำด้านเทคนิค
ใส่ og:image
เราขอแนะนําให้ใส่ og:image
ในแท็ก <meta>
เพื่อให้ผู้คนค้นพบเรื่องราวของคุณได้ง่ายขึ้น
แหล่งข้อมูลอื่นๆ
ส่งความคิดเห็น
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2023-12-06 UTC
[{
"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":"อื่นๆ"
}]
หากต้องการบอกให้เราทราบเพิ่มเติม
{"lastModified": "\u0e2d\u0e31\u0e1b\u0e40\u0e14\u0e15\u0e25\u0e48\u0e32\u0e2a\u0e38\u0e14 2023-12-06 UTC"}
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2023-12-06 UTC"]]