คู่มือฉบับย่อเพื่อใช้ Schema Markup บน WordPress

เผยแพร่แล้ว: 2020-05-13

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

Scheme Markup และข้อมูลที่มีโครงสร้างมีบทบาทที่ดีใน SEO มาหลายปีแล้ว และดูเหมือนว่าเสิร์ชเอ็นจิ้นสำคัญๆ เช่น Google, Bing, Yahoo และอื่นๆ จะแนะนำพวกเขา แต่มาร์กอัปสคีมาคืออะไรและส่งผลต่อกระบวนการ SEO ของไซต์ของคุณอย่างไร หลังจากอ่านบทความนี้ คุณจะรู้ว่ามันคืออะไร ส่งผลต่อ SEO และเสิร์ชเอ็นจิ้นอย่างไร วิธีใช้งานอย่างถูกต้องเพื่อให้ได้อันดับที่ดีขึ้น

สารบัญ

ข้อมูลที่มีโครงสร้างและมาร์กอัปสคีมาคืออะไร

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

แม้ว่า Schema Markup จะเป็นรหัสที่ทำให้เว็บไซต์ของคุณอยู่ในเครื่องมือค้นหา จุดประสงค์หลักคือการทำให้เครื่องมือค้นหามีข้อมูลมากขึ้นสำหรับผู้ใช้

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

ประโยชน์ของ Schema Markup ใน SEO

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

ผลการค้นหาที่เป็นสื่อสมบูรณ์ประเภทต่างๆ ที่แสดงในเครื่องมือค้นหา

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

Rich Snippets

ใช้ Schema Markup

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

การ์ดรวย

ใช้ Schema Markup

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

กราฟความรู้

กราฟความรู้เป็นฐานความรู้ที่ใช้ในเครื่องมือค้นหาเพื่อให้ข้อมูลมีรายละเอียดมากขึ้นโดยการแสดงภาพ สถานที่ ข้อมูลติดต่อ คำอธิบาย โปรไฟล์โซเชียลมีเดีย

ตัวอย่างข้อมูลแนะนำ

ใช้ Schema Markup

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

ฉันจะเริ่มใช้งาน Schema Markup บนหน้าเว็บของฉันได้อย่างไร

คุณสามารถใช้ Schema Markup ได้หลายวิธี นี่คือบางส่วนของพวกเขาด้านล่าง:

เพิ่มสคีมาโดยใช้ Microdata:

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

แต่ก่อนที่เราจะเริ่มต้น คุณจะต้องพิจารณาว่าหน้าเว็บของคุณกำหนดประเภทรายการใด จะช่วยคุณกำหนดประเภทของแท็กที่คุณต้องการใช้

ที่นี่ เราคิดว่าคุณเป็นเจ้าของร้านค้าออนไลน์ชื่อ HashThemes และหน้าแรกของร้านค้าอาจมีลักษณะดังนี้: 

 <div>
<h1>ธีมแฮช</h1>
<h2>ผู้ขายธีม WordPress ที่ดีที่สุด!</h2>
<p>ที่อยู่:</p>
<p>โดบิฆัท</p>
<p>ลลิตปูร์ ประเทศเนปาล</p>
<p>อีเมล: [email protected]</p>
<p><a href="https://hashthemes.com/wordpress-theme/">คลิกที่นี่เพื่อดูธีม WordPress ที่ดีที่สุดของเรา!</a></p>
<p>เปิดให้บริการ: </p>
<p>จันทร์-ศุกร์ 10.00 - 18.00 น.</p>
</div>

ประการแรก คุณจะต้องระบุส่วนของหน้าเว็บ เป็นทุกอย่างระหว่างแท็ก <div> ดังนั้นเราจึงเพิ่ม 

 <div itemscope>

โดยการเพิ่มแท็กขอบเขตรายการ เราสามารถระบุ HTML ที่อยู่ในบล็อกระหว่างแท็ก <div> เพื่ออ้างถึงรายการเฉพาะ

ตอนนี้ เราจะใช้แอตทริบิวต์ประเภทรายการเพื่อระบุประเภทของรายการในหน้าของคุณ 

 <div itemscope itemtype = "http://schema.org/wordpressthemes">

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

 <h1 itemprop="name">HashThemes</h1>

ไปข้างหน้าและเพิ่มแท็กในส่วนที่เหลือของหน้าด้วย

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

 <h2 itemprop="description">ผู้ขายธีม WordPress ที่ดีที่สุด!</h2>
<p>ที่อยู่:</p>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p itemprop="streetAddress">โดบิฆัท</p>
<p itemprop="addressLocality">ลลิตปูร์ ประเทศเนปาล</p></span>
<p>อีเมล: <span itemprop="email">[email protected]</span></p>
<p><a itemprop="store" href="https://hashthemes.com/wordpress-theme/">คลิกที่นี่เพื่อดูธีม WordPress ที่ดีที่สุดของเรา!</a></p>
<p>เปิดให้บริการแล้ว:</p>
<p itemprop="openingHours">จันทร์-ศุกร์ 10.00 - 18.00 น.</p>
</div>

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

การเพิ่มมาร์กอัปโดยใช้ RDFa

Resource Description Framework in Attributes (RDFa) เป็นส่วนขยายของ HTML5 ที่ออกแบบมาเพื่อช่วยคุณมาร์กอัปข้อมูลที่มีโครงสร้าง เป็นคำแนะนำของ W3C และสามารถใช้เพื่อรวมคำศัพท์ข้อมูลที่มีโครงสร้างหลายคำเพื่อเพิ่มข้อมูลที่มีโครงสร้างที่นอกเหนือไปจาก Schema.org

หากคุณรู้วิธีใช้มาร์กอัป Microdata กับ Schema.org RDFa ก็ไม่ต่างกัน รวม HTML ที่มีอยู่ในเนื้อหาของเนื้อหา

ลองใช้ไซต์อีคอมเมิร์ซด้านบนเป็นตัวอย่าง: 

 <div>
<h1>ธีมแฮช</h1>
<h2>ผู้ขายธีม WordPress ที่ดีที่สุด!</h2>
<p>ที่อยู่:</p>
<p>โดบิฆัท</p>
<p>ลลิตปูร์ ประเทศเนปาล</p>
<p>อีเมล: [email protected]</p>
<p><a href="https://hashthemes.com/wordpress-theme/">คลิกที่นี่เพื่อดูธีม WordPress ที่ดีที่สุดของเรา!</a></p>
<p>เปิดให้บริการ: </p>
<p>จันทร์-ศุกร์ 10.00 - 18.00 น.</p>
</div>

ในที่นี้ เราจะระบุ tag vocab พร้อมกับ URL http://schema.org/ ประเภทหน้าถูกกำหนดตามประเภทของแท็ก 

 <div vocab="http://schema.org/" typeof="store">

ตอนนี้เราได้บอกเครื่องมือค้นหาว่าหน้านั้นเกี่ยวกับอะไร ถึงเวลากำหนดคุณสมบัติโดยใช้แอตทริบิวต์คุณสมบัติ 

 <h1 property="name">HashThemes</h1>

ประเภทของแอตทริบิวต์ยังสามารถใช้เพื่อกำหนดคุณสมบัติเพิ่มเติม เช่น การกำหนด PostalAddress 

 <div property="address" typeof="PostalAddress">

ประเภทของแอตทริบิวต์เทียบเท่ากับประเภทรายการใน Microdata ในขณะที่คุณสมบัติเทียบเท่ากับแอตทริบิวต์ของไอเท็ม 

 <h2 property="description">ผู้ขายธีม WordPress ที่ดีที่สุด!</h2>
<p>ที่อยู่:</p>
<div property="address" typeof="PostalAddress">
<p property="streetAddress">โดบิฆัท</p>
<p property="addressLocality">ลลิตปูร์ ประเทศเนปาล</p>
</div>
<p>อีเมล: <span property="email">[email protected]</span></p>
<p><a property="store" href="https://hashthemes.com/wordpress-theme/">คลิกที่นี่เพื่อดูธีม WordPress ที่ดีที่สุดของเรา!</a></p>
<p>เปิดให้บริการแล้ว:</p>
<p property="openingHours">จันทร์-ศุกร์ 10.00 - 18.00 น.</p>
</div>

มาร์กอัปหน้าเว็บโดยใช้ JSON-LD

JavaScript Object Notation for Linked Data (JSON-LD) คือการเข้ารหัสข้อมูลที่เชื่อมโยงโดยใช้ JSON เป็นคำแนะนำของ W3C และเพิ่มเป็นรูปแบบที่แนะนำสำหรับ Schema.org ในปี 2013

ข้อได้เปรียบหลักของการใช้ JSON-LD สำหรับ Schema Markup คือ การจำกัดโค้ดที่เกี่ยวข้องมากที่สุดไว้ที่ส่วนหัวของหน้า และป้องกันแท็กพิเศษจากส่วนหลักของเนื้อหาของคุณ ทำให้โค้ดสะอาดขึ้นและอ่านง่ายขึ้น

สัญกรณ์ JSON – LD มีอยู่ภายในบล็อกสคริปต์ ดังนั้น เพื่อเริ่มต้นกระบวนการ เราป้อนบรรทัดสคริปต์เพื่อแสดงว่าเรากำลังใช้รูปแบบ JSON-LD: 

 <script type="application/ld+json">

โค้ด JSON-LD ควรอยู่ภายในวงเล็บปีกกา (วงเล็บปีกกา) มิฉะนั้นจะไม่นำไปใช้กับหน้าหรือแยกวิเคราะห์โดยเครื่องมือค้นหา สิ่งนี้เรียกว่าโครงสร้างวัตถุใน Javascript ดังนั้นเค้าร่างของรหัสจะมีลักษณะดังนี้: 

 <script type="application/ld+json">
รหัสไปที่นี่
</script>

ตอนนี้ คุณจะต้องใช้บริบทที่กำหนดโดยคำศัพท์กับข้อมูลที่เชื่อมโยงกับ Schema.org

เครื่องหมายจุลภาคควรอยู่สำหรับแต่ละบรรทัดของโค้ด 

 "@context": "http://schema.org",

สำหรับรูปแบบ schema.org ประเภทอื่นๆ คุณจะต้องกำหนดประเภทของเนื้อหาที่จะมาร์กอัป ซึ่งเทียบเท่ากับแอตทริบิวต์ประเภทรูปภาพของ Microdata และประเภทของแอตทริบิวต์ของ RDFa

เราจะใช้เว็บไซต์ธรรมดาที่เราได้กล่าวมาข้างต้นเป็นตัวอย่าง: 

 "@type": "ร้านค้า",

ตอนนี้เรากำหนดชื่อร้านค้าและคำอธิบาย หากคุณกำลังใช้ Microdata หรือ RDFa เพื่อกำหนดองค์ประกอบเหล่านี้ ควรนำเสนอองค์ประกอบเหล่านี้บนหน้าแรกของเว็บไซต์ แต่ในกรณีของ JSON-LD คุณสามารถกำหนดองค์ประกอบโดยไม่ต้องแสดงบนหน้า 

 "ชื่อ": "HashThemes",
"description": "ขายธีม WordPress ที่ดีที่สุด!",

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

 "ที่อยู่": {
"@type": "ที่อยู่ไปรษณีย์",
"addressLocality": "ลลิตปูร์ เนปาล",
"streetAddress": "โทบิฆัท",
},

ตอนนี้เราจะแจ้งเวลาเปิด-ปิดของร้าน เราจะเก็บชั่วโมงเปิดทำการไว้ในอาร์เรย์และระบุวันเป็นตัวอักษรสองตัวรวมกัน นอกจากนี้ เวลาควรเป็นนาฬิกาแบบ 24 ชั่วโมง 

 "เวลาทำการ": [
"จันทร์-ศุกร์ 10:00-18:00"
],

สุดท้าย เราจะเพิ่มที่อยู่อีเมลและ URL ของธีม ทั้งสองค่อนข้างตรงไปตรงมา 

 "อีเมล": "[email protected]"
"store": "https://hashthemes.com/wordpress-theme/"
และในตอนท้ายมาร์กอัปของเราจะมีลักษณะดังนี้:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "ร้านค้า",
"ชื่อ": "HashThemes",
"description": "ขายธีม WordPress ที่ดีที่สุด!",
"ที่อยู่": {
"@type": "ที่อยู่ไปรษณีย์",
"addressLocality": "ลลิตปูร์ เนปาล",
"streetAddress": "โทบิฆัท",
},
"เวลาทำการ": [
"จันทร์-ศุกร์ 10:00-18:00"
],
"อีเมล": "[email protected]"
"store": "https://hashthemes.com/wordpress-theme/"
}
</script>

คุณสามารถใช้เครื่องมือทดสอบข้อมูลที่มีโครงสร้างของ Google เพื่อตรวจสอบข้อผิดพลาดของไวยากรณ์

วิธีการใช้ Schema Markups บนเว็บไซต์ WordPress ของคุณ?

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

การเลือกธีม WordPress ที่มีการรวม Inbuilt กับ Schema Markup:

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

การมาร์กอัปข้อมูล Schema อื่นๆ ด้วยปลั๊กอิน WordPress

ดังที่กล่าวไว้ข้างต้น คุณอาจประสบปัญหาในการค้นหาธีม WordPress ที่มีการผสานรวมกับโค้ด Schema MarkUp อย่างเต็มรูปแบบ ดังนั้น คุณสามารถเลือกปลั๊กอิน WordPress เพื่อเพิ่มคุณสมบัติ Schema บนเว็บไซต์ของคุณได้ Yoast SEO และ Schema Pro เป็นปลั๊กอินบางตัวที่จะช่วยในการติดตั้ง Schema MarkUp บนเว็บไซต์ของคุณ

สิ่งที่ต้องจำขณะใช้งาน Schema MarkUps

เมื่อคุณทราบวิธีใช้งาน Schema Markup บนเว็บไซต์ WordPress ของคุณแล้ว ต่อไปนี้คือบางสิ่งที่คุณอาจต้องการจดจำขณะใช้งาน Schema Markup:

การรวม Schema Markup อาจไม่รับประกันอันดับที่ดี

Schema Markup เพียงอย่างเดียวไม่ได้รับประกันการจัดอันดับเนื้อหาเว็บที่ดี มีปัจจัยอื่นๆ อีกมากมาย เช่น อำนาจในเนื้อหา คุณภาพเนื้อหา การวิเคราะห์คำหลัก ความเกี่ยวข้อง ฯลฯ ที่ส่งผลต่อการจัดอันดับ ดังนั้น พึงระลึกไว้เสมอว่า Schema Markup เป็นเพียงหนึ่งในปัจจัยที่สามารถช่วยคุณเพิ่มการจัดอันดับเนื้อหาของคุณ

มาร์กอัปสคีมาใช้เวลาในการมีผลบังคับใช้

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

ตรวจสอบ Schema MarkUp ที่กำหนดโดยธีม WordPress และใช้ปลั๊กอินเพื่อเพิ่มประสิทธิภาพการทำงานตามนั้น

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