JavaScript SEO อีกหนึ่งเทคนิคของการทำ SEO ที่อาจดูเหมือนยาก แต่ไม่ได้ยากอย่างที่คุณคิด
JavaScript SEO คือ การทำ SEO บนเว็บไซต์ที่เขียนด้วย JavaScript ซึ่งในปัจจุบันมีหลายเว็บไซต์ที่สร้างด้วย JavaScript Frameworks และ Libraries (และมีแนวโน้มเพิ่มมากขึ้นเรื่อย ๆ) ในบทความนี้เลย อยากพาทุกคนไปทำความเข้าใจเกี่ยวกับ JavaScript SEO มากขึ้น พร้อมทั้งแนะนำการปรับปรุงเว็บไซต์ด้วย JavaScript SEO อย่างไรให้มีประสิทธิภาพ ไปดูกันเลย
ทำไมการทำ JavaScript SEO ถึงเป็นสิ่งที่คนทำ SEO ทุกคนต้องศึกษา
JavaScript SEO คืออะไร
JavaScript SEO คือ การทำ SEO บนเว็บไซต์ที่สร้างขึ้นจาก JavaScript Frameworks และ JavaScript Libraries ซึ่งช่วยให้ Google เข้ามาเก็บข้อมูล (Crawl) และนำไปจัดอันดับ (Index) ได้ง่าย รวมถึงทำให้เว็บไซต์เป็นมิตรกับการค้นหา (Search-friendly) และถูกค้นเจอได้ง่ายขึ้น โดย JavaScript SEO ถือว่าเป็นส่วนหนึ่งของการทำ Technical SEO ด้วย
Google เก็บข้อมูลเว็บไซต์ JavaScript อย่างไร
Google จะทำการเก็บข้อมูลเว็บไซต์ JavaScript โดยแบ่งออกเป็น 3 ระยะใหญ่ ๆ ดังนี้
Crawling
- เมื่อ Google Bot เจอหน้าเว็บไซต์ก็จะทำการจะทำการจัดคิวสิ่งที่ต้องประมวลผล เก็บรวบรวมข้อมูล (Crawl) และแสดงผล (Render) ทุกเว็บไซต์
- จากนั้นก็ทำการร้องขอ (Request) ไปยังฝั่ง Server เพื่อขอไฟล์ HTML มาแยกวิเคราะห์เนื้อหา HTML ในขั้นต้น เพื่อให้ Google Bot สามารถระบุทรัพยากร JavaScript ที่ถูกฝังไว้ได้ เช่น Script Tags หรือ Inline scripts
Rendering
- ต่อมา Google Bot จะเพิ่มเว็บเพจที่มี JavaScript ลงในคิวการเรนเดอร์ เพื่อทำการประมวลผลต่อไป ซึ่งการจัดคิวเรนเดอร์นี้จะช่วยให้แน่ใจว่าหน้าเว็บเพจที่ถูกเขียนด้วย JavaScript จะถูกแสดงผลบน Google
- จากนั้น Google จะใช้เบราว์เซอร์แบบไม่มีส่วนหัว (Headless Browser) เช่น Google Chrome ใน Headless Mode เพื่อเรียกใช้โค้ด JavaScript บนหน้าเว็บในคิวการเรนเดอร์ ซึ่งช่วยให้ Google สามารถจำลองวิธีที่เว็บเบราว์เซอร์ทั่วไปโต้ตอบและแสดงผลบนหน้าเว็บได้
- หลังจากเรียกใช้ JavaScript แล้ว Google Bot จะสร้าง Document Object Model (DOM) และ CSS Object Model (CSSOM) ตามหน้าที่แสดงผล โดยขั้นตอนนี้จะเกี่ยวข้องกับการแยกวิเคราะห์ HTML และ CSS ที่สร้างโดยการ Execute ของ JavaScript
- เมื่อสร้าง DOM และ CSSOM แล้ว Google Bot จะแยกเนื้อหาบนหน้าเว็บไซต์ รวมทั้งข้อความ ลิงก์ รูปภาพ และทรัพยากรอื่น ๆ โดยองค์ประกอบต่าง ๆ ที่แยกออกมานี้เป็นพื้นฐานสำหรับการจัดอันดับหน้าเว็บ (Index) บน Google Search
Indexing
หลังจากที่ทำการประมวลผลขั้นตอนต่าง ๆ ข้างต้นหมดแล้ว ก็ถึงเวลาที่ Google จะทำการนำองค์ประกอบต่าง ๆ ที่แยกออกมาไปจัดอันดับ โดยจะเชื่อมโยงกับคีย์เวิร์ด รวมถึง Metadata อื่น ๆ ที่เกี่ยวข้อง ซึ่งจะทำให้เว็บเพจของคุณไปปรากฏอยู่ในหน้า SERP เมื่อผู้ใช้ค้นหาคีย์เวิร์ดที่เกี่ยวข้องหรือคีย์เวิร์ดที่เราต้องการทำ SEO
Server-Side Rendering vs. Client-Side Rendering vs. Dynamic Rendering ต่างกันอย่างไร
Server-Side Rendering, Client-Side Rendering และ Dynamic Rendering คือ รูปแบบการเขียนโปรแกรมที่มีผลต่อการ Render ผลลัพธ์หน้าเว็บไซต์ที่ออกมาบนหน้าจอของผู้ใช้งาน โดยทั้ง 3 อย่างนี้ก็จะมีทั้งข้อดีและข้อจำกัดที่ต่างกันไป ดังนี้
Server-Side Rendering
Server-Side Rendering (SSR) คือ การ Render หน้าเว็บไซต์บน Server แทนเบราว์เซอร์ (Browser) ทำให้ข้อมูลที่ส่งมาจากฝั่ง Client หรือผู้ใช้งานนั้นถูก Render เรียบร้อยแล้ว และฝั่ง Client สามารถนำไปแสดงผลได้ทันที การทำ SSR จึงเป็นอีกหนึ่งวิธีที่เหมาะกับการทำ SEO มากที่สุด เพราะมีความรวดเร็วกว่าแบบ CSR
Client-Side Rendering
Client Side Rendering (CSR) คือ การ Render หน้าเว็บไซต์ทั้งหมดจากฝั่ง Client ซึ่งเมื่อฝั่ง Server รับคำขอ (Request) จากฝั่ง Client มา Server จะส่งเพียงแค่โครงสร้างเว็บไซต์ HTML พื้นฐานมาให้ พร้อมกับไฟล์ JavaScript แต่ยังไม่ทำการ Render เนื้อหาใด ๆ มาให้ จากนั้น JavaScript จะนำไฟล์ HTML เหล่านั้นมา Render เพื่อให้หน้าเว็บไซต์แสดงผลออกมาได้อย่างสมบูรณ์ครบถ้วน และการที่ต้องมา Render ที่ฝั่ง Client เอง ทำให้การโหลดหน้าเว็บไซต์แบบ CSR จะช้ากว่า SSR จึงไม่เหมาะกับการทำ SEO
Dynamic Rendering
Dynamic Rendering คือ วิธีแก้ปัญหาชั่วคราวสำหรับเว็บไซต์ SSR ที่ JavaScript ถูกจำกัดบน Search Engine โดยการเข้ามาตรวจสอบ Bot ที่มีปัญหากับคอนเทนต์ที่สร้างด้วย JavaScript และสร้าง Server-Rendered Version โดยที่ไม่มี JavaScript ต่อ Bot ในขณะเดียวกันก็แสดงข้อมูลให้กับผู้ใช้ในแบบ CSR
แล้วเว็บไซต์แบบไหนบ้างที่อาจต้องมีการทำ Dynamic Rendering?
- เว็บไซต์ขนาดใหญ่ที่คอนเทนต์มีการเปลี่ยนแปลงอย่างรวดเร็วและต้องการการจัดอันดับที่รวดเร็ว
- เว็บไซต์ที่มีการใช้โซเชียลมีเดียและแอปแชทที่ต้องมีการเข้าถึงเนื้อหาของเพจ
- เว็บไซต์ที่มีฟีเจอร์ JavaScript ที่ถูก Search Engine จำกัดการใช้งาน
อย่างไรก็ตาม การทำ Dynamic Rendering เป็นเพียงวิธีแก้ปัญหาชั่วคราวและไม่ใช่วิธีแก้ไขที่ Google แนะนำ เนื่องจากจะทําให้เว็บไซต์มีความซับซ้อนและใช้ทรัพยากรเป็นจำนวนมาก ซึ่งไม่เป็นผลดีต่อการทำ SEO
วิธีการตรวจสอบเว็บไซต์ JavaScript
สำหรับวิธีการตรวจสอบเว็บไซต์ JavaScript สามารถทำได้หลายวิธี เช่น
- ดู Source Code – ไปที่เว็บไซต์ที่ต้องการตรวจสอบ จากนั้นให้ คลิกขวา > Inspect แล้วสังเกตว่ามีการอ้างอิงถึงไฟล์ หรือ JavaScript Libraries หรือไม่ เช่น แท็ก <script> ที่มี Attribute “src”
- Interactive Element – หากเว็บไซต์ไหนที่มี Interactive Element เช่น Dropdown Menus, Slideshows หรือหน้าต่าง Pop-up หากมีองค์ประกอบเหล่านี้ เว็บไซต์นั้นมักจะมีแนวโน้มว่าจะเขียนด้วย JavaScript
- Dynamic Content – หากเว็บไซต์ไหนที่มีองค์ประกอบที่มีการเปลี่ยนแปลงหรืออัปเดตแบบเรียลไทม์ โดยที่ไม่ต้องทำการ Refresh หน้านั้น ๆ เช่น Social Media Feed, มี Live Search Results เว็บไซต์เหล่านั้นมักจะใช้ JavaScript ในการเขียน
- ใช้ Browser Extension – เช่น Wappalyzer และ BuiltWith สามารถใช้วิเคราะห์เว็บไซต์ และให้ข้อมูลเกี่ยวกับเทคโนโลยีที่ใช้ในการสร้างเว็บไซต์ รวมถึงสามารถดูได้ด้วยว่าเว็บไซต์นั้นใช้ JavaScript ในการสร้างหรือไม่
ปัญหาที่อาจพบได้กับ JavaScript SEO และวิธีการแก้ไข
แม้ว่าการทำเว็บไซต์ด้วย JavaScript จะมีข้อดีมากมาย ไม่ว่าจะเป็นการที่สามารถตอบสนองความต้องการของผู้ใช้งานได้มากกว่า ในเวลาสร้างน้อยและมีขั้นตอนในการสร้างที่ไม่ยุ่งยากเท่ากับการใช้ HTML แต่ JavaScript SEO ก็ยังมีข้อจำกัดอยู่บ้าง ดังต่อไปนี้
มี Title Tag และ Meta Description ที่ซ้ำกัน
โดยทั่วไป ในการทำ SEO ทุกเว็บไซต์จำเป็นจะต้องมี Title Tag และ Meta Description ที่ไม่ซ้ำกัน แต่หากเว็บไซต์ของคุณสร้างด้วย JavaScript ก็มีโอกาสที่ Meta Description อาจซ้ำกันได้ เนื่องจาก JavaScript Frameworks มักจะถูกสร้างออกมาเป็น Pattern เว็บไซต์ของคุณจึงอาจมี Meta Description ที่ซ้ำกันอย่างเลี่ยงไม่ได้ (และอาจไปซ้ำกับเว็บไซต์อื่นด้วย)
วิธีการตรวจเช็กว่าเว็บไซต์เรามี Title Tag และ Meta Description ซ้ำกันหรือไม่ สามารถเช็กได้ด้วย SEO Tool ที่ชื่อว่า Ahrefs โดยเข้าไปที่เมนู Site Audit > Duplicates แล้วเลือกดู Reports จาก Overview ดังรูปภาพด้านล่างนี้
ลืมตั้งชื่อ ALT Attribute บนรูปภาพ
Alt Attribute (หรือที่หลายคนเรียกว่า ALT Text) คือ คำอธิบายรูปภาพบนเว็บไซต์ เพื่อให้ Google รู้ว่ารูปภาพนี้สื่อถึงอะไรและมีความหมายว่าอย่างไร ซึ่งจะมีประโยชน์กับการใช้งาน Accessibility ของผู้ที่มีความบกพร่องทางสายตาของผู้พิการ โดยคำอธิบายรูปภาพนี้จะไม่ปรากฏบนหน้าเว็บไซต์ แต่จะแทรกอยู่ใน HTML Code ของเว็บไซต์แทน ซึ่งจะส่งผลดีต่อ SEO ในส่วนของ Image SEO เป็นหลัก
หลายครั้งคนทำ JavaScript SEO ก็อาจมีการละเลยการตั้ง ALT Attribute บนรูปภาพไป ซึ่งอาจทำให้โอกาสในการติดอันดับ Image SEO ลดลง และ User Experience ทางฝั่งฟีเจอร์ Accessibility มีประสิทธิภาพลดลงด้วย สำหรับการเช็ก ALT Attribute สามารถทำได้ง่าย ๆ โดยใช้ Ahrefs แล้วไปที่ Site Audit > Images ถ้าหากคุณเห็นว่ามี ALT Attribute ที่ส่วนใดหายไป ก็สามารถปรับปรุงแก้ไขได้ทันที
บล็อกไม่ให้ Google Bot เข้ามา Crawl ข้อมูลบนเว็บเพจ
ในการทำ SEO บางครั้งเราก็อาจบล็อกไม่ให้ Google Bot เข้ามา Crawl ข้อมูลที่มีความละเอียดอ่อนในบางหน้าเว็บเพจไป โดยใช้ Robots.txt เป็นตัวกำหนด ซึ่งบางครั้งถ้ามีการกำหนดคำสั่งแบบผิด ๆ ก็อาจมีกระทบกับการแสดงผลหน้าเว็บ, การเข้าถึง หรือการจัดอันดับบน Search Engine ได้
ถ้าคุณต้องการเช็กว่าทรัพยากรที่คุณบล็อกไปบน Robots.txt นั้นมีผลกระทบต่อคอนเทนต์บนหน้าเว็บเพจหรือไม่ สามารถตรวจสอบได้ โดยไปที่แท็บ Network บน Chrome Dev Tools > เลือกไฟล์ที่ต้องการบล็อก > Block request URL จากนั้นให้โหลดหน้าซ้ำ (Refresh) และดูว่ามีอะไรเปลี่ยนแปลงไปหรือไม่
และวิธีในการทำ JavaScript SEO ที่ง่ายที่สุดในการทำให้ Google Bot สามารถเข้ามา Crawl ทุกรายละเอียด JavaScript บนหน้าเว็บไซต์โดยไม่ตกหล่น ให้ทำบน Robots.txt โดยเขียนคำสั่งว่า
| User-Agent: Googlebot Allow: .js Allow: .css |
นอกจากนี้ อย่าลืมตรวจสอบไฟล์ Robots.txt เพื่อหาโดเมนย่อย (Subdomains) หรือโดเมนเพิ่มเติมที่คุณมีการ Request ไปยังที่ต่าง ๆ ด้วย เช่น โดเมนสำหรับการเชื่อมต่อ API
เนื้อหาถูกปิดกั้นและไม่แสดงผลตามที่ต้องการ
อีกหนึ่งปัญหายอดฮิตของการทำ JavaScript SEO คือ การที่เนื้อหาไม่ได้ถูกโหลดมาตามค่าเริ่มต้น (Default) ที่เราตั้งค่าไว้ แต่อาจถูกโหลดในภายหลัง ผ่านการกระทำของผู้ใช้งาน เช่น การคลิก (ซึ่งปัญหานี้เรียกอีกอย่างว่าไม่ได้โหลด Document Object Model (DOM))
โดยปัญหานี้สามารถตรวจสอบได้ 2 วิธี คือ
- นำ URL ไปตรวจสอบใน Google Search Console
- เปิดเว็บไซต์ที่ต้องการตรวจสอบ จากนั้น คลิกขวา > Inspect > คลิกที่แถบ Elements > ค้นหาคำว่า “Canonicalization” หรือ “Canonical” หากพบว่ามีแท็กขึ้นดังภาพ แปลว่าเรียบร้อยแล้ว
URL ซ้ำกันอาจถูกมองว่าเป็น Duplicate Content
เมื่อมีการใช้ JavaScript ในการสร้างเว็บไซต์ก็อาจเจอปัญหา URL ทับซ้อนกัน แต่ปลายทางคือไปที่เนื้อหาเดียวกัน อาจทำให้ Google มองว่าเว็บไซต์ของคุณมีเนื้อหาที่ซ้ำกันหรือ Duplicate Content ได้ จึงส่งผลกระทบต่อการจัดอันดับที่ผิดเพี้ยน หรือร้ายแรงที่สุด Google ก็จะปิดกั้นไม่ให้แสดงผลหน้าเว็บเพจนั้นไปเลย
โดยตัวอย่าง URL ที่มีความทับซ้อนกัน เช่น
- domain.com/Abc
- domain.com/abc
- domain.com/123
- domain.com/?id=123
ดังนั้นเพื่อป้องกันไม่ให้ Google มองว่าเว็บไซต์ของคุณมี Duplicate Content คือคุณต้องทำการตั้งค่า Canonical Tag เพื่ออ้างอิงตัวเองและเป็นป้ายบอก Google ว่าหน้าเว็บเพจไหนที่เป็นหน้าหลักหรือ Original Page โดยการใส่ Canonical Tag ทำได้ง่าย ๆ เพียงแค่ระบุโค้ดหรือ Tag ตามตัวอย่างนี้ ลงไปในส่วน <head> ของหน้าเพจได้เลย
| <link rel=”canonical” href=”https://example.com/sample-page/” /> |
หรือถ้าอยากเช็กว่าเว็บไซต์เรามี Duplicate Content เยอะแค่ไหน สามารถลองตรวจสอบผ่าน Ahrefs แล้วไปที่ Site Audit > Duplicates
*แนะนำเพิ่มเติม แม้ว่าเว็บไซต์ของคุณจะไม่มี Duplicate Content ก็ตาม แต่ทุกเว็บเพจควรมี Canonical Tag ที่อ้างอิงตัวเอง
คำถามที่พบบ่อยเกี่ยวกับ JavaScript SEO
วิธีการ Redirect URL โดยใช้ JavaScript
การ Redirect URL โดยใช้ JavaScript คือ การส่งผู้ใช้งานจาก URL หนึ่งไปอีก URL หนึ่ง ซึ่งเรามักจะทำกันตอนที่ผู้ใช้งานกดส่งแบบฟอร์มไปแล้ว หรือเปลี่ยนเส้นทางเมื่อ URL ถูกลบไป
อย่างไรก็ตาม โดยทั่วไปแล้วการ Redirect URL โดยใช้ JavaScript จะไม่แนะนำให้ทำกับ JavaScript SEO เนื่องจาก Search Engine อาจมีปัญหาในการรวบรวมข้อมูลและส่งผลต่อการจัดอันดับได้ เราแนะนำให้ทำ 301 Redirect ที่ Server แทน ซึ่งจะมีผลดีต่อการจัดอันดับบน Search Engine มากกว่า
สำหรับวิธีการ Redirect URL โดยใช้ JavaScript มี 3 วิธีด้วยกัน ดังนี้
window.location.href
ให้เรียก Property `window.location.href` ใน JavaScript เพื่อรับหรือตั้งค่า URL ของหน้าเว็บปัจจุบันได้ โดยการใช้ Property นี้ในการทำ Redirect จะเป็นการจำลองการคลิก Hyperlink ที่สามารถเพิ่มรายการใหม่ใน History ของเบราว์เซอร์ได้ ซึ่งทำให้ผู้ใช้งานสามารถคลิกปุ่ม Back เพื่อกลับไปยังหน้าเว็บไซต์ปัจจุบันได้
หากต้องการ Redirect เพื่อเปลี่ยนเส้นทางผู้ใช้ไปยัง URL อื่น สามารถกำหนด URL ใหม่ให้กับ Property นี้ได้ โดยจะมี Syntax คือ
| window.location.href = ‘https://exampleURL.com/’; |
อย่างไรก็ตาม ให้ทำการใส่โค้ดข้างต้นภายในแท็ก <script> ภายใน <head> ของหน้าเว็บไซต์ที่ต้องการ และเพิ่ม “event handler” ให้กับปุ่ม เมื่อผู้ใช้งานมีการคลิกปุ่ม ระบบก็จะทำการ Rediect ไปยัง https://exampleURL.com/ ทันที
ตัวอย่างการใช้โค้ด
| <html> <head> <script> function myFunction() { window.location.href = “https://exampleURL.com/”; } </script> </head> <body> <h2>Redirect to a Webpage</h2> <p>The location.href method redirects the user to a new webpage:</p> <button onclick=”myFunction()”>Redirect</button> </body> </html> |
window.location.assign()
อีกหนึ่งวิธีที่สามารถทำการ Redirect URL โดย JavaScript คือ การใช้ `window.location.assign` โดยมี Syntax ดังนี้
| window.location.assign(‘https://www.exampleURL.com/’); |
และมีหน้าตาภายใน Script Tag ดังนี้
| <script type=”text/JavaScript”> function Redirect() { window.location.assign(“https://exampleURL.com/”); } </script> |
ในมุมมองของผู้ใช้งานอาจมองว่า `window.location.assign` และ `window.location.href` ไม่ได้มีความแตกต่างกันแต่อย่างใด เพราะมีลักษณะการทำงานเหมือนกันทุกอย่าง ทั้งสามารถกดคลิกกลับไปยังหน้าเว็บไซต์ปัจจุบันได้ หรือมี History บนเว็บไซต์
แต่ในมุมมองของ Developer อาจมองว่า `window.location.assign()` สามารถเรียก Function เพื่อแสดงหน้าเว็บเพจที่อยู่ที่ URL ระบุ และในการตั้งค่า Property ใหม่อาจทำได้ช้ากว่า `window.location.href` แต่ทั้งนี้ก็ขึ้นอยู่กับเบราว์เซอร์ที่ใช้งานด้วย แต่ถามว่าใช้แบบไหนดีกว่า ก็คงต้องบอกว่าขึ้นอยู่กับสไตล์การเขียนโค้ดของ Developer แต่ละคน
window.location.replace()
การเขียน `window.location.replace()` จะคล้าย ๆ กับการเขียน `window.location.assign()` และ `window.location.replace()` ในการเรียกใช้ Function เพื่อแสดงเอกสารใหม่ใน URL ที่ระบุ โดยมี Syntax ดังนี้
| window.location.replace(‘https://www.exampleURL.com/’); |
และมีหน้าตาภายใน Script Tag ดังนี้
| <script type=”text/JavaScript”> function Redirect() { window.location.replace(“https://exampleURL.com/”); } </script> |
สำหรับ `window.location.replace()` จะต่างกับการเขียน Rediect ทั้ง 2 แบบข้างต้น คือ location.replace() จะไม่ได้เป็นการสร้าง History และผู้ใช้งานจะไม่สามารถกดปุ่ม Back กลับมาได้ แต่เป็นการสร้างหน้าใหม่แทนที่ไปเลย
ตัวอย่างการใช้ Rediect แบบ location.replace() เช่น
- Login Redirect – เมื่อผู้ใช้งานทำการ Login เสร็จแล้วก็จะถูกนำไปหน้าหลักของเว็บไซต์
- User Authentication – ใช้ในการตรวจสอบสิทธิ์ผู้ใช้งาน เช่น หากเรา Login กรอกรหัสไม่ถูกต้องก็จะถูกนำทางย้อนกลับไปที่หน้า Login เหมือนเดิม
- Form Submission Success – ถ้าหากผู้ใช้งานกรอกฟอร์มแล้วกดส่ง ก็จะถูกนำทางไปยังหน้า กรอกฟอร์มสำเร็จ เพื่อป้องกันการส่งแบบฟอร์มอีกครั้ง
- Geolocation – หากผู้ใช้งานกดเปลี่ยนภาษาบนหน้าเว็บไซต์นั้น ๆ ก็จะถูก Redirect ไปยังเว็บไซต์ในภาษาที่ผู้ใช้งานเลือก
Key Takeaways สรุปแบบเข้าใจง่าย
- window.location.assign() และ window.location.href ผู้ใช้งานจะสามารถกดปุ่ม Back กลับไปที่หน้าเว็บไซต์หลักได้
- ใช้ window.location.replace() ในการ Redirect ผู้ใช้งานจะไม่สามารถกด Back กลับไปที่หน้าเว็บไซต์หลัก
- สำหรับการทำ SEO วิธีการ Redirect ที่ดีที่สุดคือการใช้ 301 Redirect เพื่อให้ Search Engine เข้าใจง่ายที่สุด
วิธีการเปลี่ยน Meta Tags โดยใช้ JavaScript
การเปลี่ยน Meta Tags โดยใช้ JavaScript สามารถทำได้โดยเข้าไปที่แท็ก <head> และทำการแก้ไขเนื้อหาที่ต้องการ โดยตัวอย่างโค้ดมีหน้าตาดังนี้
| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”description” content=”Initial meta description”> <title>Dynamic Meta Tag Example</title> </head> <body> <h1>Dynamic Meta Tag Example</h1> <button onclick=”changeMetaTag()”>Change Meta Tag</button> <script> function changeMetaTag() { // Get the meta tag by its name attribute var metaTag = document.querySelector(‘meta[name=”description”]’); // Change the content attribute of the meta tag metaTag.setAttribute(‘content’, ‘New meta description’); } </script> </body> </html> |
โดยในตัวอย่างข้างต้น มี HTML Document ที่มีแท็ก <meta> ที่มี Description เริ่มต้นอยู่มีปุ่ม Event `onclick` ที่เป็นตัว Trigger ฟังก์ชัน `changeMetaTag()`ภายในฟังก์ชัน `changeMetaTag()` ให้เลือก Meta Tag โดยใช้ `document.querySelector(‘meta[name=”description”]’)`จากนั้น ให้ใช้ `setAttribute()` เพื่อเปลี่ยน Attribute ‘Content’ ของ Meta Tag เป็นค่าใหม่ ‘New meta description’
