Blogger SEO : เพิ่ม Breadcrumb ใน Blogger/Blogspot
 |
| ใส่ Breadcrumb ให้กับ Blogger/Blogspot |
ห่างหายกันไปนานกับการอัพเดท blog แต่ก็ไม่ได้ไปไหนครับ วนๆ เวียนๆ อยู่แถวๆ นี้ กับแอบไปหลงไหลกับเจ้า 3D Printing Technology สั่งเครื่องมาประกอบ สั่งเส้นพลาสติกมาพิมพ์ขึ้นงานดู แล้วก็แอบเขียน blog เล็กๆ เอาไว้ แต่ก็เช่นกันครับ ไม่ได้อัพเดทอะไรสักเท่าไหร่
มาวันนี้ก็ไม่มีอะไรมากครับ แค่อยากจะมาอัพเดทให้ทุกคนได้ลองทำกันดู เพราะว่าไปเจอเวปฯ หลายเวปฯ มากที่ทำ Navigator ให้กับเวปฯ ของเขา โดยใช้เทคนิคที่เรียกว่า "Breadcrumb" ที่ที่พบเห็นโดยมากหากไม่ใช้ Wordpress ก็จะเป็นสคริป์ที่เขียนขึ้นมา แต่ว่าเราๆ นี่ ใช้ Blogger หรือ Blogspot เป็นหลัก หากเราต้องการทำ Breadcrumb เราจะทำกันได้ไหม และทำอย่างไร?
What Breadcrumb will do on my blog?
ก่อนอื่น เราทุกคนคงอยากจะทราบซินะว่า เจ้า Breadcrumb นี่เขาเอาไว้ทำอะไร แล้วหากมีไว้ใน blog ของเรา มันจะเป็นอย่างไร ส่งผลอะไรให้กับ Blog ของเราบ้าง
การที่เราใส่ Breadcrumb เปรียบเสมือน หนูน้อยหมวกแดงโรยเศษขนมปังปังไว้ตามทางเพื่อให้กลับมาบ้านได้ถูก โดยที่ Breadcrumb จะอยู่ในรูปแบบของ การนำทางโดยตัวหนังสือ หรือที่เรียกกันว่า text-base navigation.
Breadcrumb จะแสดงให้คนที่เข้ามายัง blog ของเราทราบว่า ตอนนี้เขาอยู่ที่จุดไหนของ blog และข้อดีของการทำ breadcrumb ก็คือจะช่วยให้ผู้ที่เข้ามายัง blog ของเราไปยังหน้าอื่นๆ หรือโฟสอื่นๆของเราได้โดยง่าย
ลักษณะของการแสดง breadcrumb จะเป็นในรูปแบบง่ายๆ แบบนี้
--------------------------------------------------------------------------
Home > Label > Post Title
--------------------------------------------------------------------------
Home > Label > Post Title
--------------------------------------------------------------------------
ยกตัวอย่างจากโฟสนี้ (จะแสดง label ที่เยอะเป็นผลมาจากการใส่ label ของโฟสนั่นเอง) จะได้โฟสที่มี breadcrumb ในลักษณะนี้
 |
| ตัวอย่าง Breadcrumb ของ post นี้ |
SEO Benefits from Breadcrumb
นอกเหนือไปจากการที่เราช่วยให้ผู่ที่อยู่ใน blog ของเราได้ไปไหนมาไหนสะดวกแล้ว Breadcrumb ยังช่วยเราในเรื่องของ SEO โดยจะเป็นตัวช่วยให้ search engine ที่เข้ามา สามารถไต่ไปยังส่วนต่างๆของ blog เรา โดยเฉพาะไปตาม Label ที่เราสร้างไว้ โดย search engine จะมองเป็น text link ตัวหนึ่ง ที่เป็นเสมือน keywords ของ blog เรานั้นเอง ภาษาที่พวกเราชอบใช้กันคือ ทำให้ "บอทไต่" ไปได้ทั่วทั้ง blog ของเรานั้นเอง
How to add Breadcrumb to Blogger or Blogspot Post
การใส่ Breadcrumb ลงใน Blogger หรือ Blogspot ไม่ไช้เป็นเรื่องที่ยากลำบากนัก หลังจากที่ได้ลองค้นหาข้อมูลตาม blog และ/หรือ เวปของต่างประเทศ พร้อมทั้งลองผิดลองถูก เพื่อทดสอบผลลัพธ์ จึงสรุปเป็นขั้นตอนให้ทุกคนได้ทำตามอย่างง่ายๆ ได้ดังนี้
- Login เข้าสู่หน้า blog ของท่าน หากท่านยังไม่ได้ login
- ไปที่ Template
- ทำการสำรองข้อมูลของ Blog ไว้ก่อนทำการแก้ไข "สำคัญเป็นอย่างยิ่ง" หากเกดความผิดพลาดขึ้นมา ท่านจะได้เอาไฟล์สำรองมาทำการแก้ไข blog ให้กลับคืนมาได้ (หากท่านไม่ทราบว่าต้องทำอย่างไร ในการ Backup/Restore blog ของท่าน โฟสคอมเม้นท์ไว้นะครับ จะได้มาเขียนให้ทุกท่านได้ทราบอีกที)
- คลิกที่ Edit HTML เพื่อเข้าสู่หน้า Edit Template
- ค้นหา ข้อความนี้จาก HTML code โดยการกด Ctrl+F แล้วค้นหา <div class='blog-posts hfeed'> และ <data:defaultAdStart/>
- เมื่อพบแล้ว ให้ทำการก๊อปปี้ โค๊ดสีแดง ข้างล่างนี้ไปใส่ต่อจาก <div class='blog-posts hfeed'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/>
7. จากนั้นให้นำ code ต่อไปนี้ ไปวางไว้ก่อน <b:includable id='main' var='top'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>
8. จากนั้นทำการ Save Template เป็นอันเสร็จสิ้นวิธีการใส่ Breadcrumb ให้กับ Blogger / Blogspot ของเราเพื่อให้คนที่เข้าเวป และช่วยในเรื่อง SEO ของ blog เราครับ
หาท่านใดมีข้อสงสัยหรือต้องการให้ช่วยเหลือในด้านใด รบกวนช่วยโฟสไว้ในคอมเมนต์ หรือที่ facbook fanpage ของเรานะครับ ไว้พบกันใหม่ครับ
