SEO - เว็บไซต์ที่ตอบสนองและเมนูซ้ำ

เมื่อใดก็ตามที่ฉันสร้างเว็บไซต์ที่ตอบสนองฉันมักจะสร้าง 2 เมนู: 1 ซ่อนและใช้สำหรับมือถือและอื่น ๆ ที่แสดงเป็นเมนูหลักจากนั้นซ่อนเพื่อแสดงเมนูมือถือ เมื่อใดก็ตามที่เกี่ยวข้องกับการทำ SEO และสไปเดอร์การสำรวจเว็บไซต์จะต้องทำเมนูซ้ำซ้อนหรือไม่? มีอะไรที่ฉันสามารถทำได้เพื่อบ่งบอกถึงแมงมุมว่าเมนูนี้มีไว้สำหรับมือถือและนี่คือเมนูหลักหรือไม่?

เหตุผลสุดท้ายที่ฉันมี 2 เมนูแตกต่างกันเพราะที่ตั้งโดยปกติเมนูหลักจะอยู่ในแถบบางชนิดภายใต้โลโก้ ฯลฯ แต่เมนูมือถือที่ฉันต้องการอยู่เหนือทุกอย่างเหนือโลโก้เป็นต้น

— Howdy_McGee
แหล่งที่มา

ทำไมไม่ใช้การสืบค้นที่ตอบสนองและสร้างเมนูposition:fixedหรือposition:absoluteกรอบการทำงานส่วนใหญ่เช่น bootstrap และ zurb foundation มีการดึงแบบสอบถามที่สามารถย้ายองค์ประกอบรอบ ๆ โดยขึ้นอยู่กับอุปกรณ์ที่กำลังเข้าถึงหน้า ...

— Simon Hayter

หากคุณสร้าง 2 เมนูนั่นไม่ใช่การตอบสนอง เมนูที่ตอบสนองต่อใช้<nav>เนื้อหาเดียวกันและจัดรูปแบบให้แตกต่างจากจุดพักการสืบค้นสื่อเฉพาะ

— hexalys

@hexalys ไม่จำเป็นต้อง ฉันสามารถมีเมนูบางส่วนสำหรับ "การนำทางเดสก์ท็อปหลัก" จากนั้นเป็น "เมนูมือถือ" พร้อมการนำทางที่สมบูรณ์ยิ่งขึ้นทั้งในการ<nav>แสดงรายการเพิ่มเติมในรุ่นมือถือเพื่อให้ง่ายต่อการสำรวจ

— Howdy_McGee

@Howdy_McGee แน่นอน แต่นั่นไม่ใช่สิ่งที่คุณอธิบายในคำถาม ปัญหาของการเปลี่ยนแถบนำทางตรงกลางเป็นเมนูด้านบนหรือแฮมเบอร์เกอร์สำหรับมือถือสามารถทำได้ยาก แต่สามารถใช้งานได้ผ่านการเปลี่ยนเค้าโครง CSS ฉันจัดการได้ที่นี่: goo.gl/v8HdLD และตอนนี้ฉันอยู่ที่นี่เพราะฉันยังกังวลอย่างมากเกี่ยวกับวิธีการขี้เกียจของคนจนที่คิดว่าสองคนเรียกว่า "เมนูตอบสนอง" ปลั๊กอินสำหรับ WordPress และผลกระทบของพวกเขาในแง่ของการปฏิบัติตามเครื่องมือค้นหาการเข้าถึงและประสิทธิภาพ

— hexalys

@hexalys ฉันคิดว่ามีข้อดีและข้อเสีย; ทั้งสองมีสถานที่ตามลำดับมันก็ขึ้นอยู่กับสถานการณ์ เนื่องจากฉันถามสิ่งนี้ฉันได้เห็นความโปรดปรานมากกว่าหนึ่งเมนูเดียว แต่ไม่ได้เห็นอะไรเลยที่บอกว่าการมีสองเมนูแยกต่างหากเป็นสิ่งที่ไม่ดีหรือมันถูกปรับแต่งใน SEO

— Howdy_McGee

คำตอบ:

คุณไม่มีอะไรต้องกังวล คุณสามารถใช้display: none;เพื่อสลับเมนู เสิร์ชเอ็นจิ้นดีกว่ามากที่เข้าใจ JS และ CSS

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

การใช้จอแสดงผลแย่แค่ไหน: ไม่มีใน CSS?

Google ค่อนข้างชอบการออกแบบที่ตอบสนองได้ดีและชอบที่จะใช้กับไซต์มือถือที่แยกต่างหาก

นี่เป็นบทความที่ดีเกี่ยวกับ " SEO of Responsive Design "

นอกจากนี้ให้ตรวจสอบบทความ / วิดีโอนี้:

Matt Cutts (Google) กล่าวว่าคุณไม่ต้องกังวลว่าจะมีข้อเสียเกี่ยวกับ SEO เมื่อใช้วิธีการออกแบบที่ตอบสนองต่อเว็บไซต์มือถือ

— dasickle
แหล่งที่มา

คำพูดและบทความส่วนใหญ่ของคุณอ้างถึงการมีเว็บไซต์ที่ตอบสนองและมีเว็บไซต์มือถือซึ่งไม่จำเป็นต้องเป็นสิ่งที่ฉันขอ (ขออภัยในความสับสน) แต่เพิ่มเติมเกี่ยวกับโรค / advangages หรือใช้ 2 เมนูหนึ่งเมนูสำหรับมือถือ เมนูหลักและอีกหนึ่งเมนูสำหรับเดสก์ทอปหลัก ดูเหมือนว่ามี 2 เมนูและโปรแกรมรวบรวมข้อมูลที่อ่านซอร์สโค้ดจะตีความสิ่งเหล่านี้แยกกัน

— Howdy_McGee

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

— dasickle

@dasickle กำหนดวิธีการนี้ด้วยหลายเมนูเมื่อค้นหาโดเมนที่ระบุบน google (ตัวอย่างเช่นค้นหา "Warmane") จะรวมอยู่ในผลลัพธ์การค้นหาการนำทางของเว็บไซต์นั้นจะได้รับผลกระทบจากวิธีการใดบ้างหรือไม่

— Dragos Rizescu

คุณสามารถใช้display: flexแล้วระบุorder: nค่าทางเลือกสำหรับแผนกที่ย้ายส่วนเมนูของคุณด้านบนหรือด้านล่างหน่วยงานอื่น ๆ

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

— RedGrittyBrick
แหล่งที่มา

เมนูมือถือส่วนใหญ่นั้นเป็น "เปิด" ผ่านการคลิกปุ่มซึ่งเป็นการเปิดในหน้าต่างที่เป็นกิริยาช่วยของบางอย่างหรืออย่างอื่น เมื่อพูดถึงมาตรฐานการเข้าถึงเว็บไซต์การประชุม - เมนูเหล่านั้นจำเป็นต้องอยู่ใน DOM โดยเจตนา ไม่เพียงพอที่จะใช้ NAV หนึ่งรายการในส่วนหัวและใช้ CSS ที่แตกต่างกันเพื่อให้ได้เค้าโครงที่ต้องการ (ในกรณีส่วนใหญ่)

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

— โคดี้
แหล่งที่มา