สอนวิธีทำ HTTPS ง่าย ๆ ฟรี ๆ ทำให้เว็บไซต์เราโหลดเร็ว ปลอดภัย SEO แรง

designil

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

เวลาทำเว็บไซต์ทั่วไป ถ้าเกิดเราสังเกตหน้าชื่อเว็บเรา หรือหน้า www จะเห็นคำว่า http:// อยู่ด้วยเสมอครับ ซึ่งถ้าเราสังเกตพวกเว็บไซต์ขายของ E-Commerce เว็บไซต์ธนาคาร และเว็บไซต์ใด ๆ ก็ตามที่ต้องการให้ข้อมูลที่รับ-ส่งปลอดภัย ก็จะสังเกตว่าใน URL ด้านหน้าสุดจะขึ้น https:// แทน

ซึ่งเมื่อก่อนอาจจะเคยทราบกันว่าการจะมี HTTPS ต้องเสียเงินเยอะเพื่อซื้อ Certificate และต้องหาโปรแกรมเมอร์มาใส่เข้าไปอีก แต่ในปัจจุบัน HTTPS กลายเป็นมาตรฐานของเว็บไซต์ทั่วโลก มีการแจกฟรี แถมเอามาใช้ได้ง่ายมาก ๆ ด้วยครับ ล่าสุด Designil เพิ่งเปลี่ยนมาใช้ HTTPS เลยจะมาแนะนำวิธีกันครับ

ทำไมเว็บไซต์ควรต้องมี HTTPS ?

การทำ https ง่าย ๆ ด้วย Cloud Flare
พอใส่ HTTPS แล้วเว็บจะกลายเป็นสีเขียว
  • เว็บไซต์ปลอดภัย – มีการเข้ารหัสในการรับ-ส่งข้อมูล ทำให้โดนแฮคได้ยากขึ้น
  • Google ชอบ – Google ออกมาประกาศสนับสนุนให้ ทุกเว็บมี HTTPS ซึ่งจะทำให้ SEO ของเราดีขึ้นด้วยครับ
  • เว็บโหลดเร็วขึ้น – สามารถใช้ HTTP/2 ซึ่งเป็นตัวช่วยให้เว็บไซต์โหลดเร็วขึ้น โดยใช้ร่วมกับ HTTPS
  • เว็บขึ้นสีเขียวใน URL Bar พร้อมคำว่า Secure – ตอนนี้ใน Google Chrome ถ้าไม่มี HTTPS จะขึ้นสีขาว แต่ในอนาคตเค้าบอกว่าอนาคตมันจะกลายเป็นสีแดงครับ
    • ข้อมูลเพิ่มเติม: Resource ต่าง ๆ ในเว็บทั้งหมดต้องเป็น https:// ด้วยครับ โดยถ้าเราทำตามขั้นตอนส่วนใหญ่จะไม่มีปัญหา ยกเว้นจะมีโค้ดส่วนไหนที่เราไป Hard code ว่าเป็น http:// ครับ โดยต้องระวังพวก iframe, script, font เป็นพิเศษ เพราะถ้าโหลดพวกนี้ผ่าน http:// โดยที่เว็บเราเป็น https:// แล้ว จะโหลดไม่ขึ้นครับ (ขอขอบคุณข้อมูลจากคุณ Sorrawut Kittikeereechaikun)

วิธีทำ HTTPS ง่ายและฟรีด้วย Cloudflare

Cloudflare เป็นบริการที่เรียกว่า Content Delivery Network (CDN) หรืออธิบายง่าย ๆ คือ เค้าจะทำการก็อปเว็บเราไว้ในหลาย ๆ Server ของ Cloudflare ทั่วโลก ถ้าคนเข้าเว็บเราใกล้ Server ไหนของ Cloudflare ก็จะได้รับข้อมูลจาก Server นั้น ทำให้ Server ต้นของเราไม่ต้องโหลดข้อมูลหนักเกินไป

เปรียบเทียบ Cloudflare CDN
เปรียบเทียบความเร็วแบบใช้ Cloudflare (ซ้าย) : ไม่ใช้ (ขวา)

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

ทีนี้ความใจดีของ Cloudflare คือ ตัวฟรีที่เค้าให้มาก็เพียงพอต่อเว็บไซต์ทั่วไปแล้วครับ มีทั้ง HTTPS และ HTTP/2 มาให้ใช้ฟรี ๆ เลยด้วย มาดูขั้นตอนการเซ็ต Cloudflare ให้เว็บไซต์เรากันดีกว่าครับ

1. สมัคร Cloudflare (ฟรี) แล้วเพิ่มเว็บไซต์เราเข้าไปได้เลย

เพิ่มเว็บไซต์ใหม่ใน Cloudflare

2. Cloudflare จะทำการแสกนโดเมนเรา เมื่อเสร็จเรียบร้อยแล้ว ให้ไปแก้ Name Server ในเว็บที่เราจดโดเมนเว็บไซต์เรา (เช่น Godaddy, Name.com, PATHosting ฯลฯ) ให้เป็นตามที่เค้าบอก

แต่ถ้าทำไม่เป็นลองอีเมลไปหา Support ของเว็บที่เราซื้อโดเมนให้เค้าทำให้ครับ

Free Plan HTTPS ของ Cloudflare
เลือกแพลน Free ได้เลยนะครับในขั้นตอนนี้ (ตอนแรกมันจะเลือกแบบ $20/เดือน ให้)
Name Server ของ CloudFlare

ป.ล. เปลี่ยนตรงนี้แล้วมันอาจจะไม่มาทันทีนะครับ ต้องรอ Name Server อัพเดทสักครู่ (บางทีก็แปปเดียว บางทีก็หลายชั่วโมงครับอันนี้)

3. เข้า Cloudflare แล้วไปแท็บ Crypto แล้วเลือกเป็น Flexible SSL

Flexible SSL Cloudflare

4. รอไปเรื่อย ๆ จนกว่ามันจะขึ้นเขียวด้านล่าง เขียนว่า Active Certificate แบบในรูปด้านบน (บางคนทำแล้วรอ 5 นาทีก็มา บางคนทำแล้วรอ 10 ชั่วโมงก็มี แต่ไม่เกินวันแน่นอนครับ)

5. เช็คบ่อย ๆ จนมันขึ้นเขียวแล้ว แปลว่า SSL มาพร้อมแล้ว ก็เริ่มใช้ได้เลย :)

ถ้าใครใช้ WordPress เหมือน Designil ก็ทำตามขั้นตอนต่อไปดังนี้ฮะ ส่วนถ้าเป็นเว็บไซต์ธรรมดาก็ยินดีด้วย เรียบร้อยแล้วครับ :D

5.1. ลงปลั๊กอิน WordPress 2 ตัว ดังนี้ครับ

  • Cloudflare – ติดตั้งแล้วเปิดใช้งาน จะต้อง Log In ด้วย Username / API Key ของ Cloudflare ก่อนครับ (สามารถกดตามในหน้าล็อกอินเพื่อเอา API Key ได้เลย)
  • Cloudflare Flexible SSL – ตัวนี้ติดตั้งแล้วเปิดไว้เฉย ๆ ไม่ต้องตั้งค่าครับ

5.2. เปลี่ยน http:// ในเมนู Settings > General ช่อง WordPress Address กับ Site Address เป็น https://

ใส่ค่าเป็น HTTPS
อย่าลืมลองเข้า https://ชื่อเว็บเรา ก่อนว่าติดมั้ยนะครับ กันเปลี่ยนตรงนี้แล้วเว็บล่มครับ

6. สำหรับเว็บไซต์ที่ไม่ใช่ WordPress แนะนำให้ตั้งค่าเพิ่มเติมเพื่อบังคับให้เว็บเราเปิดด้วย HTTPS ตลอดเวลาครับ

โดยไปที่แท็บ Page Rules ใน Cloudflare แล้วกดปุ่ม Create New Rules จากนั้นกรอกตามนี้ครับ (สำหรับเว็บไซต์ที่เป็น WordPress จะทำหรือไม่ทำก็ได้)

การตั้งค่า HTTPS Page Rules
วิธีตั้งค่า Page Rules เพื่อบังคับ HTTPS (ขอขอบคุณรูปจากคุณ Nattanon)

7. ถ้าเรามี Cache (ถ้า WordPress ก็ปลั๊กอินพวก WP Super Cache, W3 Total Cache ครับ) แนะนำให้กดเคลียร์ Cache 1 รอบครับ

8. เสร็จเรียบร้อย ! o_ob

เท่านี้เว็บไซต์ของเราก็กลายเป็น HTTPS เรียบร้อยแล้วครับ ทำจริง ๆ ประมาณ 5 – 10 นาทีเท่านั้น (ไม่รวมเวลารอ Name Server อัพเดท และรอ SSL Certificate มานะครับ)

เทคนิคสำหรับเว็บไซต์ HTTPS ที่ติดโฆษณา

หากเว็บไซต์ของท่านขายพื้นที่โฆษณา แล้วติดแบนเนอร์ลูกค้า โดยปกติแล้วเว็บไซต์ที่เป็น HTTPS จะไม่มีการส่ง Referer (ค่าที่บอกปลายทางว่ามาจากเว็บไหน) ไปให้เว็บปลายทางที่เป็น HTTP ครับ เพราะฉะนั้นลูกค้าของเราจะ Track ไม่ได้ว่ามีคนคลิกแบนเนอร์มาจากเว็บเรากี่คน ซึ่งอาจจะทำให้ลูกค้ามองว่าเว็บเราลงโฆษณาแล้วไม่ได้ผลครับ

วิธีแก้ง่าย ๆ เลย คือ เพิ่มโค้ดด้านล่างลงไปใน <head> ของเว็บไซต์เราครับ:

<meta name="referrer" content="origin">

เท่านี้เว็บไซต์ HTTPS ของเราก็จะส่งค่า Referer ปกติแล้วครับ

ขอขอบคุณเทคนิคดี ๆ จากคุณ Sorrawut Kittikeereechaikun ครับ

อีกวิธีในการทำ HTTPS : ใช้ Let’s Encrypt

วิธีด้านบนง่ายและเร็วมาก แต่มีข้อเสียเล็กน้อยครับ เนื่องจากว่า Flexible SSL ของ Cloudflare เป็นการเอา HTTPS ของ Cloudflare ครอบเว็บไซต์เรา โดยที่เว็บไซต์เราจริง ๆ ยังเป็น HTTP อยู่ ทำให้ถ้าในอนาคตหากทำการปิด Cloudflare ไปชั่วคราว จะทำให้เว็บล่มไปครับ

อีกวิธีที่เป็น HTTPS ฟรีเหมือนกัน แต่เราได้ HTTPS จริง ๆ คือใช้ Let’s Encrypt ครับ โดยลองสอบถาม Hosting ที่ใช้บริการอยู่ได้เลยว่าเค้าสามารถทำ HTTPS ให้ได้มั้ย (เดี๋ยวนี้โฮสต์ดี ๆ ทำได้ทุกเจ้าแล้วครับ กดจาก DirectAdmin เองได้เลย หรือถ้าใครใช้พวก AWS, DigitalOcean ก็ลุยเองเลยครับ)

โดยสิ่งที่ต้องทำเพิ่มเติมเองก็เหมือนกับการใช้ Flexible SSL เลย นั่นคือ:

  1. แก้ resource ทั้งหมดที่โหลดด้วย HTTP ให้โหลดด้วย HTTPS (ในธีมบางครั้งมันใช้ HTTP ธรรมดา)
  2. (สำหรับ WordPress) เปลี่ยนเป็น HTTPS ใน Settings > General
  3. คนจะยังเข้า HTTP ธรรมดาได้อยู่ ถ้าเขาพิมพ์แบบนั้น เราต้อง Mod rewrite ให้ redirect ไป https (หรือกำหนด Page Rule แบบข้อ 6. ด้านบนก็ได้)
  4. Search & Replace ในฐานข้อมูลของเรา จาก http://yoursite ให้เป็น https://yoursite

ขอขอบคุณข้อมูลจากพี่เม่น Chakkrisn Menn Talawat และพี่รัตน์ Rath Panyowat เจ้าของบทความ สรุปเทคโนโลยีทุกอย่างสำหรับคนอยากมีเว็บ / แอพในปี 2016 ฉบับเข้าใจง่าย ๆ

แถมท้าย: โค้ด WordPress สำหรับแก้ปัญหา referer และปัญหาเลขแชร์ใน HTTPS หาย

ปัญหาหนึ่งที่พอเปิด HTTPS แล้วเจอเองกับตัว คือ เลขแชร์ของเครื่องมือต่าง ๆ เช่น Sumome หรือ Addthis กลายเป็น 0 หมดเลยครับ เลยเขียนโค้ดสำหรับใช้ในเว็บตัวเองขึ้นมาสำหรับแก้ปัญหา 2 อย่าง คือ:

  1. แก้ปัญหา referer หายจาก HTTPS
  2. แก้ปัญหาเลขแชร์หาย

สามารถนำโค้ดนี้ไปใช้ใน functions.php ของคุณเองได้เลยครับ (โค้ดนี้ผมใช้ Yoast SEO อยู่นะครับ)

// Add meta referer for HTTPS
function designil_meta_referer() {
  // ถ้าใส่ content="origin" จะส่ง referer ไปเฉพาะ domain name แต่ถ้า content="unsafe-url" จะส่ง URL เต็ม ๆ
?>
  <meta name="referrer" content="unsafe-url">
<?php }
add_action( 'wp_head', 'designil_meta_referer' );

// Restore share count

// ลบบรรทัดด้านล่างนี้ออกถ้าไม่ได้ใช้ Yoast SEO
add_filter( 'wpseo_canonical', '__return_false' );

add_action ( 'wp_head' , 'designil_rel_canonical' ) ;
function designil_rel_canonical() {
  global $wp;
  $current_url = home_url(add_query_arg(array(),$wp->request));
  $newurl = preg_replace('/^https:\/\//', 'http://', $current_url); ?>
  <link rel="canonical" href="<?php echo $newurl; ?>">
<?php }

ถ้าท่านใดมีคำแนะนำเพิ่มเติม หรือเจอปัญหาอะไรอยู่ สามารถมาพูดคุย สอบถามได้ในส่วน Comment ได้เลยคร้าบ :D

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด

One Response

  1. บทความดีมากครับ ขอสอบถามเพิ่มเติมครับ กรณีทำ SSL ด้วยวิธีนี้ ในบัญชีเราเอง สามารถทำกับหลายเว็บไซต์ได้ไหมครับ