วิธีเพิ่ม Schema Markup บน WordPress โดยทางโปรแกรม

เผยแพร่แล้ว: 2022-04-21

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

แต่ก่อนที่เราจะมาดูวิธีการเพิ่ม มาดูว่าคุณหมายถึงอะไรโดยสรุปสคีมา

Schema Markup คืออะไร

มาร์กอัปสคีมาคือโครงสร้างข้อมูลมาตรฐานที่จัดทำโดย schema.org โดยทั่วไปจะ ให้ข้อมูลเกี่ยวกับหน้าปัจจุบันไปยังเครื่องมือค้นหา ดังนั้นบอทของโปรแกรมรวบรวมข้อมูลจึงสามารถเข้าใจว่าเนื้อหาเกี่ยวกับอะไร และสร้างตัวอย่างข้อมูลสื่อสมบูรณ์ในผลการค้นหา

ข้อมูลที่อยู่ในสคีมาจะแสดงในคู่คีย์-ค่า เช่น ["โทรศัพท์": “152234029”] นอกจากนี้ยังสามารถมีมรดกได้หลายระดับ สิ่งเหล่านี้สำคัญมากในการเพิ่มอัตราการ คลิกผ่าน (CTR) สำหรับเว็บไซต์ของคุณ และถือว่าเป็นหนึ่งในแนวทางปฏิบัติ SEO ที่ดีที่สุดเช่นกัน

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

จะเพิ่ม Schema Markup ใน WordPress โดยทางโปรแกรมได้อย่างไร

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

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

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

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

คุณสามารถเพิ่มสคีมามาร์กอัปใน WordPress โดยทางโปรแกรมได้ สองวิธีหลัก :

  1. เพิ่มไฟล์ JSON-LD บน head
  2. เพิ่มมาร์กอัป microdata ลงในเอาต์พุต HTML

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

1. เพิ่มไฟล์ JSON-LD

ไฟล์ JSON-LD เป็นรูปแบบเฉพาะตาม JSON และใช้สำหรับเข้ารหัสข้อมูลที่เชื่อมโยง เช่นเดียวกับที่เกิดขึ้นในไฟล์ JSON มันมีรายการคู่ของคีย์-ค่า:

 {
    "โทรศัพท์": "152234029",
    "name": "ชื่อ",
    "ที่อยู่": "โยฮันน์ สตรีท เอ็น 433",
    "url": "https://QuadLayers.com",
    "priceRange": "19 - 90",
    "legalName": "QuadLayers",
    "@context": "http://schema.org",
    "@type": "ธุรกิจท้องถิ่น"
}

อย่างที่คุณเห็น แม้แต่ไวยากรณ์ก็คล้ายกับไฟล์ JSON มาก

มีตัวสร้าง JSON-LD หลายตัวที่คุณสามารถใช้เพื่อให้ได้ไฟล์ที่ปรับให้เข้ากับความต้องการของคุณได้ดียิ่งขึ้น

ดังนั้น ขั้นตอนต่อไปคือการพิมพ์โค้ดนี้ในส่วน HTML <head> ของเว็บไซต์

เราสามารถใช้ฟังก์ชันต่อไปนี้ในไฟล์ functions.php ของธีมลูกเพื่อให้บรรลุเป้าหมายนี้

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

 add_action('wp_head','QuadLayers_add_schema');
ฟังก์ชัน QuadLayers_add_schema(){
echo '<script type="application/ld+json">
{
"โทรศัพท์": "152234029",
"name": "ชื่อ",
"ที่อยู่": "โยฮันน์ สตรีท เอ็น 433",
"url": "https://QuadLayers.com",
"priceRange": "19 - 90",
"legalName": "QuadLayers",
"@context": "http://schema.org",
"@type": "ธุรกิจท้องถิ่น"
}';
}

คุณสามารถดูว่าไฟล์ JSON-LD รวมอยู่ในแท็ก <script> อย่างไร อย่าลืม อัพเดทไฟล์ .

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

เราสามารถใช้โค้ด JSON กับบางหน้าได้โดยใช้ตรรกะแบบมีเงื่อนไขกับฟังก์ชัน PHP ของเรา แต่มาร์กอัปสคีมายังสามารถรวมไว้ใน HTML ภายในของเนื้อหาได้ ซึ่งช่วยให้เรารวมมาร์กอัปที่ซับซ้อนลงในเนื้อหาที่เฉพาะเจาะจงบางรายการได้

2. เพิ่มมาร์กอัป microdata ลงใน HTML

ตามกระแสนิยม วิธีก่อนหน้านี้เป็นวิธีที่แนะนำ แต่การใช้มาร์กอัป microdata จะทำให้เราสามารถ ฝังมาร์กอัปสคีมาบนไฟล์เทมเพลต ได้โดยตรง

การวางสคริปต์ของเราลงในไฟล์ functions.php ของธีมลูกก็ใช้ได้เช่นกัน เพื่อที่จะใช้สคีมาที่ถูกต้องกับเนื้อหาแต่ละส่วน เราจะลงเอยด้วยโค้ดขนาดใหญ่และซับซ้อน

ดังนั้นหากต้องการเพิ่มมาร์กอัป microdata ภายใน HTML เราจำเป็นต้องเขียนทับไฟล์เทมเพลตของเว็บไซต์ WordPress ของคุณ

2.1. เพิ่มมาร์กอัปสคีมาในโพสต์ WP

ในตัวอย่างนี้ ธีมลูกของเราสืบทอดธีม Twenty Twenty-One ดังนั้นไฟล์ที่เราจำเป็นต้องเขียนทับคือ content-single.php นี่คือไฟล์ที่เราสามารถเพิ่มสคีมาของเราลงในเอาต์พุต HTML ได้

ไฟล์นี้อาจอยู่ภายใต้ชื่อหรือโฟลเดอร์อื่นในบางธีม

สร้างโฟลเดอร์ที่จำเป็นสำหรับธีมลูกของคุณ (ส่วนเทมเพลตและเนื้อหา) และไฟล์ content-single.php ใหม่ภายในโฟลเดอร์เนื้อหา

 ธีมเด็ก
/__template-parts
__/__เนื้อหา
_______/__content-single.php

คัดลอก/วางโค้ดทั้งหมดของไฟล์เนื้อหาหลัก content-single.php

เขียนทับไฟล์เทมเพลตโพสต์

รหัสที่เราจะแก้ไขมีดังต่อไปนี้:

 <บทความ <?php post_class(); ?>>

เพิ่มขอบเขตสคีมาและพิมพ์เหมือนตัวอย่างต่อไปนี้

 <บทความ itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

นี่เป็นการบอกเครื่องมือค้นหาว่าเนื้อหาภายในแท็ก HTML <article> เป็นประเภทบทความ
หลังจากประกาศประเภทและขอบเขตแล้ว เราสามารถใช้คุณสมบัติมาตรฐานบางอย่างได้ ตัวอย่างเช่น การประกาศชื่อโพสต์เป็นชื่อรายการ:

รหัสแหล่งที่มา:

 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

เพิ่มคุณสมบัติชื่อ:

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>' ); ?>

นอกจากนี้เรายังสามารถใช้ articleBody คีย์บทความเพื่อทำเครื่องหมายเนื้อหาของโพสต์ของเรา

รหัสแหล่งที่มา:

 <div class="entry-content">
<?php 

หัวข้อ();

เพิ่มบทความคุณสมบัติร่างกาย:

 <div itemprop=”articleBody” class="entry-content">
<?php
หัวข้อ();

2.2. การเพิ่มสคีมามาร์กอัปให้กับผลิตภัณฑ์ WooCommerce

ในทำนองเดียวกัน เราสามารถเขียนทับไฟล์เทมเพลตผลิตภัณฑ์ WooCommerce เพื่อรวมสคีมาของเรา

ไฟล์ที่เราจำเป็นต้องเขียนทับคือไฟล์ content-single-product.php ไฟล์นี้ต้องอยู่ใน โฟลเดอร์ WooCommerce ในธีมย่อย หากคุณประสบปัญหาในการค้นหา โปรดตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่า WooCommerce อย่างถูกต้องเช่นกัน

 ธีมเด็ก
__woocommerce
__/__content-single-product.php

ทำตามขั้นตอนเดียวกับด้านบนเพื่อสร้างไฟล์ใหม่แทน

กำหนดขอบเขตและประเภทสคีมาบน wrapper div หลัก:

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

เรายังสามารถใช้คุณสมบัติ "คำอธิบาย" ในไฟล์นี้ได้:

 <div itemprop="description" class="summary entry-summary">

อย่างไรก็ตาม เพื่อที่จะเพิ่มมาร์กอัปให้กับผลิตภัณฑ์ของเรา เราจะต้องเขียนทับไฟล์ต่างๆ

ตัวอย่างเช่น ในการเพิ่มราคาของผลิตภัณฑ์ในสคีมา ให้สร้างพาธใหม่ในไฟล์ธีมลูก:

woocommerce/templates/single-product/price.php

 ธีมเด็ก
__woocommerce
__/__/ผลิตภัณฑ์เดียว
__/__/__/price.php

เขียนทับไฟล์เทมเพลต woocommerce

หลังจากคัดลอกไฟล์ price.php มาแทนที่แล้วให้แก้ไขดังนี้:

รหัสแหล่งที่มา:

 <p class="<?php echo esc_attr( Apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

การเพิ่มมาร์กอัป:

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( Apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

โปรดทราบว่าเราได้สร้างรายการใหม่ที่มีประเภท "ข้อเสนอ" เพื่อกำหนดราคา เป็นเงื่อนงำที่จะทำความเข้าใจว่าเราสามารถซ้อนประเภทรายการต่างๆ เข้าด้วยกันได้อย่างไร ตามโครงสร้าง HTML ดั้งเดิม

มีไฟล์อื่นๆ บางไฟล์ที่คุณสามารถเขียนทับได้เพื่อรวมมาร์กอัปเพิ่มเติม

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

บทสรุป

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

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

โดยสรุป คุณสามารถเพิ่มสคีมาในเว็บไซต์ของคุณได้โดยใช้สองวิธีหลัก:

  • เพิ่มไฟล์ JSON-LD บน head
  • เพิ่มมาร์กอัป microdata ลงในเอาต์พุต HTML

การเพิ่มไฟล์ JSON-LD เป็นวิธีที่ง่ายมากและถือว่าผู้ใช้ส่วนใหญ่พิจารณา สิ่งที่คุณต้องทำคือพิมพ์โค้ด JSON-LD ไปยังส่วน <head> ของเว็บไซต์ของคุณ

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

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

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

  • วิธีสร้างปลั๊กอิน WordPress แบบกำหนดเอง
  • เพิ่มโทรเลขไปยัง WordPress (คู่มือฉบับเต็ม)
  • วิธีแก้ไข HTML ใน WordPress