🖥️ แสดงตัวอย่างสแปม

แสดงตัวอย่างสไลด์ของ SERP

พิมพ์ชื่อหน้า, คำอธิบายและ URL เพื่อดูผลลัพธ์ของ Google บนเดสก์ทอปและมือถือ ด้วยการเตือนการตัดก่อนที่คุณจะคลิก

0 ตัวอักษร · 0px
0 ตัวอักษร · 0px
e
example.com
https://example.com

ใช้ตัวอย่าง SERP อย่างไร

4 ขั้นตอนที่รวดเร็ว ไปสู่สแปมที่แสดงให้เห็นอย่างเต็มที่ และได้รับคลิ๊ก

1

ป้อนชื่อหน้าของคุณ

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

2

เพิ่มที่อยู่ URL และคำอธิบายของเมตาของคุณ

ปักหมุดที่อยู่ URL ของหน้า และเขียนคำอธิบายส่วนประกอบ ตัวอย่างจะแสดงเบร็ดแคร์บ์, หัวข้อสีฟ้า และสแปมสีเทา เหมือนกับผลลัพธ์จริงๆ

3

สลับระหว่างพื้นที่ทำงานและมือถือ

เปลี่ยนการแสดงผลของแท็บ พื้นที่ทำงาน และแท็บมือถือ เพื่อเลือกรูปแบบทั้งสองแบบ โดยรูปแบบมือถือจะใช้คอลัมน์ที่แคบกว่า และจะทำให้หัวเรื่องมีบรรทัดมากขึ้น

4

แก้ไขข้อความเตือนการตัดส่วน

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

คำถามสแปมของ SERP

Google จะตัดส่วนเชื่อมโยงหัวข้อบนพื้นที่ทำงานลงประมาณ 600 พิกเซล ไม่ใช่จำนวนตัวอักษรที่กำหนดไว้ เพราะตัวอักษรกว้างๆ เช่น W และ M จะใช้พื้นที่มากกว่าตัวอักษรที่แคบๆ เช่น i และ l เครื่องมือนี้จะวัดความกว้างของพิกเซลที่แสดงออกมาจริงๆ ดังนั้น คุณจะเห็นได้ว่าหัวข้อของคุณจะถูกตัดตรงไหน
โดยปกติแล้ว Google จะแสดงคำอธิบายตัวอย่างขนาดประมาณ 920 พิกเซลบนเดสก์ท็อป (ประมาณ 155 ถึง 160 อักขระ) และน้อยกว่าบนมือถือ หากมีคำอธิบายที่ยาวกว่าจะถูกตัดเป็นตัวเลข ตัวอย่างจะแสดงการตัดคำอธิบายทั้งบนเดสก์ท็อปและมือถือเมื่อคุณพิมพ์
ผลลัพธ์บนมือถือใช้คอลัมน์ที่แคบกว่า และขนาดตัวอักษรที่แตกต่างกัน ดังนั้น หัวข้อจะถูกหยิบขึ้นมาเป็นบรรทัดมากขึ้น และคำอธิบายจะถูกตัดสั้นลง เครื่องมือนี้จะแสดงรูปแบบทั้งสองแบบให้ดูคู่กัน เพื่อให้คุณสามารถปรับแต่งให้เหมาะสมกับแต่ละรูปแบบได้
ไม่ ตัวอย่างจะทำงานโดยใช้ API ในการวัดขนาดข้อความของ Canvas ในเบราว์เซอร์ของคุณ ไม่มีอะไรที่คุณพิมพ์จะถูกอัปโหลด, ทำปูมบันทึก หรือเก็บไว้ ดังนั้น คุณสามารถทดสอบหน้าที่ยังไม่ได้พิมพ์ และ URL ภายในได้อย่างปลอดภัย

สำหรับผู้พัฒนา

ตัวอย่าง SERP นี้ ทำงาน 100% ด้านคลาวด์ - การวัดพิกเซลเกิดขึ้นในเบราว์เซอร์ของคุณ ดังนั้น ไม่มีอะไรที่คุณพิมพ์จะถูกอัปโหลด

✓ ส่วนตัวโดยการออกแบบ - ไม่มีการเดินทางกลับและกลับมาของเซิร์ฟเวอร์

การตัดส่วนจะถูกวัดในแบบเดียวกับที่เบราว์เซอร์เขียนข้อความออกมา - ด้วย API Canvas measureText นี่คือแนวคิดหลักที่คุณสามารถนำไปใช้กับการสร้างของตัวเองได้:

// Measure rendered pixel width like Google does
const ctx = document.createElement('canvas').getContext('2d');
function titleWidth(text, font = '20px arial') {
  ctx.font = font;
  return ctx.measureText(text).width; // > 600 => truncated on desktop
}
console.log(titleWidth('Your page title here'));

ต้องการให้มันทำงานในระดับที่ใหญ่ขึ้น - ตรวจสอบบทความหลายพันหัวจาก CMS หรือ CI ของท่าน? REST API ที่โฮสต์ไว้สำหรับเครื่องมือ SEO ของพวกเรามีให้ใช้ในแพ็คเกจที่จ่ายเงิน เห็นแผน