website launch checklist
1.0.0
สิ่งที่ต้องตรวจสอบอีกครั้งก่อนเปิดตัวเว็บไซต์
ก่อนเปิดตัวเว็บไซต์ต้องแน่ใจว่า:
แท็ก alt ("แอตทริบิวต์ alt" หรือ "คำอธิบาย alt") คือแอตทริบิวต์ที่ใช้กับรูปภาพซึ่งทำหน้าที่เป็นคำอธิบายที่มองไม่เห็นของรูปภาพ
โดยจะอธิบายเนื้อหาของรูปภาพและใช้โดยโปรแกรมอ่านหน้าจอเพื่ออ่านออกเสียงให้ผู้ใช้ที่ตาบอด เสิร์ชเอ็นจิ้นยังใช้สิ่งนี้เนื่องจากไม่สามารถตีความรูปภาพได้ แต่ต้องใช้คำอธิบายแท็ก alt การใช้แท็ก Alt บนรูปภาพส่งผลเชิงบวกต่อการจัดอันดับเครื่องมือค้นหา ดังนั้นจึงเป็นผลดีต่อ SEO ข้อความแสดงแทนจะปรากฏขึ้นเมื่อรูปภาพไม่สามารถโหลดได้
แท็ก Alt ต้องอธิบายเนื้อหารูปภาพ และแนะนำให้มีความยาวไม่เกิน 125 อักขระ
ตัวอย่าง:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > หากคุณมีสภาพแวดล้อม "staging" หรือ "dev" มีโอกาสที่คุณกำลังบล็อก staging จากการจัดทำดัชนี
หากคุณต้องการให้เว็บไซต์ของคุณปรากฏในผลการค้นหา เครื่องมือค้นหานั้นจะ "จัดทำดัชนี" เว็บไซต์ของคุณ เครื่องมือค้นหามี "บอท" อัตโนมัติที่เข้าชมหน้าเว็บ "รวบรวมข้อมูล" เนื้อหาและจัดเก็บไว้ในดัชนีของเครื่องมือค้นหา ซึ่งจะช่วยให้เครื่องมือค้นหาสามารถดึงผลการค้นหาที่เกี่ยวข้องมากที่สุดได้ในภายหลัง
ก่อนเปิดตัวตรวจสอบให้แน่ใจว่าเวอร์ชันที่จะเผยแพร่นั้นอนุญาตให้จัดทำดัชนีเว็บไซต์ของคุณได้ ตรวจสอบให้แน่ใจว่าคุณไม่มีเมตาแท็กดังกล่าวใน HTML ของคุณ:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesนอกจากนี้ ให้ตรวจสอบไฟล์ robots.txt ของคุณด้วย หากคุณต้องการ อนุญาตให้ ทุกหน้าของเว็บไซต์ของคุณได้รับการจัดทำดัชนี robots.txt ของคุณจะต้องมีสิ่งนี้:
User-agent: *
Disallow:
อีกหนึ่งที่ที่ต้องตรวจสอบคือการกำหนดค่า Apache/Nginx
เมื่อเว็บไซต์ถูกแชร์บน Facebook หรือ Twitter เว็บไซต์จะแสดงภาพขนาดย่อ ชื่อเรื่อง และคำอธิบาย:
หากคุณต้องการให้เว็บไซต์ของคุณแสดงด้วยภาพขนาดย่อ ชื่อ และคำอธิบายที่ถูกต้อง คุณต้องเพิ่มเมตาแท็กที่ Facebook และ Twitter กำหนด
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->คุณสามารถทดสอบว่าเว็บไซต์ของคุณจะดูเป็นอย่างไรเมื่อแชร์บน Facebook หรือ Twitter โดยใช้เครื่องมือเหล่านี้:
ดีบักเกอร์การแชร์ Facebook
เครื่องมือตรวจสอบการ์ด Twitter
Favicon เป็นไอคอนขนาดเล็กใกล้กับชื่อเว็บไซต์ในแท็บเบราว์เซอร์
ทำให้เว็บไซต์ระบุได้ง่ายเมื่อเปิดหลายแท็บ ดูประวัติเบราว์เซอร์และบุ๊กมาร์ก เครื่องมือค้นหาบางตัว เช่น DuckDuckGo จะแสดง favicon ใกล้กับ URL ในผลการค้นหา นอกจากการปรับปรุงการใช้งานแล้ว ยังช่วยดึงดูดความสนใจของผู้ใช้ในผลการค้นหาอีกด้วย เราจึงเรียกได้ว่าเป็นเทคนิค SEO ทางอ้อมเลยก็ได้
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > ผู้ใช้สามารถบันทึกหน้าเว็บลงในหน้าจอหลักบนอุปกรณ์เคลื่อนที่ได้ ซึ่งจะสร้างไอคอนสำหรับเว็บไซต์ เช่นเดียวกับไอคอนแอป การแตะไอคอนนั้นจะเป็นการเปิดเว็บไซต์ในเบราว์เซอร์
นักพัฒนาจะได้รับการควบคุมเพื่อทำให้ประสบการณ์เว็บไซต์ใกล้เคียงกับประสบการณ์แอพเนทีฟบนมือถือมากขึ้น ตัวอย่างเช่น ตามค่าเริ่มต้น iOS จะตั้งค่าภาพหน้าจอของเว็บไซต์เป็นไอคอน แต่คุณสามารถตั้งค่าการออกแบบไอคอนแบบกำหนดเองได้โดยใช้เมตาแท็กของ Apple
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android จะใช้ค่า "apple-touch-icon" หรือ favicon (หากไม่มีเมตาแท็ก) เพื่อสร้างไอคอนบนหน้าจอหลัก
หากเครื่องมือวิเคราะห์ที่คุณใช้ไม่มีตัวกรองสำหรับสภาพแวดล้อม คุณจะสร้างมลพิษให้กับการวิเคราะห์เว็บไซต์ของคุณด้วยผลลัพธ์จากการทดสอบในสภาพแวดล้อมที่ไม่ใช่การใช้งานจริง คุณสามารถเพิ่มตัวกรองในเครื่องมือวิเคราะห์หรือฝังโค้ดแบบมีเงื่อนไขเฉพาะในสภาพแวดล้อมการใช้งานจริงเท่านั้น
แท็ก Title ระบุชื่อเรื่องของเว็บไซต์ แท็กคำอธิบายเมตาประกอบด้วยคำอธิบายสั้นๆ ของหน้า
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >ชื่อคือสิ่งที่ปรากฏในผลลัพธ์ของเครื่องมือค้นหา ซึ่งแสดงในแท็บเบราว์เซอร์และการ์ดเครือข่ายโซเชียลเมื่อแชร์ (หากไม่มีการระบุชื่อแยกต่างหากสำหรับเครือข่ายโซเชียล)
คำอธิบายจะปรากฏในผลการค้นหาด้วย มันไม่ได้ถูกใช้โดยตรงในอัลกอริธึมการจัดอันดับ ดังนั้นจึงไม่ส่งผลกระทบต่อโอกาสในการปรากฏในผลการค้นหา แต่จะทำให้ผู้ใช้มีโอกาสคลิกเว็บไซต์ของคุณมากขึ้นในผลลัพธ์ ซึ่งจะเพิ่มอัตราการคลิกผ่าน (CTR) ของเพจของคุณสำหรับ Google นั่นหมายความว่า Google จะพิจารณาว่าเป็นผลลัพธ์ที่ดีและจะอยู่ในอันดับที่สูงขึ้นในผลการค้นหาในอนาคต
หากคุณมีลิงก์ไปยังลิงก์ภายนอกบนหน้าเว็บของคุณ โดยเฉพาะลิงก์ที่เปิดในแท็บหรือหน้าต่างใหม่ คุณควรใช้ rel="noopener"
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > มีประโยชน์ด้านความปลอดภัยและประสิทธิภาพในการทำเช่นนั้น หากไม่มีหน้าภายนอกจะสามารถเข้าถึงวัตถุหน้าต่างของคุณได้โดยใช้ window.opener คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับช่องโหว่ที่แก้ไขได้โดยใช้ noopener ที่นี่: เกี่ยวกับ rel=noopener
เว็บไซต์อื่นอาจทำงานบนกระบวนการเดียวกับหน้าปัจจุบันของคุณ ดังนั้น หากหน้าภายนอกใช้งาน JavaScript จำนวนมาก ก็จะส่งผลเสียต่อประสิทธิภาพเว็บไซต์ของคุณ noopener ป้องกันสิ่งนั้นเช่นกัน
อ่านเพิ่มเติมได้ที่นี่: ประโยชน์ด้านประสิทธิภาพของ rel=noopener
เมื่อคุณทำการเปลี่ยนแปลงมากมายบนเว็บไซต์ของคุณ หรือเมื่อคุณใช้ไลบรารีภายนอกหรือเฟรมเวิร์ก CSS จำนวนมาก ก็มีโอกาสที่ไฟล์ CSS ของคุณจะมีสไตล์มากมายที่เพจของคุณไม่ได้ใช้ ตัวอย่างเช่น คุณอาจใช้ธีมหนึ่งของปลั๊กอินบางตัว แต่ CSS สำหรับธีมอื่นๆ จะยังคงอยู่ในไฟล์ CSS ของคุณโดยไม่ได้ใช้งาน และขนาดไฟล์สไตล์ชีทจะใหญ่ขึ้น
คุณสามารถลบสไตล์ที่ไม่ได้ใช้ทั้งหมดโดยใช้เครื่องมือที่เรียกว่า PurgeCSS คุณสามารถใช้มันกับ CLI หรือใช้ใน Webpack, Gulp ฯลฯ มันจะวิเคราะห์เพจของคุณ จับคู่ตัวเลือกที่ใช้ในเพจกับตัวเลือกในไฟล์ CSS และลบสไตล์ที่ไม่ได้ใช้ ในโปรเจ็กต์ล่าสุดของฉันที่ใช้เฟรมเวิร์ก Tailwind CSS แน่นอนว่ามียูทิลิตี้มากมายที่ฉันไม่ได้ใช้ PurgeCSS ลดขนาดไฟล์ app.css ของฉันจาก 214KiB เป็น 45.6Kib
แต่ระวังด้วยว่าหากปลั๊กอินสร้างองค์ประกอบบนเพจแบบไดนามิก PurgeCSS จะไม่ตรวจพบสไตล์ขององค์ประกอบนั้น แต่คุณสามารถกำหนดตัวเลือกที่อนุญาตพิเศษได้โดยส่งตัวเลือกหรือรูปแบบตัวเลือกในการกำหนดค่า และคุณยังสามารถเพิ่มตัวเลือกที่อนุญาตพิเศษได้โดยใช้ความคิดเห็นพิเศษเพื่อแสดงรายการกฎที่อนุญาตพิเศษ อ่านเพิ่มเติมเกี่ยวกับ PurgeCSS Whitelisting
เมื่อเบราว์เซอร์ร้องขอทรัพยากร เซิร์ฟเวอร์สามารถสั่งเบราว์เซอร์ว่าสามารถจัดเก็บได้นานแค่ไหน หรือ "แคช" ทรัพยากร ครั้งถัดไปที่จำเป็นต้องใช้ทรัพยากร ทรัพยากรจะสามารถใช้สำเนาในเครื่องได้ มันจะปรับปรุงความเร็วอย่างมากและลดภาระบนเซิร์ฟเวอร์ คุณสามารถกำหนดค่าเซิร์ฟเวอร์ของคุณให้ส่งคืนส่วนหัว โดยบอกว่าเนื้อหาจะถูกแคชนานเท่าใด:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
คุณจะต้องกำหนดอายุสูงสุดตามความถี่ที่สินทรัพย์ของคุณเปลี่ยนแปลง
คุณยังสามารถกำหนดค่าเซิร์ฟเวอร์ของคุณให้ใช้การบีบอัด เช่น การบีบอัด Gzip ซึ่งจะช่วยให้ถ่ายโอนทรัพยากรได้เร็วขึ้น การบีบอัดไฟล์ CSS ด้วย gzip จะช่วยประหยัดขนาดไฟล์ได้ประมาณ 50-70%
