ฝังเนื้อหาโดยใช้โค้ดฝัง

ด้วยฟีเจอร์ฝังเนื้อหาคุณสามารถสร้างส่วนของเนื้อหาใน HubSpot จากนั้นฝังลงในเว็บไซต์ของคุณ ในการเพิ่มเนื้อหาที่ฝังไว้ในหน้าเว็บไซต์ภายนอกคุณสามารถใช้ปลั๊กอินฝังเนื้อหาสำหรับตัวแก้ไข Gutenberg ของ WordPress หรือคัดลอกโค้ดฝังโดยตรงใน HubSpot

ด้านล่างเรียนรู้เพิ่มเติมเกี่ยวกับวิธีคัดลอกโค้ดการฝังเนื้อหาพร้อมกับแนวทางปฏิบัติที่ดีที่สุดในการรักษาคะแนน Cumulative Layout Shift (CLS) ของหน้าเว็บของคุณ

โปรดทราบ: เนื้อหาฝังตัวจะไม่ถูกโหลดผ่าน iframe แต่จะถูกฉีดผ่าน JavaScript เครื่องมือค้นหาสามารถเรียกใช้ JavaScript และจะรับเนื้อหาที่ฝังอยู่ดังนั้นจึงหลีกเลี่ยงความท้าทาย SEO ใดๆที่ iframes สามารถนำเสนอได้

คัดลอกโค้ดฝังตัว

วิธีคัดลอกโค้ดฝังสำหรับส่วนฝังเนื้อหา:

• ในบัญชี HubSpot ของคุณ ไปที่ เนื้อหา > การฝัง
• วางเมาส์เหนือการฝังจากนั้นคลิกเพิ่มเติมและเลือกรับรหัสฝัง
  
  
  
• ในกล่องโต้ตอบให้คลิกคัดลอกเพื่อคัดลอกโค้ดฝังตัว

จากนั้นคุณสามารถวางโค้ดฝังลงในเนื้อหาภายนอกได้ตามต้องการ เมื่อวางโค้ดฝังโปรดคำนึงถึงสิ่งต่อไปนี้:

• เนื้อหาที่ฝังจะได้รับสไตล์จากหน้าเว็บที่ฝังอยู่ไม่ใช่จาก HubSpot หากต้องการปรับลักษณะที่ปรากฏของการฝังเนื้อหาคุณจะต้องอัปเดต CSS ของหน้าเว็บ หากคุณใช้ WordPress ให้เรียนรู้วิธีเพิ่ม CSS ที่กำหนดเอง
• โค้ดฝังเนื้อหาไม่รวมโค้ดติดตาม HubSpot ของคุณ คุณจะต้องติดตั้งโค้ดติดตามแยกต่างหากบนหน้าเว็บภายนอกเพื่อใช้ประโยชน์จากฟีเจอร์ HubSpot เช่นการวิเคราะห์ทราฟฟิกและแบนเนอร์ความยินยอมส่วนตัว
• ในการฝังเนื้อหาผ่านโค้ดฝัง HubSpot จะแทรกเนื้อหาที่ฝังผ่านส่วนท้ายของโดhs-sites hs-sites เริ่มต้น ซึ่งจะช่วยรักษาส่วนท้ายเฉพาะโดเมนของคุณ อย่างไรก็ตามเนื้อหาใดๆที่รวมอยู่ในhs-sitesท้ายของ hs-sites จะถูกแทรกลงในหน้าเว็บภายนอกพร้อมกับเนื้อหาที่ฝัง ตัวอย่างเช่นหากคุณมีข้อจำกัดความรับผิดชอบด้านลิขสิทธิ์ในhs-sitesท้ายของโดเมน hs-sites ลิขสิทธิ์จะปรากฏในหน้าเว็บภายนอกที่มีเนื้อหาฝังอยู่ เรียนรู้วิธีแก้ไขเนื้อหาในส่วนท้ายเฉพาะโดเมน
  
  
  

ทำความเข้าใจแนวทางปฏิบัติที่ดีที่สุดในการฝังเนื้อหา

ขึ้นอยู่กับวิธีที่คุณใช้โค้ดฝังอาจเป็นไปได้ว่าเนื้อหาอาจส่งผลต่อคะแนน Cumulative Layout Shift (CLS) ของหน้าเว็บของคุณซึ่งจะวัดว่าเนื้อหาหน้าเว็บของคุณเคลื่อนที่ไปรอบๆในมุมมองของผู้เข้าชมขณะโหลดมากน้อยเพียงใด มีสองปัจจัยที่จะส่งผลต่อคะแนน CLS ของคุณ:

• ตำแหน่งของการฝังรวมถึงไม่ว่าจะอยู่เหนือหรือใต้รอยพับและตำแหน่งที่ฝังสคริปต์
• ความสูงของการฝังซึ่งเกี่ยวข้องโดยตรงกับโมดูลที่รวมอยู่ในเนื้อหาที่ฝัง ยิ่งมีโมดูลมากเท่าไหร่รูปแบบหน้าเว็บของคุณอาจเปลี่ยนไปเมื่อมีการโหลดเนื้อหามากขึ้นเท่านั้น

หากคุณเห็นผลกระทบเชิงลบต่อคะแนน CLS ของคุณหลังจากฝังเนื้อหาแล้วให้ตรวจสอบส่วนแนวทางปฏิบัติที่ดีที่สุดด้านล่างเพื่อหาแนวทางแก้ไขที่เป็นไปได้

ฝังไว้ใต้รอยพับ

หากเป็นไปได้ควรฝังเนื้อหาไว้ด้านล่างส่วนพับของหน้า นี่เป็นเพราะคะแนน CLS ใช้กับเนื้อหาที่กล่าวมาข้างต้นเนื่องจากโดยปกติแล้วผู้เข้าชมจะเห็นในการโหลดหน้าเว็บเริ่มต้น การฝังเนื้อหาไว้ด้านล่างการพับจะช่วยลดการเปลี่ยนเลย์เอาต์เริ่มต้นที่เกิดจากการฝังเนื้อหาปรับปรุงประสบการณ์ของผู้ใช้และลดคะแนน CLS ที่เป็นลบ

เปลี่ยนตำแหน่งฝังสคริปต์

ตามค่าเริ่มต้นโค้ดฝังเนื้อหาจะมีสคริปต์ฝังอยู่ภายใน (บรรทัดที่ 2 ด้านล่าง)

เมื่อฝังเนื้อหาบนหน้าเว็บภายนอกขอแนะนำให้ย้ายสคริปต์ฝังไปที่ ของหน้าเว็บแทนที่จะอยู่ถัดจากสคริปต์สร้างการฝัง

กำหนดความสูงขั้นต่ำ

ความสูงของคอนเทนเนอร์ฝังเนื้อหาจะส่งผลกระทบต่อจำนวนเนื้อหารอบๆที่เปลี่ยนไปในขณะโหลด ความสูงของคอนเทนเนอร์ขึ้นอยู่กับโมดูลและเนื้อหาที่รวมอยู่ — ยิ่งมีเนื้อหาในการฝังมากเท่าไรหน้าเว็บก็จะเปลี่ยนไปมากขึ้นเท่านั้น 

ด้วยเหตุนี้หากคุณกำลังฝังเนื้อหาของคุณไว้เหนือรอยพับขอแนะนำให้ตั้งค่าความสูงขั้นต่ำของการฝังโดยรวมกฎ CSS ความmin-heightต่ำแบบอินไลน์ในกระดาษห่อภาชนะที่ฝัง

หากคุณกำลังฝังเนื้อหาลงใน CMS ภายนอกคุณอาจมีตัวเลือกเค้าโครงในตัวแก้ไขหน้าเว็บภายนอกเพื่ออัปเดตความสูงที่ฝัง มิฉะนั้นคุณสามารถเพิ่มสไตล์นี้ไปยัง

ระดับบนสุดของเนื้อหาที่ฝังด้วยตนเองตามที่แสดงด้านล่าง

 
 

โปรดทราบ: หากคุณปรับแต่งเนื้อหาแบบฝังตามแต่ละหน้าคุณอาจต้องอัพเดทกฎความสูงขั้นต่ำในแต่ละหน้าเพื่อให้เนื้อหาแสดงได้อย่างถูกต้อง

หากต้องการค้นหาความสูงขั้นต่ำคุณสามารถตรวจสอบหน้าเว็บที่มีการฝังเนื้อหา สำหรับหน้าเว็บ HubSpot คุณสามารถใช้คุณลักษณะการแสดงตัวอย่างหน้าเว็บเพื่อค้นหาความสูงขั้นต่ำก่อนที่จะเผยแพร่หน้าเว็บ เรียนรู้เพิ่มเติมเกี่ยวกับการดูตัวอย่างเนื้อหาใน WordPress 

ในขณะที่ดูหน้าเว็บที่มีเนื้อหาฝังอยู่:

• คลิกขวาที่เนื้อหาที่ฝังแล้วเลือกตรวจสอบ
• ในแผงตรวจสอบให้เลื่อนเมาส์ไปที่
  ระดับบนสุดของเนื้อหาที่ฝังอยู่
• ในการดูความสูงที่คำนวณได้เบราว์เซอร์บางตัวจะแสดงความสูงของคอนเทนเนอร์เมื่อวางเมาส์เหนือหรือคุณสามารถคลิกแท็บคำนวณในลิ้นชักเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และมองหาแอตทริบิวต์ความ สูง