เรียนรู้ SEO จากปลั๊กอิน Yoast ในเวิร์ดเพรส

SEO (Search engine optimization) การปรับแต่งเว็บไซต์ให้ติดอันดับการค้นหา (เช่น บน Google / Yahoo / Bing) ก่อนหน้านี้ผมทำ SEO ไม่เป็นเลย จนมาได้รู้จักกับเวิร์ดเพรสและปลั๊กอิน Yoast SEO จึงเริ่มรู้จักการทำ SEO มากขึ้น ผมเริ่มจากไม่รู้จักแม้แต่ Meta Tag ที่ใช้สำหรับการทำ SEO แม่แต่นิด (>///<)

เริ่มต้นอย่างไร?

ผมกล้าพูดได้เต็มปากว่าผมเริ่มต้นศึกษา SEO จากการทำเวิร์ดเพรสและลงปลั๊กอินที่ชื่อว่า Yoast SEO ปลั๊กอินตัวนี้ทำให้ผมเข้าใจ SEO มากขึ้น เว็บไซต์ปกติประกอบด้วย 3 ส่วนสำคัญในการทำ SEO คือ

<title>Title Tag</title>
<meta name="keyword" content="Keyword" />
<meta name="description" content="Desction" />

ต่อมาก็เริ่มเข้าใจว่านอกจาก 3 ส่วนที่สำคัญแล้ว หากต้องการที่จะปรับแต่งการแสดงผลใน Social Network ต่าง ๆ ก็ต้องเพิ่ม Meta Tag สำหรับ Social Netwok นั้น ๆ เข้าไปด้วย ยกตัวอย่าง Facebook ในการทำ Optimize สำหรับแชร์เว็บไซต์ของเราไปที่ Facebook เนี่ย เราต้องทำตามไกด์ไลน์ที่ Facebook มีมาให้นะ ไกด์ไลน์ที่ว่ามานี้ Facebook เรียกว่า “Open Graph” สามารถอ่านรายละเอียดเพิ่มเติมได้ที่ลิ้งนี้ A Guide to Sharing for Webmasters

Open Graph คืออะไร?

Open Graph Protocol เนี่ย Facebook เป็นผู้คิดค้นขึ้นมา เพื่อให้ง่ายต่อการจัดเก็บและเชื่อมโยงข้อมูลกัน ซึ่งปกติจะมี Property Value ที่ขึ้นต้นด้วย “og:xxx” ตัวอย่าง ค่าพื้นฐานที่ใช้สำหรับปรับแต่ง Open Graph ในการแสดงผลคือ

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

จากตัวอย่าง ทำให้พอเข้าใจได้ว่าแต่ละ Meta Tag มีหน้าที่ทำอะไรบ้าง หลัก ๆ ก็มี แสดงชื่อ, แสดงรายละเอียด, แสดงชื่อเว็บไซต์ และแสดงรูปภาพประกอบ

ทำความเข้าใจ Yoast SEO

Yoast SEO ทำให้ผมเข้าใจการทำ SEO ได้มากขึ้น เมื่อย้ายไปทำเว็บไซต์ที่สร้างขึ้นมาเองเช่น ใช้ JS Framework หรือ PHP Framework ความสามารถในการทำ SEO ก็จะติดตัวเราไปด้วย ถึงแม้ว่าจะไม่มีปลั๊กอิน Yoast SEO ให้ใช้ก็ตาม ผมขอยกตัวอย่าง Hello world! ของ Post ในเวิร์ดเพรส ครั้งแรก Yoast SEO ให้คำแนะนำเรามาแบบนี้

ไม่มี คีย์เวิร์ดหลักของเว็บไซต์ นั่นหมายถึง ถ้าเราใช้คีย์เวิร์ดที่หน้านี้ ก็จะไม่สามารถใช้ที่หน้าอื่นได้
ข้อความภายในหน้าเว็บไซต์ต่ำกว่า 300 คำ
ไม่มี Meta Description ของหน้านี้ว่าเกี่ยวกับอะไร (แนะนำให้มีคีย์เวิร์ดหลักด้วย)
ไม่มี รูปภาพประกอบภายในหน้า (แนะนำให้มีคีย์เวิร์ดหลัก ในช่อง Alt Text ของรูป)
ไม่มี ลิ้งภายในหน้า ( แนะนำให้ใส่ลิ้งของหน้า)
ไม่มี ลิ้งไปยังเว็บไซต์ที่เกี่ยวข้อง
ชื่อเรื่องสั้นเกินไป และ ไม่มีคีย์เวิร์ดหลักของหน้า

จากที่ได้อ่านคำแนะนำของปลั๊กอิน Yoast SEO และทำความเข้าใจ พร้อมคำแนะนำนิด ๆ หน่อย ๆ จากผมไปเป็นที่เรียบร้อยแล้ว ก็เริ่มวิเคราะห์ว่าสิ่งไหนทำง่าย สิ่งไหนทำยาก หรือเรียกง่าย ๆ ว่า “ทำก่อน ทำหลัง” นั่นเอง

เริ่มวิเคราะห์

การวิเคราะห์ของผมก็ทำง่าย ๆ อันไหนทำง่ายก็ทำอันนั้นก่อน โดยผมมีขั้นตอนดังนี้

กำหนด คีย์หลักของเว็บไซต์
กำหนด ชื่อหน้าพร้อมคีย์เวิร์ดหลัก
กำหนด Meta Description ของหน้า
กำหนด ลิ้งภายในหน้า
กำหนด ลิ้งไปยังเว็บไซต์ที่เกี่ยวข้อง
เพิ่ม รูปภาพภายในหน้า
มี ข้อความภายในเว็บไซต์ขั้นต่ำ 300 คำ

เนื่องจากผมต้องการความไวในการเขียนบทความจึงขอใช้ข้อความตัวอย่างของ Lorem ในการทดสอบ คำแนะนำในขั้นตอนแรกของ Yoast SEO ผมจึงได้ข้อความมาแบบนี้

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<a href="http://wpsite.demo/lorem-ipsum-simply-dummy-text-printing-typesetting-industry/">Lorem Ipsum is simply dummy text of the printing and typesetting industry</a>

<a href="https://nann.github.io">nann.github.io</a>

ปรับแต่งหัวข้อพร้อมคียเวิร์ดหลักของเว็บไซต์ ในส่วนของ Permalink ผมใช้วิธี Edit แล้วลบข้อความทิ้งจากนั้นก็กด Ok เลย ระบบของเวิร์ดเพรสจะทำการปรับแต่ง Permalink ให้เราเองอัตโนมัติ

ปรับแต่งผ่านปลั๊กอิน Yoast SEO

ใกล้ความจริงแล้ว ติดปัญหาอีกนิดหน่อย

จากรูปด้านบน Yoast SEO ให้คำแนะนำเรามาว่า Keyword ของเรามีความหนาแน่นมากเกินไป Yoat SEO บอกว่า ความหนาแน่นของคีย์เวิร์ดคือ 4.5% คีย์เวิร์ดที่ดีไม่ควรเกิน 2.5% นะ คีย์เวิร์ดที่เจอในหน้านี้มี 17 คำ และเพื่อให้ชัวร์ผมจึงเอาไปทดสอบผ่านโปรแกรม Atom ซึ่งเป็น Text Editor ที่ผมใช้งานเป็นประจำ ได้ผลลัพธ์ตามที่ Yoast SEO บอกจริง ๆ ด้วย ฉลาดมากนะเนี่ยปลั๊กอินตัวนี้ (~_~)

เมื่อลดความหนาแน่ของคีย์เวิร์ดลงเราก็ได้ SEO สีเขียวขึ้นสถาณะว่า SEO: Good จากปลั๊กอิน Yoast SEO ทันที (~_~)

จะเห็นว่ามีสีส้มขึ้นว่า “The slug for this page is a bit long, consider shortening it.” ก็ขึ้นอยู่กับทักษะในการใช้ภาษาอังกฤษครับว่า ต้องเขียน Permalink อย่างไรให้สั้นและได้ความหมาย ซึ่งในส่วนนี้ผมไม่ขอปรับปรุงแล้วกัน เพราะภาษาอังกฤษของผมอ่อนมาก (>///<)

เดี๋ยวก่อน

ในความเป็นจริงแล้วเราไม่ได้เขียนบทความน่าเบื่อกันแบบนี้ เรากำหนดหัวข้อเรื่อง ต่าง ๆ ไว้ด้วยเช่น Heading 1 ไปจนถึง Heading 6 ตามความสะดวกของแต่ละคน ผมเลือกใช้ Heading 2 ในการกำหนดหัวข้อเรื่อง เพราะปกติแล้ว Heading 1 จะถูกใช้ที่ Post Title ของหน้าเว็บไซต์อยู่แล้ว จึงเพิ่ม Heading 2 ชื่อว่า What ไป จากนั้นดูว่าจะมีเกิดอะไรขึ้น

Yoast SEO ก็ขึ้นเตือนทันทีเลยว่า ถ้าเราจะใช้หัวข้อเรื่อง (Heading) ต้องมี คีย์เวิร์ดหลักของเว็บไซต์อยู่ด้วยนะ อะฮ๊าาา ได้เทคนิคเพิ่มอีกแล้ว (~_~) เมื่อได้รับคำแนะนำจาก Yoast SEO เราก็จัดการปรับแต่งมันให้เรียบร้อย ด้วยการเพิ่มคำว่า “What is Lorem” เข้าไป

แต่เมื่อเพิ่มคีย์เวิร์ดหลักเข้าไปที่หัวข้อเรื่อง (Heading) แล้วพบว่า “อ้าวเห้ย” คีย์เวิร์ดเกิน จึงได้รู้ว่า คีย์เวิร์ดนั้นรวมทั้งหมด ทั้งข้อความแบบปกติและข้อความแบบหัวข้อเรื่อง (Heading) อะฮ๊าาา ได้เทคนิคเพิ่มอีกแล้ว (~_~)

ความหนาแน่นเจ้าปัญหา

Yoast SEO บอกว่าความหนาแน่นของคีย์เวิร์ดภายในหน้าแนะนำให้ไม่เกิน 2.5% สังเกตุได้จากตามภาพประกอบต่าง ๆ ที่ผมยกตัวอย่างมานั้นตัวเลขที่ The Keyword density is นั้นมีค่าไม่นิ่งเลย ตามคำแนะนำของ Yoast SEO นั้นแปลออกมาได้ว่า ตอนนี้คีย์เวิร์ดหลักที่หน้าเว็บไซต์เรามีความหนาแน่นของคีย์เวิร์ดหลักอยู่ที่ เปอร์เซ็นต์% ซึ่งเกิน 2.5% คีย์เวิร์ดที่เจอตอนนี้คือ จำนวนคีย์เวิร์ด

ความหนาแน่นนี้คิดจากจำนวนคำภายในหน้า สังเกตุได้จาก Word Count หรือ จำนวนคำ ที่ Post หรือ Page ในเวิร์ดเพรสจะอยู่ด้านล่างของกล่องข้อความ

เขียนบทความทุกครั้งเช็คจำนวนคำด้วยนะครับว่ามีเท่าไหร่ เกิน 2.5% หรือ มีน้อยกว่า 0.5% หรือป่าว มีมากเกิน 2.5% จาก Word Count ก็จะขึ้นเตือนว่า ความหนาแน่นของคีย์เวิร์ดเยอะ ต่ำกว่า 0.5% ก็จะขึ้นเตือนว่า ความหนาแน่นของคีย์เวิร์ดน้อยเกินไป

เกร็ดเล็ก เกร็ดน้อย

เนื่องจากในการยกตัวอย่างผมใช้ Lorem ในการทดสอบ ซึ่งมีคีย์เวิร์ดติดมากับข้อความอยู่มาก และมีคีย์เวิร์ดในการเริ่มต้นของบทความด้วย Yoast SEO บอกว่า ในการทำ SEO แนะนำให้มีคีย์เวิร์ดในการขึ้นต้นของบทความด้วยนะ

ถ้าหากไม่มีคีย์เวิร์ดหลักในการขึ้นต้นของบทความก็จะมีคำแนะนำของ Yoast SEO ขึ้นมาแจ้งเตือนแบบนี้

การแชร์

เมื่อปรับแต่งในส่วนของ ผลการค้นหาเรียบร้อยแล้ว เรายังสามารถปรับแต่งในส่วนของการแชร์เว็บไซต์หรือบทความได้อีกด้วย ปลั๊กอิน Yoast SEO มาพร้อมกับการปรับแต่งในส่วนของการแชร์ลงบน Social Network ต่าง ๆ ให้ สามารถปรับแต่งได้ที่ไอคอนแชร์ที่อยู่ตรงกลางระหว่าง สัญญาณไฟ กับ รูปฟันเฟืองได้เลย

Sharing Debugger

เมื่อตั้งค่าการแชร์เนื้อหาลงบน Facebook แล้วพบกว่าหัวข้อเรื่องและรูปภาพไม่ตรงตามที่เราตั้งค่าไว้ที่ในส่วนของการแชร์ตามหัวข้อข้างบน สามารถแจ้งให้กับ Facebook ได้ เพื่อให้ Facebook ได้เข้ามาเก็บ Open Graph Protocol ที่เราตั้งค่าไว้ใหม่ได้ที่ Sharing Debugger สิ่งที่ต้องทำคือ นำลิ้งของเราไปใส่ที่ช่อง Enter a URL to see the information that is used when it is shared on Facebook. จากนั้นกด Debug

หลังจากกด Debug แล้ว Facebook จะแสดงตัวอย่างการแชร์เว็บไซต์ลงบน Facebook ให้ดูเป็นตัวอย่าง

แสดงรายละเอียดของ Open Graph Properties

เมื่อกด Show All Raw Tags ก็จะแสดงรายละเอียดของ Open Graph Properties ที่เราได้ตั้งค่าไว้ที่หน้าเว็บไซต์ของเรา

ประยุกต์ใช้อย่างไร?

ผมมีบล็อกเล็ก ๆ ของตัวเองที่เขียนเกี่ยวกับด้านโปรแกรมมิ่งที่ nann.github.io บล็อกนี้พัฒนามาจาก Github Page + Jekyll ใช้ Github Page ในการเก็บพื้นที่หรือเรียกง่าย ๆ ว่า “Host” นั่นเอง และใช้ Jekyll ในการเขียนบทความ โดยใช้ไฟล์ Markdown เพื่อแสดงเนื้อหาของบทความ ผมปรับแต่งในส่วนของการแชร์บทความลงใน Social Network ต่าง ๆ เช่น Facebook และ Twitter เพื่อให้แสดงหัวข้อเรื่อง และรูปภาพ ได้ตรงตามความต้องการ เห็นได้ว่าแม้ไม่ได้ใช้ปลั๊กอิน Yoast SEO ผมก็ปรับแต่งการแชร์บทความลง Facebook หรือ Twitter ได้

เบื้องต้นก็จบแล้วครับสำหรับบันทึกการเดินทางตั้งแต่ทำ SEO ไม่เป็นเลย ไม่รู้จักแม้แต่ Meta Tags สำหรับการทำ SEO บทความนี้ยังไม่รวมถึง Google Algorithm: Panda, Penguin and Hummingbird หรือแม้กระทั่ง Google Analytics และ Google Search Console เพราะ SEO เป็นสิ่งที่ต้องทำแยกออกมาจากการทำเว็บไซต์ ซึ่งปกติแล้วเราจะแบ่งหน้าที่การทำงานกันระหว่าง คนทำระบบ คนทำหน้าเว็บไซต์ คนออกแบบเว็บไซต์ และคนทำ SEO เอาไว้บทความต่อ ๆ ไป ผมจะทะยอยพูดถึงแต่ละเรื่องทีหลังนะครับ

ขอให้สนุกกับการทำ SEO ครับ

แหล่งข้อมุล

SEO

Nann

Developer, Healthcare and Investment.