สวัสดีผู้อ่านเว็บไซต์บล็อกที่รัก! ดังที่คุณทราบ ในการโปรโมตเว็บไซต์ให้ประสบความสำเร็จและเพิ่มตำแหน่งในผลการค้นหา จำเป็นต้องดำเนินการเพิ่มประสิทธิภาพ SEO คุณภาพสูงของเว็บไซต์ แนวคิดของ "" ซึ่งในทางกลับกันถูกแบ่งออกเป็นภายในและภายนอกมีการเชื่อมโยงอย่างแยกไม่ออกกับแนวคิดเช่น "ลิงก์ไซต์ภายในและภายนอก" ดังนั้นจึงเป็นเรื่องสำคัญมากสำหรับเราที่จะรู้ว่าควรมีลิงค์กี่ลิงค์บนเว็บไซต์ วิธีตรวจสอบหมายเลข วิธีลบลิงค์ที่ไม่จำเป็นออกจากเว็บไซต์และบล็อกไม่ให้จัดทำดัชนี วิธีเพิ่มมวลลิงค์ ฯลฯ เพื่อตอบคำถามเหล่านี้และคำถามอื่นๆ เกี่ยวกับลิงก์ภายในและภายนอก ก่อนอื่นเรามาทำความเข้าใจก่อนว่าลิงก์ (หรือไฮเปอร์ลิงก์) คืออะไรใน HTML
ในบทความนี้ ฉันจะบอกคุณว่าลิงก์คืออะไร วิธีสร้างไฮเปอร์ลิงก์ใน HTML บนเว็บไซต์ วิธีเปิดลิงก์ในหน้าต่างใหม่ วิธีสร้างลิงก์ไปยังที่อยู่อีเมล (อีเมล) และวิธีทำ สร้างลิงค์ไปยังรูปภาพ นอกจากนี้เรายังจะกล่าวถึงแนวคิดต่างๆ เช่น แท็ก html และแอตทริบิวต์ไฮเปอร์ลิงก์ จุดยึดลิงก์ จุดยึด html และลิงก์แฮช มาเริ่มกันเลย
ลิงค์คืออะไร (ไฮเปอร์ลิงก์)หากไฮเปอร์ลิงก์นำไปสู่หน้าเว็บหรือไฟล์ที่ไม่มีอยู่ (ถูกลบ ย้าย) หรือที่อยู่ไม่ถูกต้อง ลิงก์ดังกล่าวจะเรียกว่าลิงก์เสีย ไม่ควรจะมีลิงก์ที่ใช้งานไม่ได้บนไซต์ เนื่องจากจะทำให้ผู้เยี่ยมชมเข้าใจผิด และเมื่อคลิกลิงก์ดังกล่าวแล้ว บุคคลนั้นก็ไม่น่าจะกลับมาที่ไซต์ของคุณอีก เราจะพูดคุยเพิ่มเติมเกี่ยวกับสาเหตุที่ลิงก์เสียปรากฏขึ้น วิธีค้นหาและแก้ไขในบทความแยกต่างหาก ตอนนี้เรามาดำเนินการต่อ
วิธีสร้างลิงค์ (ไฮเปอร์ลิงก์) ในรูปแบบ HTML บนเว็บไซต์การสร้างลิงก์ไปยังหน้าอื่นบนเว็บไซต์ของคุณหรือไซต์อื่นนั้นทำได้ง่ายมาก ในการสร้างไฮเปอร์ลิงก์ คุณต้องบอกเบราว์เซอร์ว่าลิงก์คืออะไรและระบุที่อยู่ของเอกสารที่จะนำไป ทำได้โดยใช้แท็ก HTML และแอตทริบิวต์ href ที่ต้องการ:
ที่นี่ URL คือที่อยู่ของเอกสารที่จะไป และข้อความไฮเปอร์ลิงก์ที่อยู่ระหว่างแท็ก และเรียกว่าจุดยึดลิงก์และปรากฏแก่ผู้เยี่ยมชมหน้าเว็บ นอกเหนือจากข้อเท็จจริงที่ว่าข้อความลิงก์ (จุดยึด) แจ้งให้ผู้อ่านทราบว่าจะมีการเปลี่ยนแปลงที่ใด ยังมีความสำคัญอย่างมากในการเพิ่มประสิทธิภาพกลไกค้นหา (SEO) เนื่องจากทำหน้าที่เป็นปัจจัยหนึ่งในการกำหนดที่มีอิทธิพลต่อการจัดอันดับเว็บไซต์ของคุณ สำหรับคีย์เวิร์ดที่อยู่ในจุดยึดนี้ โดยทั่วไปการจัดอันดับประเภทนี้เรียกว่าการจัดอันดับลิงก์
ลิงค์แน่นอน
ใช้เพื่อชี้ไปที่เอกสารบนเว็บไซต์อื่น (ลิงก์อยู่ภายนอก)
คุณสามารถสร้างลิงก์แบบสมบูรณ์ภายในไซต์เดียวได้ แต่การใช้ที่อยู่แบบสัมพันธ์ซึ่งดูสั้นกว่าเพื่อสร้างลิงก์ภายในนั้นถูกต้องมากกว่า แต่ในขณะที่วิเคราะห์ไซต์ต่างๆ ฉันสังเกตเห็นว่าผู้ดูแลเว็บส่วนใหญ่สร้างลิงก์ภายในที่มีที่อยู่ที่แน่นอน นี่เป็นข้อดี เพราะหากเพจของคุณถูกคัดลอก ด้วยวิธีนี้ คุณจะได้รับลิงก์ย้อนกลับที่ใช้งานได้
อย่างที่คุณเห็น ทุกอย่างเป็นเรื่องง่ายด้วยลิงก์แบบสัมบูรณ์ มันจะยากกว่าสำหรับค่าที่สัมพันธ์กัน เพราะเมื่อสร้างมันขึ้นมา คุณต้องเข้าใจว่าควรระบุค่าของแอตทริบิวต์ href ใด เนื่องจากขึ้นอยู่กับตำแหน่งดั้งเดิมของเอกสาร อย่างที่ฉันบอกไปแล้วว่าไม่มีใครสนใจเรื่องนี้และทำให้ลิงก์ทั้งหมดบนเว็บไซต์สมบูรณ์แบบ อย่างไรก็ตาม หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้างลิงก์ที่เกี่ยวข้องสำหรับเว็บไซต์อย่างถูกต้อง ฉันสามารถแนะนำบทความโดย Dmitry ผู้เขียนบล็อก ktonanovenkogo.ru ฉันไม่เคยเห็นคำอธิบายที่ละเอียดและเข้าใจได้มากเท่านี้มาก่อน
ตัวอย่างเช่น ฉันจะแสดงให้คุณเห็นว่าลิงก์ที่นำไปสู่ไฟล์ที่เกี่ยวข้องกับรูทไซต์จะมีลักษณะอย่างไร (เราเพียงแค่ตัดทุกอย่างทางด้านซ้ายของเครื่องหมายทับที่สามในลิงก์สัมบูรณ์ที่คล้ายกัน):
ลิงค์ที่เกี่ยวข้อง
บ้าน
ข้อความลิงก์ (จุดยึด)
สีและการออกแบบข้อความป๊อปอัปขึ้นอยู่กับระบบปฏิบัติการและการตั้งค่าเบราว์เซอร์เท่านั้น
วิธีเปิดลิงค์ในหน้าต่างใหม่ตามค่าเริ่มต้น เมื่อคุณคลิกลิงก์ เอกสารใหม่จะเปิดขึ้นในหน้าต่างปัจจุบัน อย่างไรก็ตาม เมื่อเรียกดูเว็บไซต์ สิ่งนี้ไม่สะดวกสำหรับฉันเป็นการส่วนตัว เมื่ออ่านบทความและคลิกลิงก์ จะสะดวกสำหรับฉันที่หน้านั้นเปิดในหน้าต่างใหม่ และฉันสามารถอ่านบทความก่อนหน้าต่อได้ตลอดเวลา อีกเหตุผลหนึ่งที่ต้องเปิดลิงก์ในหน้าต่างใหม่ก็คือเมื่อคุณไปที่ไซต์ของผู้อื่น มีความเป็นไปได้สูงที่ผู้อ่านจะไม่กลับมา โดยเฉพาะอย่างยิ่งถ้าเขาเปลี่ยนหลายครั้งและจำไม่ได้ว่าเขาอยู่ที่ไหนเมื่อไม่กี่นาทีที่แล้ว
แอตทริบิวต์เป้าหมายของแท็กจะช่วยให้เราเปิดลิงก์ในหน้าต่างใหม่ - โดยค่าเริ่มต้น จะมีค่า _self ซึ่งโดยปกติจะไม่ระบุ หากต้องการเปิดเอกสารในหน้าต่างใหม่ ให้เปลี่ยนค่าของแอตทริบิวต์เป้าหมายเป็น _blank :
| 1 | หน้าต่างใหม่ |
หน้าต่างใหม่
คุณควรทำอย่างไรหากเมื่อเยี่ยมชมไซต์ของผู้อื่น โดยที่ลิงก์เปิดในหน้าต่างปัจจุบัน คุณต้องการเปิดลิงก์เหล่านั้นในหน้าต่างใหม่ คุณเพียงแค่ต้องคลิกพวกมันไม่ใช่ด้วยปุ่ม แต่ใช้ล้อเลื่อนของเมาส์ ในกรณีนี้ หน้าใหม่จะเปิดขึ้นในหน้าต่างใหม่
วิธีสร้างลิงก์ไปยังอีเมล (ที่อยู่อีเมล)เมื่อคุณคลิกลิงก์นี้ โปรแกรมอีเมลเริ่มต้นของคุณจะเปิดขึ้น โดยมีช่อง "ถึง" กรอกไว้แล้ว เพื่อให้หัวเรื่องของจดหมายถูกกรอกโดยอัตโนมัติ คุณต้องสร้างลิงก์ไปยังอีเมลประเภทนี้:
Dmitry KtoNaNovenkogo แนะนำวิธีอื่นในการตั้งค่าบุ๊กมาร์กในข้อความของหน้าเว็บโดยไม่ต้องใช้จุดยึด html ในการดำเนินการนี้ เราสร้างบุ๊กมาร์กจากแท็ก HTML ใดๆ ที่มีอยู่ในหน้า โดยกำหนดแอตทริบิวต์ Universal id ให้กับมัน ตัวอย่างเช่น เรามาบุ๊กมาร์กแท็กชื่อ h3 กัน:
ข้อความชื่อเรื่อง
สิ่งสำคัญคือต้องรวมตัวอักษรละตินในแอตทริบิวต์ id เป็นอักขระตัวแรกของชื่อจุดยึด จากนั้นคุณสามารถใช้อักขระอื่นๆ ที่อนุญาตได้
ตัวอย่างเช่น กลับไปที่หัวข้อ “ “ แล้วดำเนินการต่อ
คุณสามารถใช้ลิงก์แฮชเพื่อไปยังสถานที่ที่ต้องการไม่เพียงแต่ภายในหน้าเดียว แต่ยังไปยังหน้าอื่นบนไซต์ด้วย ในการดำเนินการนี้ เราตั้งค่าจุดยึด html ในตำแหน่งที่ถูกต้องในหน้าขวา และในลิงก์แฮชเอง เราเขียนที่อยู่ของหน้านี้หน้าสัญลักษณ์แฮช ตัวอย่างเช่น:
ลิงก์ข้อความไปยังที่คั่นหน้าจุดยึด HTML
ประเภทและสีของไฮเปอร์ลิงก์ในรูปแบบ HTML- ลิงก์ที่ยังไม่ได้เยี่ยมชมจะเป็นสีน้ำเงินและขีดเส้นใต้
- ลิงก์ที่ใช้งานอยู่ - เปลี่ยนเป็นสีแดงในช่วงเวลาระหว่างการคลิกเมาส์บนลิงก์และเริ่มโหลดหน้าใหม่ เห็นได้ชัดว่าเธออยู่ในสภาพนี้เพียงช่วงเวลาสั้น ๆ เท่านั้น
- ลิงก์ที่เข้าชม – เปลี่ยนสีเป็นสีม่วงหลังจากคลิก
คุณสามารถเปลี่ยนสีของไฮเปอร์ลิงก์ในเอกสาร HTML ได้โดยใช้แท็กและคุณลักษณะต่อไปนี้:
- ลิงก์ – สีของลิงก์ที่ยังไม่ได้เยี่ยมชม
- Alink – สีของลิงค์ที่ใช้งานอยู่
- Vlink – สีของลิงก์ที่เยี่ยมชม
คุณลักษณะข้างต้นทั้งหมดสามารถนำมารวมกันได้:
| 1 |
ฉันหวังว่าตอนนี้คงชัดเจนแล้วว่าจะสร้างไฮเปอร์ลิงก์บนหน้า HTML และอีเมลได้อย่างไร วิธีสร้างรูปภาพเป็นลิงก์ แองเคอร์ข้อความ แฮชลิงก์ และแองเคอร์ html คืออะไร แท็ก html และแอตทริบิวต์ลิงก์คืออะไร ฉันพยายามอย่างดีที่สุดเท่าที่จะทำได้เพื่อบอกรายละเอียดว่าลิงก์ใน HTML คืออะไรและคืออะไร ฉันขอเตือนคุณว่าการแทรกไฮเปอร์ลิงก์ลงในข้อความทำได้ในโหมด HTML เท่านั้น
ฉันไม่เคยเขียนบทความยาวขนาดนี้มาก่อนเลย มีมากกว่า 10,000 ตัวอักษร แต่นี่ไม่ใช่จุดสิ้นสุดของหัวข้อลิงก์ที่ต้องดำเนินต่อไป
หากบทความนี้มีประโยชน์สำหรับคุณ โปรดคลิกที่ปุ่มโซเชียลมีเดียด้านล่าง เจอกันใหม่หน้าเพจนะ!
เรามาพูดถึงคำถามที่ค่อนข้างง่าย แต่ในขณะเดียวกันก็เป็นที่นิยม จะทำให้รูปภาพเป็นลิงค์ได้อย่างไร? มันเกิดขึ้นว่ามีความจำเป็นต้องเพิ่มลิงก์ไปยังโครงสร้างไซต์ไปยังแหล่งข้อมูลบางอย่างไม่ใช่ในรูปแบบของลิงก์ข้อความ แต่อยู่ในรูปแบบของรูปภาพ ซึ่งค่อนข้างสมเหตุสมผลเนื่องจากลิงก์ในรูปของรูปภาพดูน่าสนใจมากกว่าลิงก์ข้อความธรรมดา และยิ่งไปกว่านั้นผู้เยี่ยมชมจะสังเกตเห็นได้ชัดเจนยิ่งขึ้นมาก
จริงๆ แล้วคำถามนั้นค่อนข้างง่าย แต่ไม่ใช่ทุกคนที่จะสามารถแก้ไขได้ ตามตัวอย่าง ฉันขอแนะนำให้ถ่ายภาพใดๆ บนอินเทอร์เน็ตและแปลงเป็นลิงก์ไปยังแหล่งข้อมูล ตัวอย่างเช่นฉันจะเพิ่มลิงก์ไปยังโซเชียลเน็ตเวิร์ก VKontakte ในบทความนี้ และในการออกแบบรูปลักษณ์ของลิงค์ ฉันจะใช้โลโก้ VKontakte
ดังนั้นเพื่อดำเนินการตามแผนคุณต้องค้นหาหรือวาดภาพซึ่งจะกลายเป็นลิงก์ในภายหลัง และหาวิธีแสดงรูปภาพโดยใช้ html เล็กน้อย และวิธีทำให้รูปภาพกลายเป็นลิงค์คลิกได้เต็มที่และใช้งานได้
HTML - รหัสรูปภาพหากต้องการแสดงรูปภาพในโค้ด HTML คุณสามารถใช้แท็ก img สำหรับสิ่งนี้ได้ ผลลัพธ์รูปภาพอาจดูแตกต่างออกไป ขึ้นอยู่กับไวยากรณ์ของโค้ดของเรา ตัวอย่างเช่น เมื่อใช้ไวยากรณ์ HTML โค้ดจะมีลักษณะดังนี้:
และเมื่อใช้ไวยากรณ์ XHTML - เช่นนี้
รายละเอียดเพิ่มเติมเกี่ยวกับไวยากรณ์สามารถพบได้ในบทความเกี่ยวกับ DOCTYPE
เพิ่มเติมเล็กน้อยเกี่ยวกับรหัส:
src=”URL” — แทนที่จะเป็น URL คุณต้องป้อนเส้นทางไปยังรูปภาพที่เราจะแปลงเป็นลิงก์
alt = "ข้อความแสดงแทน" - มีวัตถุประสงค์เพื่อแสดงข้อมูลข้อความเกี่ยวกับรูปภาพเมื่อแสดงรูปภาพถูกปิดใช้งานในเบราว์เซอร์
นอกจากนี้ แท็ก img ยังมีคุณลักษณะอื่นๆ อีกด้วย สิ่งสำคัญ:
ความสูง - ความสูงของภาพ
ความกว้าง - ความกว้างของภาพ
นี่เป็นเพียงคุณสมบัติบางส่วนที่ใช้กับรูปภาพ แต่ในขั้นตอนนี้เราก็เพียงพอแล้ว คุณลักษณะทั้งหมดนี้สามารถกำหนดได้ทั้งในโค้ด html และในรูปแบบ css
HTML - รหัสลิงก์คำอธิบายสำหรับรหัส:
แท็กยังมีคุณลักษณะอื่น ๆ อีกด้วย แต่ในขั้นตอนนี้เราอาจสนใจเพียงสองสามคุณสมบัติเท่านั้น:
เป้าหมาย - ออกแบบมาเพื่อกำหนดหน้าต่างเบราว์เซอร์ที่จะเปิดเอกสารโดยใช้ลิงก์ปัจจุบัน ตัวอย่างเช่น เอกสารจะเปิดในหน้าต่างปัจจุบัน (ค่าเริ่มต้น) หรือในหน้าต่างใหม่
ตอนนี้เรารู้แล้วว่ารูปภาพนั้นเป็นลิงค์และประกอบด้วยโค้ดสองส่วน สิ่งที่เหลืออยู่คือการรวมเข้าด้วยกัน ดังที่ได้กล่าวไว้ข้างต้น ฉันจะใช้โลโก้ของโซเชียลเน็ตเวิร์ก VKontakte เพื่อแสดงรูปภาพและใส่ลิงก์ไปยังกลุ่มของฉัน ซึ่งฉันจะตั้งค่าลิงก์ให้เปิดในหน้าต่างใหม่โดยใช้แอตทริบิวต์เป้าหมาย
ขั้นแรก คุณต้องอัปโหลดรูปภาพไปยังเซิร์ฟเวอร์ที่เราใช้ หรือคัดลอกลิงก์ไปยังรูปภาพบนอินเทอร์เน็ต ฉันชอบที่จะใช้เซิร์ฟเวอร์ของตัวเองเพื่อแสดงรูปภาพ
ฉันต้องการจองทันทีที่ฉันอัปโหลดภาพไปยังไลบรารี WordPress นั่นคือเป็นไฟล์มีเดีย เนื่องจากฉันจะเพิ่มลิงค์รูปภาพไปยังบทความ แต่เมื่อออกแบบไซต์และเพิ่มองค์ประกอบต่าง ๆ ลงในไซต์ การอัปโหลดรูปภาพโดยใช้ไคลเอ็นต์ FTP ไปยังโฟลเดอร์ที่ต้องการจะถูกต้องมากกว่า ใน WordPress โฟลเดอร์นี้มักอยู่ในโฟลเดอร์ธีมและเรียกว่ารูปภาพหรือ img
นี่คือสิ่งที่จะมีลักษณะดังนี้:
อย่างที่เราเห็นมันกลับกลายเป็นว่าพูดอย่างอ่อนโยนไม่ค่อยดีนัก แอตทริบิวต์สำหรับ img จะช่วยให้เราปรับปรุงรูปลักษณ์และตำแหน่งได้ ฉันยังเพิ่มย่อหน้าที่ฉันกำหนดแอตทริบิวต์การจัดตำแหน่งข้อความไว้ตรงกลาง ซึ่งหมายความว่าข้อความและองค์ประกอบอื่นๆ ที่อยู่ระหว่างแท็ก p จะถูกจัดตำแหน่ง
ข้อมูลเพิ่มเติมเล็กน้อยเกี่ยวกับแท็ก p:
ได้รับการออกแบบมาเพื่อกำหนดย่อหน้าข้อความ มีแท็กเปิดและปิด
style - แอตทริบิวต์กำหนดรูปแบบขององค์ประกอบโดยใช้กฎ CSS
การจัดแนวข้อความ: กึ่งกลาง; — กฎ CSS กำหนดการจัดตำแหน่งแนวนอนขององค์ประกอบ (แท็ก p และองค์ประกอบทั้งหมดภายใน) ในกรณีนี้ องค์ประกอบจะจัดชิดตรงกลาง
เราก็เลยจัดภาพ แต่ก็ยังไม่กลายเป็นลิงค์
นั่นคือทั้งหมดโดยพื้นฐาน เมื่อมองแวบแรกอาจดูซับซ้อนเล็กน้อย แต่ในความเป็นจริงทุกอย่างเรียบง่ายสิ่งสำคัญคือต้องอ่านทุกอย่างที่เขียนอย่างละเอียด และแน่นอนคุณควรพยายามสร้างลิงค์ด้วยรูปภาพด้วยตัวเองอย่างแน่นอน การฝึกฝนอย่างดีที่สุดจะช่วยให้คุณเข้าใจทุกสิ่งที่ไม่ชัดเจนในทางทฤษฎี และยังช่วยให้คุณจดจำสิ่งที่ต้องทำได้ดีขึ้นมาก
ไฮเปอร์ลิงก์ถูกประดิษฐ์ขึ้นเพื่อเชื่อมโยงเอกสารบนเครือข่ายเข้าด้วยกัน และหากไซต์ของคุณประกอบด้วยหลายหน้ามากกว่าหนึ่งหน้า คุณสามารถเชื่อมโยงเข้าด้วยกันได้โดยการสร้างไฮเปอร์ลิงก์เท่านั้น เรามาดูตัวอย่างกันโดยตรงว่าสิ่งนี้มีลักษณะอย่างไร
การสร้างไฮเปอร์ลิงก์อย่างง่าย
ไปที่หน้าอื่น
มีคุณสมบัติที่น่าสนใจอีกอย่างหนึ่งที่อาจเป็นประโยชน์สำหรับคุณ:
