ทุกสิ่งที่คุณต้องการรู้เกี่ยวกับ Hreflang และ Shopify

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

ปัญหา SEO หลักที่แนะนำการขยายสู่สากลคือ:

• ช่วยให้เสิร์ชเอ็นจิ้นเข้าใจว่าหน้าใดควรถูกจัดอันดับสำหรับภูมิภาค/ภาษาใด
• การป้องกันไม่ให้เพจภูมิภาคหรือภาษาสร้างปัญหาเนื้อหาที่ซ้ำกัน

ในบทความนี้ เราจะแนะนำคุณเกี่ยวกับคุณลักษณะที่เรียกว่า Hreflang ซึ่งใช้เพื่อแก้ปัญหา SEO ระหว่างประเทศเหล่านี้

ทำไมเราถึงต้องการ Hreflang?

ก่อนอื่นทำไมเราถึงต้องการ hreflang?

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

ให้ฉันใช้ Gymshark แบรนด์ฟิตเนสเพื่อแสดงสิ่งนี้ Gymshark ใช้ Shopify และมีเว็บไซต์ที่แตกต่างกันสำหรับผู้ชมที่แตกต่างกัน:

สหราชอาณาจักร - https://uk.gymshark.com

เยอรมนี - https://de.gymshark.com

ฝรั่งเศส - https://fr.gymshark.com

ไซต์เหล่านี้ได้รับการแปลเป็นภาษาแม่ซึ่งทำให้ Google มีเงื่อนงำมากมายว่าแต่ละไซต์เป็นของภูมิภาคใด แต่แล้ว Gymshark ยังมีเว็บไซต์ในสหรัฐอเมริกาและเว็บไซต์ของแคนาดา:

สหรัฐอเมริกา - https://www.gymshark.com แคนาดา - https://ca.gymshark.com/

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

นี่คือที่มาของ hreflang

Hreflang คืออะไร?

Hreflang เป็นแอตทริบิวต์ HTML ซึ่งระบุให้เครื่องมือค้นหาทราบเมื่อมีเวอร์ชันอื่นของหน้าเว็บสำหรับผู้ชมภูมิภาค/ภาษาอื่น

สามารถใช้ Hreflang ได้หลายวิธี แต่โดยทั่วไปแล้วคือเมตาแท็กง่ายๆ ซึ่งไปในหน้าใดก็ได้ที่มีเวอร์ชันอื่น นี่คือตัวอย่างจาก Gymshark:

 <link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />

แท็ก hreflang นี้มีอยู่ในหน้าแรกของ UK Gymshark “https://uk.gymshark.com/”

มันบอกเสิร์ชเอ็นจิ้นว่าเวอร์ชันสหรัฐอเมริกาของหน้านี้สามารถพบได้ที่ “https://www.gymshark.com/”

แท็ก hreflang มีแอตทริบิวต์หลักสองประการ:

1 - Href href คือลิงค์ไปยังหน้าอื่น ต้องเป็นที่อยู่ URL แบบเต็มและต้องเป็นหน้าที่ใช้งานได้ มันบอกเครื่องมือค้นหาว่า "นี่เป็นเวอร์ชันสำรองของหน้าเว็บที่กำลังดูอยู่"

2 - Hreflang แอตทริบิวต์ hreflang มีรหัสภาษา (ISO 639-1) และรหัสประเทศ (ISO 3166-1) ของผู้ชมเป้าหมายของหน้าทางเลือก รหัสประเทศเป็นทางเลือก แต่รหัสภาษาเป็นข้อกำหนด

ตัวอย่างแอตทริบิวต์ hreflang ที่ใช้ชุดค่าผสมการกำหนดเป้าหมายภาษา/ประเทศที่แตกต่างกัน:

• en - ผู้พูดภาษาอังกฤษ
• en-GB - ผู้พูดภาษาอังกฤษในสหราชอาณาจักร
• fr-FR - ผู้พูดภาษาฝรั่งเศสในฝรั่งเศส
• en-US - ผู้พูดภาษาอังกฤษในสหรัฐอเมริกา
• มัน - ผู้พูดภาษาอิตาลี
• it-CH - ผู้พูดภาษาอิตาลีในประเทศสวิสเซอร์แลนด์

การรวม 'href' และ 'hreflang' เข้าด้วยกัน เครื่องมือค้นหาจะรู้ว่า URL ทางเลือกนี้ ( hreflang) มีไว้สำหรับผู้ชมเฉพาะกลุ่มนี้ ( hreflang)

หน้าสำรอง

สิ่งสำคัญคือต้องจำไว้ว่า hreflang ทำงานที่ระดับหน้าไม่ใช่ระดับโดเมน แท็ก Hreflang ประกาศ 'หน้าสำรอง' ไม่ใช่ 'เว็บไซต์สำรอง' เว็บไซต์จำนวนมากใช้แท็ก hreflang เพื่อประกาศหน้าเฉพาะภาษา/ภูมิภาคอื่นในโดเมนเดียวกัน

ตัวอย่างเช่น คุณอาจใช้โฟลเดอร์ย่อยเพื่อโฮสต์เวอร์ชันภาษา/ภูมิภาคอื่นของไซต์ของคุณ นี่คือวิธีที่ Apple ตั้งค่าเว็บไซต์ต่างประเทศโดยใช้โฟลเดอร์:

• สหราชอาณาจักร: https://www.apple.com/uk/
• ES: https://www.apple.com/es/
• FR: https://www.apple.com/fr/

X-Default

มีค่าสำรอง hreflang พิเศษที่เรียกว่า 'x-default' ลองนึกถึง 'x-default' เนื่องจากเครื่องมือค้นหาหน้าเว็บควรจัดอันดับเมื่อไม่มีลิงก์ hreflang อื่นที่ตรงกับภาษา/ภูมิภาคของผู้ค้นหา

ใช้ Gymshark เป็นตัวอย่างอีกครั้ง พวกเขามีร้านค้าทั่วโลกอยู่ที่ row.gymshark.com สิ่งนี้ถูกประกาศเป็น x-default

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

ดังนั้นหากมีผู้ค้นหาในภาษา/สถานที่ที่ไม่ได้ระบุไว้ในแท็ก hreflang ของ Gymshark Google มักจะแสดงร้าน RoW ของ Gymshark

คุณต้องการเพิ่ม Hreflang หรือไม่?

คุณจะต้องเพิ่มแท็ก Hreflang เมื่อคุณมีเพจที่ใกล้เคียงกันสองหน้าที่ให้บริการผู้ชมภาษา/ภูมิภาคที่แตกต่างกัน หากไม่มีเวอร์ชันอื่นของหน้า คุณไม่จำเป็นต้องเพิ่มแท็ก hreflang

กฎของ Hreflang

เพื่อให้แท็ก hreflang ตรวจสอบได้ แท็กดังกล่าวต้องปฏิบัติตามกฎเฉพาะ:

1 - ลิงก์ย้อนกลับ - หากหน้า hreflang ลิงก์ไปยังหน้าอื่น หน้าสำรองจะต้องลิงก์ hreflang กลับไปที่หน้าแรก ตัวอย่างเช่น หาก UK Gymshark มีลิงก์ hreflang ที่ชี้ไปที่หน้า Gymshark ของเยอรมัน หน้าภาษาเยอรมันต้องมีลิงก์ hreflang กลับไปที่เวอร์ชัน UK

2 - หน้าการทำงาน - หน้า ใดๆ ที่คุณ hreflang ลิงก์ไปจะต้องส่งคืนรหัสสถานะ 200 กล่าวอีกนัยหนึ่งลิงก์ hreflang ต้องเป็นหน้าที่ใช้งานได้

3 - แท็ก Hreflang แบบอ้างอิงตนเอง - หน้าใดๆ ที่มีลิงก์ hreflang ต้องมีลิงก์ hreflang ของตัวเองด้วย เราเรียกสิ่งนี้ว่าลิงก์ hreflang ที่อ้างอิงตัวเอง ลิงก์ hreflang แบบอ้างอิงตัวเองต้องมีการประกาศภาษา/ประเทศมาตรฐาน

ความท้าทายของ Hreflang

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

นี่คือทวีตจาก John Mueller นักวิเคราะห์แนวโน้มผู้ดูแลเว็บของ Google ที่อธิบายว่า hreflang นั้นยากเพียงใด!

การเพิ่มแท็กนั้นง่ายพอสมควร แต่การดูแลรักษาแท็ก hreflang ที่ปฏิบัติตามกฎ 3 ข้อด้านบนนั้นอาจเป็นเรื่องที่ท้าทายอย่างยิ่ง

ในการตรวจสอบความถูกต้องเสมอ แท็ก hreflang ระหว่างหน้าต่างๆ จะต้องซิงค์กัน บางอย่างที่ง่ายพอๆ กับการเปลี่ยน URL อาจทำลายการเชื่อมต่อ hreflang ระหว่างสองหน้า

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

ความผิดพลาดของ Hreflang

เราจัดการกับการตั้งค่า hreflang ที่เสียหายตลอดเวลา นี่คือปัญหา hreflang ที่พบบ่อยที่สุดที่เราพบ:

ไม่มีลิงค์ส่งคืน

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

ไม่ใช่ 200 หน้า

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

ไม่มีแท็ก Hreflang อ้างอิงตัวเอง

อาจดูแปลก แต่ถ้าหน้ามีแท็ก hreflang ก็ต้องมีแท็ก hreflang ที่อ้างอิงตัวเองด้วย นี่เป็นข้อผิดพลาดทั่วไปที่เว็บไซต์จำนวนมากทำ

วิธีตรวจสอบแท็ก Hreflang

ตัวตรวจสอบแท็ก Hreflang

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

คุณลักษณะที่ดีที่สุดในเครื่องมือนี้คือ มันจะรวบรวมข้อมูลลิงก์ hreflang และยืนยันว่าผ่านการตรวจสอบความถูกต้อง

กรีดร้องกบ

หากคุณต้องการตรวจสอบแท็ก hreflang ในวงกว้าง Screaming Frog เป็นเครื่องมือที่คุณควรนำไปใช้ Screaming Frog จะรวบรวมข้อมูลเว็บไซต์และตรวจสอบแท็ก hreflang ที่ค้นพบระหว่างการรวบรวมข้อมูล

Search Console

มีรายงานการกำหนดเป้าหมายระหว่างประเทศซ่อนอยู่ในส่วนรายงานเดิมใน Search Console ในการเข้าถึงรายงานนี้ ในเมนูด้านซ้าย ให้ไปที่ 'เครื่องมือและรายงานเดิม > การกำหนดเป้าหมายระหว่างประเทศ'

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

วิธีต่างๆในการเพิ่ม Hreflang

มีมากกว่าหนึ่งรายการที่จะใช้ Hreflang วิธีการแท็ก HTML ที่อธิบายข้างต้นเป็นวิธีที่ง่ายที่สุดในการตั้งค่า hreflang แต่มีสองวิธีอื่น:

XML Sitemap

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

ส่วนหัว HTTP

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

วิธีเพิ่ม Hreflang ใน Shopify

คุณจะเพิ่มแท็ก hreflang ลงใน Shopify ได้อย่างไร เช่นเดียวกับระบบจัดการเนื้อหาส่วนใหญ่ Shopify มีความแตกต่างที่ส่งผลต่อสิ่งที่คุณทำได้และไม่สามารถทำได้บนแพลตฟอร์ม แม้ว่าจะสามารถเพิ่ม hreflang ใน Shopify ผ่าน XML Sitemap หรือวิธี HTTP Headers ได้ แต่จำเป็นต้องมีการกำหนดค่าทางเทคนิคที่สำคัญ เราจึงไม่แนะนำ

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

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

เพิ่ม Hreflang ไปยัง Shopify ผ่านแอพ

มีบางแอปของ Shopify ที่เพิ่มแท็ก Hreflang ในหน้าของคุณ แอปการแปล เช่น Weglot และ Langify จะสร้างแท็ก Hreflang ของคุณโดยอัตโนมัติและเพิ่มลงในหน้าเว็บของคุณ

แม้ว่าแอปจะสามารถเพิ่มแท็ก hreflang ลงในร้านค้า Shopify ของคุณได้ แต่จากประสบการณ์ของเรานี่ไม่ใช่วิธีที่ดีที่สุด แนวทางของแอพใช้งานได้เฉพาะเมื่อคุณมีร้านเดียวที่ให้บริการหลายภาษา แอปส่วนใหญ่ไม่ได้ระบุการกำหนดเป้าหมายจาก hreflang ภาษา+ประเทศ และไม่พิจารณาแอปในร้านค้าหลายแห่งในโดเมนต่างๆ แอป Shopify ไม่ใช่แนวทางที่เราแนะนำสำหรับ hreflang

เพิ่มแท็ก Hreflang ในไฟล์ theme.liquid ของคุณ

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

ดังนั้น คุณจึงสามารถแก้ไขโค้ดธีมของคุณเพื่อสร้างแท็ก hreflang แบบไดนามิกโดยใช้เส้นทาง URL ของหน้าที่ดูอยู่

นั่นคือสิ่งที่รหัสของเหลวด้านล่างทำ:

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

ข้อมูลโค้ดนี้สามารถเพิ่มลงใน ของไฟล์ theme.liquid ของคุณ คุณต้องแทนที่อินสแตนซ์ 'mystore.com' ด้วยชื่อโดเมนจริงของคุณ เมื่อมีข้อมูลโค้ดนี้ หน้าเว็บของคุณจะแสดงแท็ก hreflang โดยใช้หน้าตามรูปแบบบัญญัติเพื่อสร้างเส้นทาง URL

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

ใช้ฟิลด์ที่กำหนดเอง (แนะนำวิธี Shopify Hreflang)

คุณจะเพิ่มแท็ก Hreflang ในเว็บไซต์ Shopify หลายแห่งด้วยผลิตภัณฑ์หลายพันรายการที่ URL จัดการไม่ตรงกันได้อย่างไร คุณจะไม่มีเวลาเพิ่มแท็ก hreflang แบบทีละหน้าและแอปไม่สามารถทำสิ่งนี้ให้คุณได้

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

ด้วยวิธีการนี้ คุณสามารถสร้างแท็ก hreflang ของคุณเองใน Excel แล้วเพิ่มลงในฟิลด์ที่กำหนดเองได้โดยตรงทีละหน้า

ยิ่งไปกว่านั้น หากคุณมีแผน Custom Fields Plus คุณสามารถนำเข้าแท็ก hreflang ของผลิตภัณฑ์ผ่านการอัปโหลด csv ได้ เราใช้แนวทางนี้เป็นประจำเพื่ออัปโหลดแท็ก hreflang ของผลิตภัณฑ์นับพันรายการไปยัง Shopify ในเวลาไม่กี่นาที

แม้ว่าวิธีนี้จะไม่ง่ายที่สุด เนื่องจากคุณต้องตั้งค่าเมตาฟิลด์แบบกำหนดเอง (ซึ่งต้องใช้ Shopify Expert) และสร้างแท็ก hreflang ของคุณเอง แต่วิธีนี้เป็นวิธีที่มีประสิทธิภาพมากที่สุดสำหรับการจัดการ Shopify hreflang ขนาดใหญ่ หากคุณต้องการวิธีง่ายๆ ในการสร้างแท็ก hreflang ของคุณเอง เราขอแนะนำเครื่องมือสร้างแท็ก hreflang ฟรีของ Aleyda Solis

โดเมนระหว่างประเทศ (ใหม่)

Shopify เพิ่งประกาศคุณสมบัติใหม่ที่ชื่อว่า International Domains การพัฒนานี้จะช่วยให้ผู้ขายของ Shopify สามารถแสดงร้านค้าของตนบนโดเมนสำรอง/โดเมนย่อยที่กำหนดเป้าหมายไปยังภาษา/ประเทศอื่นได้

ด้วย International Domains คุณจะจดทะเบียนโดเมนสำรอง/โดเมนย่อยโดยใช้รหัส ISO 2 ตัวอักษรของประเทศเป้าหมาย (เช่น gb.yourdomain.com) Shopify จะกำหนดค่าแท็ก hreflang โดยอัตโนมัติในแต่ละโดเมน/โดเมนย่อย คำแนะนำแบบเต็มเกี่ยวกับวิธีการทำเช่นนี้สามารถพบได้บน Shopify

โดเมนระหว่างประเทศมีข้อเสียเล็กน้อย คุณจะต้องโฮสต์เพจและผลิตภัณฑ์เดียวกันในโดเมนของคุณ ซึ่งจะไม่เหมาะกับผู้ค้าทุกราย นอกจากนี้ คุณยังแก้ไขเนื้อหาในโดเมนต่างๆ ไม่ได้ (ยกเว้นการแปล)

ดังที่กล่าวไปแล้ว นี่เป็นก้าวย่างที่ยิ่งใหญ่และแสดงให้เห็นว่า Shopify รับฟังผู้ค้า เรามั่นใจว่า International Domains จะกลายเป็นโซลูชัน hreflang ที่เราแนะนำสำหรับ Shopify ในเวลาที่เหมาะสม

ต้องการความช่วยเหลือเกี่ยวกับ Hreflang หรือไม่?

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