แต่งบล็อก

เช็คความเร็วเว็บไซต์กับ Google PageSpeed

2014-12-24T04:22:00.001-08:00

เช็คความเร็วเว็บไซต์กับ Google PageSpeed

อีกหนึ่งบริการของ Google สำหรับ Webmaster ทั้งหลายที่ทำ SEO ที่น่าสนใจที่อยากแนะนำกันวันนี้คือบริการ เช็คความเร็วความถูกต้องในการทำงานของเว็บไซต์ด้วย Google PageSpeed Insights(https://developers.google.com/speed/pagespeed/insights)

Google PageSpeed บริการวัดความเร็วของเว็บไซต์ในการเข้าชมข้อมูล และ วิเคราะห์ข้อผิดพลาดต่างๆ แน่นอนว่าความเร็วในการเข้าเว็บไซต์ถือได้ว่าเป็นส่วนหนึ่งในการใช้ในการจัดอันดับการค้นหาของ Google เลยก็ว่าได้

และ มีความสำคัญที่ไม่ควรมองข้ามสำหรับนักทำ SEO เป็นอย่างมาก

หากใครที่ยังไม่เคยลองใช้ก็ลองเข้าได้ใช้งานได้ที่ : https://developers.google.com/speed/pagespeed/insights

[Template] : TubeMag Responsive

2014-11-08T02:06:00.000-08:00

TubeMag Responsive

TubeMag Responsive Blogger Template

Tube Mag is a Professional Responsive Video Blogger Template designed for video site, video blog video Portal. This theme will help you get a professional video site up and running quickly, it is inspired and support by the popular websites: YouTube, Vimeo and Dailymotion

Author : ThemeXpose - hxxp://themexpose.com
Similar Template : Sora Movies Blogger Template
Download Live Demo

[Template] : Sora Red Responsive

2014-11-08T01:41:00.002-08:00

[Template] : Sora Red Responsive

Sora Red Responsive Blogger Template

Sora Red is a blogger template with a awesome functional design that not only looks great but also performs exceptionally too. It is a responsive design; which means it can fit seamlessly into any screen size without any visual jerks.

Author : SoraTemplates

Similar Template : Engaged Blogger Template

Download Live Demo

[jQuery] - Content Spoiler การซ่อน/แสดงเนื้อหา บางส่วนใน Blogger ด้วยjQuery toggle

2014-10-16T05:07:00.004-07:00

วิธีสร้าง jQuery toggle เพื่อใช้ในการซ่อน/แสดงเนื้อหา

บทความนี้เป็น Trick ในการใช้จาวาสคริปต์มาทำให้ blog ของเรามีสไตล์มากขึ้นอีกหนึ่งบทความ โดยเราสามารถสร้าง หัวข้อของบทความ หรือหัวข้อที่ sidebar ที่ต้องการให้มีการซ่อน/แสดงเนื้อหาได้

การนำไปใช้ก็สามารถปรับเปลี่ยนได้ ขึ้นอยู่กับผู้อ่านเองนะครับ ว่าจะเอาเทคนิคที่นำเสนอนี้ไปใช้ในส่วนไหน ของบล็อก

วิธีติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

ขั้นที่ 1 เป็นการติดตั้ง CSS โค้ดทำโดย

ค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว

#toggle-view {list-style:none;font-family:arial;font-size:11px;margin:0;padding:0;width:250px;}
#toggle-view li {margin:10px;border-bottom:1px solid #ccc;position:relative;cursor:pointer;}
#toggle-view h3 {margin:0;font-size:14px;}
#toggle-view span {position:absolute;right:5px; top:0;color:#ccc;font-size:13px;}
#toggle-view p {margin:5px 0;display:none;}

หมายเหตุขั้นที่ 1: ความกว้าง 250 สามารถปรับให้เหมาะสมกับตำแหน่งที่ติดตั้งครับ

ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว จากนั้นบันทึกแม่แบบครับ

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

<script type="text/javascript">
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('p');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
});
});
</script>

หมายเหตุขั้นที่2 : ถ้าหากคุณเคยติดตั้ง jQuery 1.3.2 ไปใน templates แล้วก็ไม่ต้องติดตั้งซ้ำครับ ลบโค้ดบรรทัดบนทิ้งไปได้เลย

ขั้นที่ 3 เป็นการติดตั้ง HTML ซึ่งสามารถวาติดตั้งโค้ดต่อไปนี้ได้หลายวิธี เช่น

3.1 วางโค้ดลงไปในขณะเขียนบทความก็ได้

3.2 อาจจะใช้วิธี Add Gedget ชนิด HTML/Java script แล้ววางโค้ดต่อไปนี้ลงไปก็ได้เช่นกัน (ขึ้นอยู่กับความต้องการของคุณ)

โค้ด

<ul id="toggle-view">

<li>
<h3>ใส่หัวข้อหรือโค้ดรูปภาพที่ 1</h3>
<span>+</span>
<p>ข้อความหรือโค้ดรูปภาพที่ต้องการซ่อนแสดง</p>
</li>

<li>
<h3>ใส่หัวข้อหรือโค้ดรูปภาพที่ 2</h3>
<span>+</span>
<p>ข้อความหรือโค้ดรูปภาพที่ต้องการซ่อนแสดง</p>
</li>

<li>
<h3>ใส่หัวข้อหรือโค้ดรูปภาพที่ 3</h3>
<span>+</span>
<p>ข้อความหรือโค้ดรูปภาพที่ต้องการซ่อนแสดง</p>
</li>

</ul>

แก้โค้ดสีแดงและสีน้ำเงินแล้วติดตั้งลงไปก็จบขั้นตอนครับ
ที่มา : http://www.hackublog.com/2010/01/jquery-toggle.html

DEMO 1
+ แสดงข้อความ DEMO 1
DEMO 2
+ ลิ้ง แต่งบล็อก
DEMO 3
+

[jQuery] - featured slider hover Automatic post

2014-06-22T20:35:00.001-07:00

วันนี้ แต่งบล็อกขอนำ jquery featured slider สวยๆงามๆ มานำเสนอ
jquery featured slider สวยๆ จากเว็บ http://allmysteryworld.blogspot.com

โดยหลัการ เป็นการแสดงบทความ อัตโนมัติ จาก label หรือ ป้ายกำกับ

ขั้นตอนการติดตั้ง

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>

/*---------------------------------------------------------------------------------*/
/* /Features Slider - There are two featured slider in */
/*---------------------------------------------------------------------------------*/
#featuredContent {
background:#343434;
border:1px solid #3D3D3D;
float:left;
width:650px;
margin:5px 5px 5px 5px;
display:inline;
}
#featured-slider {
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 650px; /*width of featured content slider*/
height: 300px;
}
#featured-slider .sliderPostInfo { /* Post title and if enabled excerpt wrapper for featured slider */
position:absolute;
bottom:0px;
width:650px;
min-height:100px;
height: auto !important; /* IE6 Min height hack */
height: 100px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSoMYAbafpvacCc2nN6ED2XZWvsGCDK9nJvDpUJEPdOzhB02uCG3_zPmkzvipq3wZt0Kow5H4bx250F2RVkrN2N0gYNSIboPNvROhzvd7VLhGUXSrGLpQbZ6OAQWn4LPmQfdI_d-0Z_-I2/s1600/bgtransparent.png);
}
#featured-slider .sliderPostInfo p { /* Post excerpt style on featured slider */
color:#fff;
font-size:1.1em;
padding:3px 5px 5px 6px;
}
#featured-slider .contentdiv{ /* do not change the name of class - The size of contentdiv is 495x270 (after excluding padding value) */
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
z-index:1;
}
#paginate-featured-slider{ /* do not change the name of class - used to wrap thumbnails for featured area */
display:block;
padding:0 0 5px 10px;
margin-bottom:10px;
}
#paginate-featured-slider ul {
width:620px;
padding-bottom:0;
list-style: none;
}
#paginate-featured-slider ul li {
display: inline;
width:75px;
float:left;
margin-left:0;
padding:0 0 0 0;
margin-right:9px;
margin-bottom:3px;
}
#paginate-featured-slider img{
padding-top:5px;
background: #343434;
}
#paginate-featured-slider a img{
border-top:4px solid #fff;
box-shadow: 2px 2px 2px #211c18;
}
#paginate-featured-slider a:hover img, #paginate-featured-slider a.selected img{
border-top:4px solid #cd1713;
box-shadow: 5px 5px 5px #211c18;
}
/* // Features Slider */
.featuredPost2 { /*Posts displayed below the featured section */
padding-top:5px;
padding-bottom:5px;
}
.featuredPost2Meta {
clear:both;
display:block;
font-style:italic;
font-size:.8em;
padding-top:3px;
padding-bottom:5px;
border-bottom:1px solid #efefef;
}
.featuredPost2Meta a{
color:#CB6F00;
}
.featuredPost2Meta a:hover {
text-decoration:underline;
}
.featuredTitle a { color:#CB6F00; margin-left: 10px ; line-height:1.25; font-family:Arial,serif; font-size:18px; font-weight:bold; }
.featuredTitle a:hover { color:#CB6F00; }

ขั้นที่ 2 ติดตั้ง Javascript (jQuery)

ให้คุณค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด </head>

<script src='https://sites.google.com/site/siani3d99/home/code/jquery-v1.7.1.js' type='text/javascript'/>
<script src='https://sites.google.com/site/siani3d99/home/code/jquery-hover-effect.js'/>

<script src='https://sites.google.com/site/siani3d99/home/code/template-jCarouselLite.js' type='text/javascript'/>
<script src='https://sites.google.com/site/siani3d99/home/code/template-jqueryslidemenu.js' type='text/javascript'/>
<script src='https://sites.google.com/site/siani3d99/home/code/template-contentslider.js'/>

<script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts8 = 7;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showsliderA(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts8; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="650" height="300" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);

j++;
}
}
function showsliderB(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts8; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);

j++;
}
}
</script>

ขั้นที่ 3 ติดตั้ง HTML ตำแหน่ง slideshow ที่ต้องการแสดง

โดยแก้ไขา่วนของ label (ป้ายกำกับของบทความที่จะแสดง)

<div id='featuredContent'>
<div class="sliderwrapper" id="featured-slider">
<script>
document.write("<script src=\"/feeds/posts/default/-/label?max-results="+numposts8+"&orderby=published&alt=json-in-script&callback=showsliderA\"><\/script>");
</script>
</div>
<div id="paginate-featured-slider">
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/label?max-results="+numposts8+"&orderby=published&alt=json-in-script&callback=showsliderB\"><\/script>");
</script>
</ul>
<div class="clear"/>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>


</div>

ตัวอย่าง

jquery featured slider hover Automatic post

[SEO] - วิธีทำให้ผลเสิร์ชเว็บใน Google โชว์ภาพหน้าของเรา (Google Authorship)

2014-06-04T21:17:00.000-07:00

ผลเสิร์ชของกูเกิลมีผลต่อการเข้าเยี่ยมชมเว็บมากๆ อย่างเว็บ MacThai เองมีคนเข้าโดยการเสิร์ชข้อมูลจาก Google มากกว่า 50% เพราะงั้นนอกจากการปรับเรื่อง SEO ให้ดีแล้ว ยังมีหลายเทคนิคที่ช่วยให้กูเกิลแสดงผลเว็บเราได้ดียิ่งขึ้น

รู้จักกับ GOOGLE AUTHORSHIP

Google Authorship เป็นหนึ่งในฟีเจอร์ที่หลายคนไม่รู้จัก แต่มีผลมากกับการเสิร์ชเข้ามาที่เว็บ เพราะกูเกิลจะแสดงผลรูป Profile ของเราหน้าผลของการเสิร์ช

หลายเว็บอาจจะมองว่าทำไมต้องแสดงหน้าคนเขียนหน้าผลการเสิร์ชด้วย (ฟะ) แต่สำหรับกลุ่ม Blogger หรือเว็บที่เน้นเนื้อหา Content เป็นหลัก การแสดงหน้าคนเขียนมีความสำคัญโคตรๆ

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

ก่อนทำ จะเห็นว่าไม่มีรูปหน้าเราในผลเสิร์ชกูเกิลนะจ๊ะ

ขั้นตอนการติดตั้งและเริ่มใช้ GOOGLE AUTHORSHIP

Google เขียนวิธีการใช้งานไว้ค่อนข้างละเอียดในเว็บ Google Authorship สำหรับในบล็อกนี้จะขอแนะนำสำหรับคนที่ใช้ WordPress เป็นหลักนะจ๊ะ (MacThai ก็ใช้ Wordpress)

สมัคร Google+ ก่อน (แหม่ มัดมือชกจริงๆ) ถ้าใครเป็นในนามบุคคลก็สมัครแบบปกติ แต่ถ้าเป็นในนามบริษัทก็สมัครแบบ Page ได้
รูปที่จะโชว์ในผลเสิร์ช Google จะใช้รูป Profile ใน Google+ เรานะจ๊ะ เลือกรูปดีๆ ก่อนเริ่มใช้งาน

WordPress

ไปที่หน้า Admin ใน Wordpress ของเรา
ไปที่ User -> เลือก Username ของเรา
เพิ่มข้อมูลใน Contact Info ใส่ Google+ URL เป็น Link ของหน้า Google+ Profile ที่เราใช้อยู่
ถ้า Wordpress ใครไม่มีช่องให้ใส่ Google+ URL ลองอัพเดทเป็นเวอร์ชันล่าสุด หรือลง Plugin เพิ่ม

Google+ Profile

ไปที่หน้า Google+ Profile
ไปที่ส่วนของ About
เลื่อนลงมา หาช่วง Links เจอแล้วกดเข้าไป Edit

หาช่อง Contribute to ในช่องนี้ให้ใส่ชื่อเว็บของเราลงไป กด "Add custom link"
ช่อง Label ใส่ชื่อเว็บของเรา เช่น MacThai
ช่อง URL ใส่เว็บของเรา

ตรอจสอบ

เนื่องจาก Google ต้องใช้เวลาพอสมควรในการอัพเดทหน้าเว็บให้มีรูปของเราโผล่ออกมา จากการทดสอบผมรอเกือบ 2 สัปดาห์แหน่ะ
เพราะงั้นเราจะรู้ได้ยังไงว่า Google Authorship ใช้ได้จริง Google ก็ทำหน้า Structured Data Testing Tool ไว้ให้เราตรวจสอบได้
ใส่หน้าเว็บของเรา หรือหน้าบล็อกที่เราเขียน ลองกดปุ่ม Preview
หน้าด้านล่างโชว์หน้าเว็บเรา พร้อมกับรูปหน้า Profile ของเรา ก็ถือว่าใช้ได้ละจ้า

มีรูปขึ้นมาแล้ว เย่ๆ

หลังจากที่ทดสอบดูแล้วก็ใช้งานได้ง่ายดี ไม่ต้องทำอะไรมาก การแสดงรูปเราบนหน้าเสิร์ชของกูเกิลก็กิ๊บเก๋ยูเรก้า แต่ Google ก็ค่อยๆ อัพเดทให้นะ เท่าที่ทดสอบ บางหน้าก็มีรูปเราอย่างเร็ว บางหน้าก็ช้าหน่อย

บางอันก็มีรูป บางอันก็ไม่มีรูปนะจ๊ะ

ผลจากการทดสอบ พบว่าผลของการคลิ๊กเข้าเว็บเพิ่ม 1-1.5% เลยยังพิสูจน์ไม่ได้ว่าเกิดจากการทำ Google Authorship จริงรึเปล่า แต่อาจจะเพราะเว็บอย่าง MacThai มีนักเขียนหลายคน เดี๋ยวจะค่อยๆ แจ้งให้นักเขียนท่านอื่นลองเข้าโปรแกรม Google Authorship ดู

แต่จำนวนคน Follow ใน Google+ เพิ่มขึ้นเร็วกว่าปกติ 1.5 เท่าได้ ก็น่าสนใจดีเหมือนกัน คนทำเว็บหรือบล็อกเกอร์ลองทำดูจ้า

hxxp://www.macthai.com/

ทดสอบ Sticky Tooltip script

2014-06-02T02:26:00.001-07:00

http://wparena.com/how-to/useful-tooltips-tutorials-and-jquery-plugins/
http://www.w3avenue.com/2009/12/01/jquery-sticky-tooltip-script/

Thailand
Download

Vancouver
Vancouver
Vancouver
Vancouver
Vancouver
Vancouver
Vancouver

[jQuery] - สร้าง bubble popup ด้วย CSS3

2014-05-31T11:25:00.002-07:00

bubble popup คือฟองป๊อปอัพ ที่เด้งขึ้นมาเมื่อเรานำเมาส์ไปวางบน ข้อความหรือรูปภาพที่เรากำหนด
ซึ่งภายใน bubble popup อาจมีรายละเอียดสินค้า หรือ ไตเติ้ล หรือรายละเอียดอื่นๆ
ซึ่งสามารถสร้างดึงดูด และสนใจ ให้ให้กับเว็ปเรามากยิ่งขึ้น

สำหรับ bubble popup แต่งบล็อก ขอนำเสนอ หลักการง่ายๆ จากโค้ด CSS3
ไม่ยุ่งยากใช้งานง่าย แต่สร้างความน่าสนใจให้กับเว็ปไม่น้อยเลยทีเดียว

ขั้นตอนการติดตั้ง bubble popup css3

ขั้นที่ 1 ติดตั้ง CSS

ให้นำโค้ด ไปวางตาม ใน post html หรืออาจจะวางใน Gadget html ก็ได้ครับ

<style type="text/css">
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
</style>

ขั้นที่ 2 ติดตั้ง HTML

ให้นำโค้ด ไปวางตาม ใน post html หรืออาจจะวางใน Gadget html ก็ได้ครับ หลัง CSS ข้อ1

<a href="
url" title="ข้อความที่แสดง" class="tooltip"> <span title="More"><span title="More">ข้อความลิงค์</span> </a>

ตัวอย่าง

[jQuery] - แบบเจ๋งๆ Hover Responsive Portfolio Gallery with Jquery

2014-05-30T00:20:00.003-07:00

วันนี้ แต่งบล็อก เสนอ jQuery slide thumbnail แบบเจ๋งๆอีกเช่นเคย โดดเด่นสวยงาม thumbnail title ของแต่ละรูปภาพ จะเลื่อนไปตามการเคลื่อนไหวของเมาส์ เมื่อคุณเลื่อนเมาส์เข้า หรือเลื่อนเมาส์ออก

ด้วยหลักการทำงานของ CSS3 และ jQuery จึงเกิดการ Slide ที่สวยงาม สร้างที่น่าสนใจแก่เว็บไซต์ของคุณมากยิ่งขึ้น

ขั้นตอนการติดตั้ง Responsive Portfolio Gallery with Jquery

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>

/* Portolio Hover */
.da-thumbs li ,
.da-thumbs li img {
display: block;
position: relative;
}
.da-thumbs li {
overflow: hidden;
}
.da-thumbs li article {
position: absolute;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Wcw4IoKlVvNka2PcGkDvw_ZgToPzMPbFiV7W-3pz_toY9TI-hio8JScauUN56X3oYIKqAsuTlDulumt5BRPi39b1APqAx1Lw6vDYy-Ynxr84rbdnyY0qJ_nGj1hnYR0-FcMJE3PlR299/s1600/image_hover.png);
background-repeat:repeat;
width: 100%;
height: 100%;
}
.da-thumbs li article.da-animate {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* Initial state classes: */
.da-slideFromTop {
left: 0px;
top: -100%;
}
.da-slideFromBottom {
left: 0px;
top: 100%;
}
.da-slideFromLeft {
top: 0px;
left: -100%;
}
.da-slideFromRight {
top: 0px;
left: 100%;
}
/* Final state classes: */
.da-slideTop {
top: 0px;
}
.da-slideLeft {
left: 0px;
}
.da-thumbs li article a {
color:#fff;
padding:20px;
display:block;
}
.da-thumbs {
text-align:center;
}
.da-thumbs li article h3{
color:#fff;
padding-top:30px;
}
.post-outer h3:hover {}
.da-thumbs li article em{
margin-bottom:10px;
color:#fff;
display:block;
}
.da-thumbs li article span{
display:inline-block;
}
span.link_post{
display:block;
width:35px;
height:35px;
background-color:#DF6232;
border-radius:50px;
cursor:pointer;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnxQVlHK28PcoQPsDJd2dbIjCEI0cIDzOukRhcFVYWpqvFpBSnJgLb1hFC0vbIpTPuITEGwdYpuHiQjIbuYo1eL6Tb_XoMgdcAdTOE6Usk_MjN7AxiAwmFVKqLQm3xbcOBewvFc8S5LvO/s1600/link_post_icon.png);
background-repeat:no-repeat;
background-position:center;
margin-right:10px;
}
span.zoom{
overflow:hidden;
display:block;
width:35px;
height:35px;
background-color:#DF6232;
border-radius:50px;
cursor:pointer;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-H56DcNSPGgsxhO4_EMLr9c2_44A8NTN2c33wpNCeLjBeigqBPQacc0tWSD4q2uljT9biZi-PYcLk_tiZYWDcDDhaG44YJFVnkWBIHbm_EwOMOHAXgdsutK2VnW91u7WQWD-7wi-Nfsk/s1600/zoom_icon.png);
background-repeat:no-repeat;
background-position:center;
margin-left:10px;
}
.portfolio_2col article h3{
padding-top:70px !important;
}
/* Image Grid */
.image_grid {
float:left;
overflow:hidden;
width:700px;
position:relative;
}
.image_grid li{
float: left;
line-height: 17px;
color: #686f74;
list-style:none;
overflow:hidden;
margin-bottom:23px;
margin-right:23px;
text-align:center;
}

/* Responsive image grid*/
/* Mobile landscape width 320 */
@media only screen and (max-width: 767px) {
.image_grid{
width:300px;
}
.image_grid li img{
width:220px;
}
.portfolio_4col .da-thumbs li article h3{
padding-top:70px;
}
.portfolio_3col .da-thumbs li article h3{
padding-top:50px;
}
.portfolio_2col .da-thumbs li article h3{
padding-top:53px !important;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
.image_grid{
width:450px;
}
.image_grid li{
width:178px !important;
}
.portfolio_4col .da-thumbs li article h3{
padding-top:58px;
}
.portfolio_3col .da-thumbs li article h3{
padding-top:34px;
}
.portfolio_2col .da-thumbs li article h3{
padding-top:23px !important;
}
}

ขั้นที่ 2 ติดตั้ง Javascript (jQuery)

ให้คุณค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด</head>

<script src="https://sites.google.com/site/siani3d99/home/code/jquery-v1.7.1.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/siani3d99/home/code/jquery-hover-effect.js"></script>

ขั้นที่ 3 ติดตั้ง Javascript เรียกใช้งาน jQuery

ให้คุณค้นหาโค้ด </body> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด </body>

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery(function() {
jQuery('ul.da-thumbs > li').hoverdir();
});
});
</script>

จากนั้นก็บันทึกเทมเพลต

ขั้นที่ 4 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

ให้นำโค้ด ไปวางตามตำแหน่งที่ต้องการ หรืออาจจะวางใน Gadget html ก็ได้ครับ

โดยแก้ไข src= url url รูปภาพ <h3> ไตเติ้ล <em>รายละเอียด href= url

<div class="freshdesignweb">
<div class="image_grid portfolio_4col">
<ul class="portfolio_list da-thumbs" id="list" style="height: 495px;">
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio1.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
New Year 2013</h3>
<em>Happy</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio1.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio2.jpg" />
<article class="da-animate da-slideFromTop" style="display: block;">
<h3>
lifestyle</h3>
<em>auctor</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio2.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio3.jpg" />
<article class="da-animate da-slideFromLeft" style="display: block;">
<h3>
Models</h3>
<em>ipsum</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio3.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio4.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Fashion</h3>
<em>China</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio4.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio5.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>lobortis</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio5.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio6.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>elementum</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio6.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio7.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>risus</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio7.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio8.jpg" />
<article class="da-animate da-slideFromLeft" style="display: block;">
<h3>
Asean life</h3>
<em>arcu</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio8.jpg"></a></span>
</article>
</li>
<li>
<img alt="img" src="http://www.jqueryscript.net/demo/Responsive-Portfolio-Gallery-with-Jquery/images/portfolio7.jpg" />
<article class="da-animate da-slideFromRight" style="display: block;">
<h3>
Asean life</h3>
<em>risus</em>
<span class="link_post"><a href="http://www.freshdesignweb.com/responsive-portfolio-gallery-with-jquery-tutorial.html"></a></span>
<span class="zoom"><a href="https://www.blogger.com/images/portfolio7.jpg"></a></span>
</article>
</li>
</ul>
</div>
</div>

ตัวอย่าง

New Year 2013
Happy
lifestyle
auctor
Models
ipsum
Fashion
China
Asean life
lobortis
Asean life
elementum
Asean life
risus
Asean life
arcu
Asean life
risus

[SEO] - รู้ทำความรู้จักกับ meta tag และติดตั้งลงใน blogger

2014-05-29T20:41:00.000-07:00

Q : Meta tag คืออะไร ?

Metadata Elements Tag หรือ Meta Tag คือ ส่วนของซอร์สโค๊ดที่อยู่ใน Head (ส่วนหัว) ของเอกสาร HTML โดยปกติเมื่อเราเปิดหน้าเว็บไซต์หนึ่ง ๆ ขึ้นมา ส่วนของ Head จะถูกประมวลผลก่อน ดังนั้น Meta Tag จึงเป็นส่วนที่บอกคุณลักษณะของเว็บนั้น ๆ ว่าเป็นเว็บเกี่ยวกับอะไร แสดงผลด้วยภาษาอะไร ใครเป็นผู้เขียน มีคำค้นที่ใช้ว่าอะไร เป็นต้น

ถ้าให้ผมเปรียบเทียบง่ายๆ Meta tag ก็เหมือนกับป้ายหน้าร้าน ที่จะสื่อได้ว่าร้านเราขายอะไร? มีสินค้าหลัก ๆ อะไรบ้าง คนซื้อจะได้ตัดสินใจได้ว่า จะเข้าหรือไม่เข้าร้านของเรา

Q : Meta tag สำคัญอย่างไร ?

Meta Tag เป็นการกำหนด หัวเรื่อง คำ การบรรยายถึงรายละเอียดหน้า บล็อก/เว็บไซต์นั้น ของเรา เมื่อมีการค้นหา จาก search engine ต่างๆ เช่นใน google จะนำข้อความใน Tag Description ไปแสดงผลในการค้นหา ซึ่งถ้าเราใส่ Meta tag ให้ถูกวิธี บล็อก/เว็บของเราก็จะติดอันดับการค้นหาเป็นอันดับต้นๆ ได้ไม่ยาก

Q : จำเป็นต้องใส่ Meta tag หรือไม่ ?

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

Q : Meta tag มีกี่ชนิด ?

มีหลายชนิดครับ ผมคงจะเลือกอธิบายเฉพาะที่สำคัญ และยังใช้ได้ในปัจจุบัน ดังนี้ครับ

Title Element - Page Titles (มีผลกับการทำ SEO มาก)

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

<title>แต่งบล็อก</title>

Meta Description Tag (มีผลกับการทำ SEO ปานกลาง)

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

รูปแบบ

<META NAME='DESCRIPTION' CONTENT='ใส่เนื้อหาเกี่ยวกับเว็บไซต์'/>

ตัวอย่าง

<meta name='description' content='widgets, hacks, help, tips and tricks for bloggers' />

Meta Keywords Tag (มีผลกับการทำ SEO ปานกลาง)

ใช้สำหรับระบุคำค้น ที่สามารถเข้ากันได้กับเนื้อหาในหน้าเว็บนั้น ๆ สามารถใส่ได้หลายคำ และแบ่งคำโดยใช้เครื่องหมายจุลภาค “,”

รูปแบบ

<META NAME='KEYWORDS' CONTENT='ใส่คำสำคัญ'/>

ตัวอย่าง

<meta name='keywords' content= 'Blogger template, tutorial, hacks, blogger tutorial, blogger tips, blogger tricks, blogger tips and tricks' />

Meta author Tag (มีผลกับการทำ SEO น้อย)

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

รูปแแบบ

<META NAME='AUTHOR' CONTENT='ใส่ชื่อ'/>

ตัวอย่าง

<meta name='author' content='ฺBloggerTips' />

Meta copyright Tag (มีผลกับการทำ SEO น้อย)

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

รูปแแบบ

<META NAME= 'COPYRIGHT' CONTENT='ใส่พวกชื่อบริษัทแสดงความเป็นเจ้าของเว็บ' />

ตัวอย่าง

<meta name='author' content='สงวนลิขสิทธิ์โดย แต่งบล็อก' />

Meta Language Tag (มีผลกับการทำ SEO มาก)

ใช้สำหรับระบุว่า หน้าเว็บไซต์นั้น ๆ มีเนื้อหาเป็นภาษาอะไร เช่น

<meta http-equiv='content-language' content='th' />

Meta Content Type Tag (มีผลกับการทำ SEO มาก)

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

<meta http-equiv='content-type' content='text/html; charset=UTF-8?' />

Meta Revisit-After Tag (มีผลกับการทำ SEO ปานกลาง)

ใช้สำหรับบอกกับ Robot ของ Search Engine ว่า ให้มาเก็บข้อมูลอีกครั้งในอีกกี่วันข้างหน้า เช่น

<meta name='revisit-after' content='7 days' />

Meta Robots Tag (มีผลกับการทำ SEO มาก)

ใช้สำหรับบอก Robot ของ Search Engine ว่าให้ Robot เก็บข้อมูลในหน้านั้นไป Indexs หรือไม่ หรือ ให้ Robot เดินทางไปตาม Links ที่ปรากฎในหน้านั้น ๆ หรือไม่ ค่าต่างๆ ของ meta ชนิดนี้ได้แก่

'all' คือ การกำหนดค่าให้สามารถจัดทำดรรชนีคำในเนื้อหาได้ทุกหน้าที่มีการเชื่อมโยงถึง เพื่อนำไปจัดเก็บบันทึกลงฐานข้อมูล Search Engine

'noindex' คือ การกำหนดไม่ให้จัดทำดรรชนีคำในเนื้อหาสำหรับหน้าที่กำหนดไว้ แต่ให้ตามส่วนที่เชื่อมโยงได้และนำเนื้อหาไปจัดทำดรรชนีได้ ไปลงฐานข้อมูล Search Engine

'nofollow' คือ การกำหนดให้จัดทำดรรชนีคำในเนื้อหา ในหน้าที่ปรากฏได้ แต่ไม่ให้ตามส่วนที่เชื่อมโยงเพื่อจัดทำดรรชนีคำในเนื้อหา นำไปลงฐานข้อมูล

'none' คือ การห้ามไม่ให้ spider จัดเก็บเว็บเพจที่ปรากฏไปทำดรรชนีเนื้อหา และ ห้ามตามส่วนเชื่อมโยงเพื่อทำดรรชนีในเนื้อหาด้วยเช่นกัน ตัวอย่างการนำไปใช้งาน

ตัวอย่าง

<meta name='robots' content='index, follow' />

Meta Distribution Tag เป็น Tag (มีผลกับการทำ SEO มาก)

ใช้สำหรับแจ้งระดับการเผยแพร่ ความครอบคลุมของเว็บไซต์ โดยระดับการเผยแพร่มีระดับดังนี้ Global, local, internal use

Global คือ ต้องการเผยแพร่บุคคลทั่วไปทั่วโลก

Local คือ ต้องการเผยแพร่บุคคลภายในประเทศ

internal use(lu) คือ ไม่ต้องเผยแพร่ทั่วไป

รูปแบบ

<META name='Distribution' content='ระดับการเผยแพร่' />

ตัวอย่าง

<META name='Distribution' content='Global' />

Q : จะใส่ Meta tag ให้ blogger อย่างไร ?

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

ค้นหาโค้ด

<b:include data='blog' name='all-head-content'/>

แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว

<meta name="keywords" content="Blogger, Google Blogger, Blogger template, tutorial, hacks, blogger tutorial, blogger tips, blogger tricks, blogger tips and tricks" />
<meta name="description" content="widgets, hacks, help, tips and tricks for bloggers" />
<meta name="author" content="ฺBloggerTips" />
<meta name="robots" content="all" />

เปลี่ยน content ในส่วน keyword , content ในส่วน description และ author content ให้เป็นคำที่สัมพันธ์กับบล็อก /เว็บไซต์ของคุณ และบันทึกแม่แบบครับ

คำเตือน ! กรุณาอย่า spam keyword และ content (ใส่ข้อความซ้ำๆ) ใน meta tag เพราะอาจจะทำให้ถูกแบนได้ แทนที่จะติดอันดับการค้นหาอาจจะกลายเป็นค้นหาไม่เจอก็ได้นะครับ

ที่มา:hxxp://www.hackublog.com/2010/01/meta-tag-blogger.html
อ้างอิง : seoconsultants

[Template] : X10 Masonry Red

2014-05-25T23:49:00.001-07:00

Template X10 Masonry Red
X10 Masonry Red is a free blogger template with 2 columns, left sidebar, gallery-styled, perfect for photologs, exclusive design for Blogger, posts thumbnails and threaded comments ready.

DEMO DOWNLOAD

[Template] : Modern Mag Responsive

2014-05-21T01:20:00.000-07:00

Modern Mag Responsive Blogger Template

Modern Mag is a good new solution for news, magazine or personal blogs. Modern Mag Blogger Template is a new magazine style responsive design theme that is ideally beautiful for all niche. It is a perfect choice for newspapers, editorial, multimedia and other blogs

hxxp://templateism.com

LIVE DEMO DOWNLOAD THEME

วิธีทำ On-Page SEO อย่างไรถึงจะเรียกว่าสมบูรณ์แบบ

2014-05-20T21:46:00.001-07:00

เนื้อหาของบทความนี้เป็นมุมมองของ Brian Dean (จากเว็บ backlinko.com) ที่มีต่อแนวคิดพื้นฐาน 12 ข้อของ On-page SEO Factor สามารถดูรายละเอียดของ Onpage SEO Factor แบบ Info Graphic (ที่นี่ครับ) ส่วนบทความต้นฉบับอ่านได้ได้ที่ On-Page SEO: Anatomy of a Perfectly Optimized Page

Factor 1. การมี Keyword ใน URLs (SEO Urls Friendly)

URLs ไม่ควรยาวมากจนเกินไปและมี Keyword ที่เกี่ยวข้องกับบทความรวมอยู่ด้วย ตัวอย่างของ URL ที่ดีและไม่ดี

ดี => www.backlinko.com/on-page-seo-is-so-amazing-omg-its-the-best
ไม่ดี => www.backlinko.com/p=123

Keyword ควรใส่ไว้ในจุด 3-5 คำแรกของ URL จะดีที่สุด อ้างอิงตามบทสัมภาษณ์ของ Matt Cutt (Google has stated)

มุมมองของ Brian Dean : จากการทดสอบของ backlinko.com เห็นด้วยกับการใช้ Keyword Rich ใน URls ครับ

Factor 2. การเริ่ม Title ของบทความด้วยคีเวิดที่เป็นเป้าหมายในการทำอันดับบนผลการค้นหา (Start Title With Keyword)

Moz.com ได้ทำการทดลองในเรื่องนี้ และ พบว่าการที่เราเริ่มต้นบทความด้วยคีเวิดเป้าหมาย จะส่งผลต่ออันดับบนผลการค้นหา

มุมมองของ Brian Dean : เห็นด้วยกับการใช้ Keyword ในส่วนเริ่มต้นของชื่อบทความ (ในกรณีที่สามรถทำได้) เพื่อผลด้าน SEO เพราะมีผลการทดสอบของเว็บไซต์ของที่รองรับความเชื่อนี้ครับ

Factor 3 การมีสื่อ Multimedia ในเนื้อหา

Multimedia หมายถึงสื่อหลากหลายรูปแบบ เช่น รูปภาพ , Video , ตาราง , Diagram ต่างๆ ซึ่งทั้งหมดนี้ สามารถช่วยเพิ่มความน่าสนใจของเนื้อหา ช่วยลดอัตราการปิดเว็บทิ้ง (bounce rate) ของ User และ เพิ่มเวลาที่คนอยู่ในหน้าเว็บไซต์ของเรา (time on site) ซึ่งเป็น 2 ปัจจัยด้าน user interaction-based ที่ Google ใช้ในการจัดอันดับบนผลการค้นหา

มุมมองของ Brian Dean : เค้าเห็นด้วยกับเรื่องนี้มากๆ เพราะการมีส่วนประกอบอื่นๆ ที่ช่วยเพิ่มคุณภาพหรือความน่าสนใจในเนื้อหา มันตรงตามวัตถุประสงค์ของการทำเว็บไซต์เพื่อผู้ใช้งานอยู่แล้ว นอกจากจะส่งผลดีต่อการทำ Ranking (user interaction-based factor) แล้ว มันยังเป็นการเพิ่มคุณค่าให้กับเว็บไซต์และเนื้อหาของเราด้วย

Factor 4. การทำ Links ออกจากเนื้อหา

การทำลิงค์ออกจากเนื้อหาไปยังหน้าเพจที่เกี่ยวข้องกันเป็นอีก 1 ปัจจัยที่ช่วยให้ Google เข้าใจเนื้อหาในเพจของเรา และในการทดสอบผลลัพธ์ของการทำลิงค์ออกไปยังหน้าเพจที่เป็น Authority Site ช่วยให้อันดับในผลการค้นหาในคีเวิดที่เกี่ยวข้องกับเพจดีขึ้น

มุมมองของ Brian Dean : สำหรับ Brian ปกติแล้วทุกๆ 1000 Word ของเนื้อหาที่เขียนในเว็บไซต์จะมี 2-4 Link ออกจากเนื้อหา ซึ่งจะลิงค์ำไปยัง Authority Site หรือ เนื้อหาที่เกี่ยวข้องภายใยเว็บไซต์ของตนเองเท่านั้น มีข้อควรระวังเรื่องการทำลิงค์ คือ ต้องระวังการทำลิงค์ที่จะส่งผลต่ออันดับของคีเวิดเป้าหมายของเรา (อย่ายิงลิงค์ไปยังเว็บไซต์อื่น ด้วยคีเวิดที่เราต้องการจะทำอันดับ แล้วโดนเว็บที่เราส่งลิงค์ไปให้แซงขึ้นมาอยู่อันดับสูงกว่า)

Factor 5. การใช้ Keyword ในส่วน 100 คำแรกของเนื้อหา

มุมมองของ Brian Dean : สำหรับ Brian แล้วเค้าแนำนำความเป็นธรรมชาติของการใส่คีเวิดในเนื้อหาช่วงแรกครับ เพราะมันมีสิ่งสำคัญญิงกว่า SEO คือ ความพึงพอใจของ User ช่วงพารากราฟแรกจึงเป็นสิ่งสำคัญมากๆ เพราะคนจะอ่านบทความนี้หรือจะปิดหน้าเว็บทิ้งไป ก็ขึ้นอยู่กับส่วนนี้ครับ ดังนั้นใส่ Keyword ได้แค่ต้องทำให้เป็นธรรมชาติและเขียนให้น่าสนใจที่จะอ่านต่อ

Factor 6 ใช้ Title ของบทความเป็น H1

H1 เป็น headline tag ที่บอกกับ Search Engine ว่าบทความหรือเนื้อหาในหน้านี้เกี่ยวข้องกับเรื่องอะไร

มุมมองของ Brian Dean : H1 เป็นจุดสำคัญมากสำหรับการตรวจสอบให้แน่ใจว่า หัวข้อบทความของคุณเป็น H1 Tag เพียง 1 จุดเท่านั้น ยกเว้นในกรณีที่เว็บไซต์ของคุณเป็น HTML5 ซึ่งสามารถมี H1 ในหน้าได้มากกว่า 1 จุด

7. ความเร็วในการเปิดหน้าเว็บไซต์มีผลต่ออันดับบนผลการค้นหา

Page loading speed เป็น 1 ในปัจจัยที่ Google ใช้ในการจัดอันดับผลการค้นหา ซึ่งสามารถใช้ CDN หรือ การลดขนาดของรูปภาพต่างๆ ในหน้าเว็บให้มีขนาดลดลง ซึ่งมีการทดลองจาก MunchWeb ที่พบว่าถ้าหากหน้าเว็บโหลดนานกว่า 4 วินาที 75% ของคนจะปิดเว็บไซต์ออกไปทันที ( bounce rate เพิ่มขึ้น)

มุมมองของ Brian Dean : ความเร็วของเว็บไซต์เป็นปัจจัยที่สำคัญมากสำหรับ Google Algorithm ในปัจจุบัน แต่การที่จะอาศัยแค่ Cache Plugin หรือ CDN นั้นยังไม่เพียงพอ วิธีที่ดีที่สุด คือการย้ายเว็บไซต์ไปยัง Web Hosting ที่มีคุณภาพดีกว่า ซึ่งราคาจะเพิ่มสูงขึ้นกว่าเดิม คนส่วนใหญ่นิยมใช้ Budget Web Hosting เช่น Hostgator หรือ Shared Hosting ต่างๆ ซึ่งไม่มีประสิทธิภาพด้านความเร็ว ซึ่งปัจจุบันเว็บไซต์ Backlinko.com ใช้ Premium Web Hosting ของเจ้านี้อยู่ครับ

8. การใช่ วันที่ หรือ คำประเภทที่ช่วยเพิ่มความน่าสนใจของ Title

เช่น การใส่ปี “2014″, หรือคำว่า “best”, “guide”, and “review” สามาร่วยในการทำอันดับ สำหรับLongtail Keyword ที่เกี่ยวข้องกับ คีเวิดเป้าหมายของเนื้อหาได้ (target keyword)

มุมมองของ Brian Dean : วิธีนี้ถือเป็นเป็นเทคนิคที่ดีเลยในการเพิ่มขอบเขตของผลการค้นหาที่สามารถเป็นไปได้ของบทความ ตัวอย่างเช่น ชื่อบทความนี้ “On-Page SEO: Anatomy of a Perfectly Optimized Page” ด้วยวิธีง่ายๆ นี้คุณสามารถเพิ่มความน่าวนใจของบทความ เพิ่มอัตราการคลิก ให้กับบทความได้

9. การใช้ปุ่ม Social Sharing บนเว็บเพจ

ในปัจจุบันนี้ Social Sharing กลายเป็นปัจจุยที่มีผลต่อ Search Algorithm เป็นอย่างมาก จำนวนการกดแชร์เหมือนเป็นเครื่องชี้วัดว่าบทความเป็นบทความที่ดี หรือ เว็บไซต์ไหนเป็นเว็บคุณภาพ ดังนั้น Search Engine จึงนำมาใช้เป็นปัจจัยในการจัดอันดับ

มุมมองของ Brian Dean : Social Sharing ยังไม่ได้มีผลต่อ Search Engine ในระดับที่มีความสำคัญมากนัก แต่เป็นสิ่งที่มีความจำเป็นสำหรับการเพิ่มทราฟฟิคเข้าเว็บไซต์ อย่าลืมว่าเราทำ SEO กันก็เพื่อให้ได้ทราฟฟิค ซึ่ง Social Sharing สามารถเพิ่มทราฟฟิคให้กับเราได้

10. การเขียนเนื้อหาแบบยาวๆ

มีคำกล่าวที่ว่า “เนื้อหายิ่งยาวยิ่งดี” ซึ่ง SERPIQ.com ได้มีการทดสอบความเชื่อดังกล่าวว่าจริง! เนื้อหาที่ยาวกว่ามีระดับของการทำอันดับที่ดีกว่าในผลการค้นหาที่ Google อย่างน้อยควรพิจารณาเนื้อหาที่มีความยาว 1500 คำสำหรับการทำอันดับในคีเวิดเป้าหมาย

มุมมองของ Brian Dean : บทความส่วนใหญ่ในเว็บไซต์ของ backlinko.com จะเน้นที่การมีเนื้อหาที่มีประโยชน์กับผู้ใช้ ดังนั้นส่วนใหญ่แล้วความยาวของบทความมันจะเกิด 1000 Word อยู่แล้วครับ ซึ่งด้วยเนื้อหาที่มีความยาวย่อมนอกจากจะเพิ่มความสามารถในโอกาสของการทำอันดับในคีเวิดเป้าหมาย ยังเพิ่มโอกาสในการที่เว็บไซต์จะสามารถมีอันดับใน Long tail Keyword ด้วยเช่นกัน

11. Bounce Rate ยิ่งเยอะ ยิ่งส่งผลต่อการถูกลดอันดับ

Google สามารถตรวจจับ Bounce Rate (การเข้ามายังหน้าเพจแล้วปิดหน้าออกไป) ของเว็บไซต์ได้จาก Google toolbar, Chrome browser, หรือ Google Analytic ซึ่งยิ่งเว็บไซต์ไหนมีค่า ที่สูงย่อมหมายถึง User ไม่ชอบเนื้อหาในเว็บเพจนั้น ย่อมส่งผลต่อการค่อยๆ ถูกอันดับลงในผลการค้นหา

มุมมองของ Brian Dean : คิดว่า Bounce Rate ไม่ถึงกับเป็นปัจจัยหลังในส่วนของปัจจัย user experience metrics ที่ Google ใช้ เจ้าของ Web Site ควรใส่ใจ Bounce Rate เพื่อเพิ่มความพอใจให้กับ User มากกว่าที่จะทำเพื่อเอาใจ Google คำแนะนำที่ Briant แนะนำ คือ ลองทำ Text ในพารากราฟแรกของเนื้อหา เพื่อให้ User กำลังจะปิดหน้าไปมีทางเลือกอื่นๆ คือ คลิกลิงค์ไปดูบทความอื่นที่เกี่ยวข้องแทน เพราะโดยทั่วไปคนที่เข้าเว็บมาอย่างๆน้อย ก็จะอ่านเนื้อหาในส่วนแรกของหน้า

12. การใส่ LSI Keywords ให้ทั่วทั้งเนื้อหา

LSI คีเวิด คือ คำที่มีความหมายเหมือนหรือใกล้เคียงกัน ที่ Google ใช้ในการตัดสินความเกี่ยวข้องกันของเนื้อหา

มุมมองของ Brian Dean : โดยส่วนตัว เค้าไม่ได้มานั่งใส่ LSI ให้กับเนื้อหาในเว็บไซต์เลยครับ สิ่งที่เค้าทำ คือ การเขียนเนื้อหายาวๆ ซึ่งมันจะค่อยๆ เป็นการเพิ่มคีเวิด LSI เข้าไปเองแบบอัตโนมัติ แต่ถ้าใครจะเอาแนวคิดของ LSI ไปใช้ สิ่งที่ Biran แนะนำ คือ ให้ทำการ Search ที่ Google ด้วยคีเวิดเป้าหมายของคุณ แล้วเลื่อนลงมาดู Suggest Keyword ที่ Google แสดงขึ้นมาด้านล่าง นำคีเวิดชุดนี้มากระจายใส่ในบทความได้เลย

ปัจจัย Onpage SEO เพิ่มเติมจาก Info Graphic

1. Quality Content: ซึ่งมีวิธีอื่นๆ ที่ Search Engine สามารถใช้ตัดสินว่าเนื้อหามีคุณภาพหรือไม่ เช่น

Repeat visitors : การกลับมาของคนเข้าเว็บ
Chrome bookmarks : การ Bookmark หน้าเว็บของ Chrome Web Browser ยิ่งมีคน Bookmark หน้าเว็บไหนมาก แสดงว่า เว็บนั้นเป็น High Quality Website
Time on site : เวลาที่ User ใช้ในการอยู่ในเว็บ ยิ่งนาน ยิ่งดี
Dwell time เป็นการวัดเวลาที่ User อยู่บนเว็บเพจก่อนที่จะกดปุ่ม Back กลับมาที่ Google เช่น ถ้าคนคลิก Back กลับมาแทบจะทันที่ที่เข้าไปดูเว็บไซต์ AAA นั่นแสดงว่าเว็บไซต์เป็น Low Quality Website

2. Internal Links: : การทำลิงค์ไปยังหน้าที่เกี่ยวข้องภายในเว็บไซต์เดียวกัน เช่น Wikipedia ที่ถือได้ว่าเป็นที่สุดของ Internal Link (อย่าใส่เยอะแบบ Wikipedia นะครับ เว็บปกติ 3-6 Link ก็พอแล้วสำหรับ Internal Links)

3. H2 and H3 Tags: ควรมีการเพิ่มคีเวิดเข้าไปในส่วนของ หัวข้อย่อยของบทความ ที่เป็น tag H2 , H3

4. Image Optimization: เป็นสิ่งจำเป็นเช่นกัน การใส่ alt ด้วยคีเวิด และ การตั้งชื่อไฟล์รูปภาพด้วยคีเวิด เป็นอีก 1 ตัวช่วยสำหรับการทำ SEO

ที่มา:http://passiveincome.in.th/

[Blogger tips] - วิธีสมัคร Blogspot หรือ Blogger สำหรับมือใหม่ ง่ายๆ และ ฟรี

2014-05-18T23:54:00.001-07:00

สำหรับคนชอบเขียน เรื่องราวต่างๆ ผ่าน Blog ยอดนิยมอย่าง Blogspot เป็นอีกหนึ่งบริการฟรีของ Google ว่าการสมัคร Blogspot หรือที่เรียกว่า Blogger มาเริ่มวิธีสมัครกันเลยดีกว่า ไม่อยากอย่างที่คิดด้วยระบบภาษาไทย ที่สมัครง่ายและเข้าใจง่ายๆ

โดยเริ่มแรกเลยก่อนอื่นเราต้องมีบัญชีของ Gmail หากยังไม่มีสามารถสมัครได้ที่ www.mail.google.com

จากนั้นให้เข้าไปที่ หน้าของ Blogger คือ www.blogger.com/start?hl=th หลังจากเข้าไปแล้วจะได้ดังภาพด้านล่าง

เมื่อถึงหน้านี้แล้ว จะเป็นหน้า login สำหรับการใช้งานของ blogspot หากใครที่มีอีเมล์ของ Gmail อยู่แล้วหรือบัญชีออื่นๆของ Google ไม่ว่าจะเป็น Youtube , Google Play , Google+ , Gmail สามารถนำมา login ได้เลย หากใครยังไม่มี ให้คลิก สมัคร Gmail เพื่อสมัคร

หากใครมีบัญชีอยู่แล้วก็ Login เข้ามาเลย

ให้คลิกที่ ดำเนินการต่อไปยังบล็อกเกอร์

การสร้างบล็อก ให้คลิกที่ บล็อกใหม่ ดังภาพด้านบน

การสร้าง Blog ตรงนี้สำคัญหน่อย เราจะสร้างชื่อของเราเป็นเหมือนชื่อ Blog ของเรานั้นเอง และเลือก URL ของเว็บ ว่าเราต้องการอะไร หากเราเลือกไปรูปแบบจะเป็น คำที่เราใส่.blogspot.com เช่น xn--12cl5bv9c6b4h2bf.blogspot.com

จากนั้นให้เลือกรูปแบบ Blog ที่เราต้องการ จะเป็นคล้าย Theme ของ Blog แล้วกด สร้างบล็อก ได้เลย

เมื่อเลือก สร้างบล็อกแล้วให้รอสักครู่ เพจจะเด่งไปยังหน้าแรกของ Blogger

ให้กดตามรูปศรด้านบนเพื่อเริ่มเขียนบทความแรกของ Blog

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

เป็นอย่างไรกันบ้างครับการสมัคร Blogger ไมได้ยากอย่างที่คิดเลยจริงไหม ฝึกเขียน ฝึกอ่าน สมัคร Blog เอาไว้บอกเรื่องราวแจกจ่ายความรู้อย่าลืมใช้บริการ Blogger นะจ๊ะ

hxxp://www.zoneza.com/blogspot-blogger-blog-view9475.htm

[Blogger tips] - Blogger คืออะไร ?

2014-05-18T23:43:00.000-07:00

Blogger คืออะไร

หลายๆคนอาจจะสงสัยว่า Blog คืออะไร? แตกต่างจากไดอารี่ online ไหม? แล้วทำไมคำๆนี้ถึงมาแรงจัง ไปไหนๆก็มีแต่ Blog สรุปแล้วมันคืออะไรกันแน่?

บล็อก (อังกฤษ: blog) หรือ เว็บล็อก (weblog) เป็นหน้าเว็บประเภทหนึ่ง ซึ่งคำว่า blog ย่อมาจากคำว่า weblog หรือ web log โดยคำว่า weblog นั้นมาจาก web (เวิลด์ไวด์เว็บ) และ log (ปูม, บันทึก) รวมกัน หมายถึง บันทึกบนเวิล์ดไวด์เว็บ นั่นเอง
ในปัจจุบันบล็อก ถูกใช้เป็นเครื่องมือสื่อสารรูปแบบใหม่ ไม่ว่าจะเป็นการประกาศข่าวสาร การแสดงความคิดเห็น การเผยแพร่ผลงาน ฯลฯ และกำลังเป็นที่นิยมมากขึ้นเรื่อย ๆ โดยขณะนี้ได้มีผู้ให้บริการบล็อกมากมาย ทั้งแบบให้บริการฟรี และเสียค่าใช้จ่าย – Wikipedia
สรุปง่ายๆ Blog ก็คือ Website รูปแบบหนึ่ง ที่มีการจัดเรียง “เรื่อง” หรือ post เรียง

ลำดับ โดยเรื่องใหม่จะอยู่บนสุด ส่วนเรื่องเก่าสุดก็จะอยู่ด้านล่างสุด
Blog อาจจะพัฒนาขึ้นมาอีกขั้นของ ไดอารี่ online ก็เป็นได้ โดย Blog จะเป็นเรื่องเกี่ยวกับอะไรก็ได้ ไม่จำกัด ซึ่ง ไดอารี่ ก็ถือว่าเป็น Blog ในรูปแบบหนึ่ง

Blog ส่วนใหญมักจะเขียนโดยคนเพียงคนเดียว แต่ก็มีไม่น้อยที่เขียนเป็นกลุ่ม โดยอาจจะมีเรื่องราวเฉพาะไปที่ๆเรื่องประเภทเดียว หรือบางทีก็หลากหลาย ซึ่งส่วนใหญ่เรื่องราวที่เขียนขึ้นมานาน จะถูกเก็บรวบรวมเป็น Archives เก็บ ไว้ โดยมักจะแสดงผลเป็น link ในรูปแบบ วันเดือนปี เพื่อให้เราสามารถกดเข้าไปดูได้ ก็ไม่ต้องตกใจว่าที่หน้าแรกของ Blog บางทีก็มีเรื่องแสดงแค่ 10 เรื่องก็หมดแล้ว เพราะบางทีใน Archives อาจมีเรื่องอยู่ในนั้นอีกเป็นร้อยๆ โดยที่เราต้องเข้าไปดู

Blog มักจะมาคู่กับระบบ Comment ที่เปิดโอกาสให้คนอ่าน สามารถ Comment ข้อความต่อท้ายในเรื่องที่เรา post ได้ คล้ายๆรูปแบบของ Webboard ไม่ว่าจะเป็นติชม แสดงความคิดเห็นเพิ่มเติม หรือบอกแหล่งข้อมูลใหม่ๆ หรืออาจจะแค่ทักทายเจ้าของ ฺBlog ก็เป็นได้ ถ้าคุณลองเลื่อนไปดูด้านล่างของเรื่องนี้ จะพบช่องให้กรอก Comment ทิ้งข้อความไว้ให้ผมได้

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

แต่ในปัจจุบัน บริษัทใหญ่ๆ ก็หันมามี Blog เป็นของตัวเองกันมาก ไม่ว่าจะเป็น Google , Yahoo เพราะ Blog สามารถทำตัวเป็น PR ให้กับบริษัทได้ โดยสร้างความรู้สึกเป็นกันเอง ไม่มีพิธีอะไรมาก สามารถสื่อสารกับลูกค้าได้โดยตรง โดยไม่ต้องเป็นทางการมากนัก และลูกค้าก็ชอบที่จะติดต่อสื่อสารผ่านทาง Blog ด้วย

ปัจจุบันในเมืองไทยมีผู้ให้บริการ Blog อยู่หลายที่ เช่น Bloggang, exteen หรือ BlogKa
หรือต่างประเทศเช่น Blogger, WordPress, MySpaceแล้ววันนี้คุณมี Blog ของตัวเองแล้วหรือยัง?

hxxp://www.pawoot.com/marketing-forum/?showtopic=431

[Blogger tips] - How to Embed JW Player in Blogger วิธีติดตั้ง JW Player ใน Blogger

2014-05-14T23:38:00.001-07:00

How to Embed JW Player in Blogger to Play Flash/ MP4/ FLV Videos?
วิธีติดตั้ง JW Player ใน Blogger

jw player เป็นมีเดียเพลย์เยอร์ ที่นิยมใช้งานกันอย่างแพร่หลายตามเว็บไซต์ที่แสดงคลิปวีดีโอต่าง ๆ
ซึ่งโดยส่วนใหญ่จะเป็น youtube

ข้อดีของ jw player คือ สามารถดึงไฟล์ วีดีโอ ต่างๆ มาแสดงได้ทุกที่ ไม่ว่าคุณจะฝากไว้ที่เว็บไหน เปรียบเสมือนเครื่องเล่น ไฟล์ วีดีโอ บนเว็บไซต์นั้นเอง

สำหรับชาว Blogger ที่ต้องการ นำไปใช้งาน ไม่ใช่เรื่องยากครับ ไปดูวิธีการติดตั้งเจ้า jw player กันเลย

ขั้นตอนการติดตั้ง

ขั้นที่ 1 ติดตั้ง Javascript (jQuery)

ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ แม่แบบ >> แก้ไข HTML

ให้หาโค้ดคำว่า </head> แล้ววางโค้ดด้านล่างไว้เหนือคำว่า </head>

<script src="https://sites.google.com/site/siani3d99/home/code/swfobject%202.2.js" type="text/javascript">
</script>

ขั้นที่ 3 ติดตั้ง HTML แสดง JW Player

แก้ไขโค้ด ด้านล่าง แล้วนำไปวาง ใน Post HTML ที่ต้องการแสดง

<Div id="video1">Please install the Flash Plugin</Div>
<script type="text/javascript">
var flashvars = { file:'http://ที่อยู่ไฟล์วิดีโอ.mp4', autostart: 'false' };
var params = { allowfullscreen:'true', allowscriptaccess:'always' };
var attributes = { id:'player1', name:'player1' };
swfobject.embedSWF('http://player.longtailvideo.com/player.swf','video1','470','380','9.0.115','false', flashvars, params, attributes);
</script>

video1 เปลี่ยนเป็น video2, video3 ต่อๆไป กรณีที่มีแสดงหลายคลิบ
player1 เปลี่ยนเป็น player2, player3 ต่อๆไป กรณีที่มีแสดงหลายคลิบ
http://ที่อยู่ไฟล์วิดีโอ.mp4 ที่อยุ่ไฟล์ วิดีโอ ที่เราฝากไว้กับเว็บต่างๆ
470 ความ กว้าง ของ วิดีโอที่จะแสดง
380 ความ สูง ของวิดีโอที่จะแสดง

ตัวอย่างโค้ดที่แก้ไขแล้ว สามามารถ คัดลองไปทดลองใช้ได้เลย

<Div id="video1">Please install the Flash Plugin</Div>
<script type="text/javascript">
var flashvars = { file:'http://content.bitsontherun.com/videos/lWMJeVvV-364767.mp4', autostart: 'false' };
var params = { allowfullscreen:'true', allowscriptaccess:'always' };
var attributes = { id:'player1', name:'player1' };
swfobject.embedSWF('http://player.longtailvideo.com/player.swf','video1','470','380','9.0.115','false', flashvars, params, attributes);
</script>

Please install the Flash Plugin

[jQuery]:Animated Zoom With Caption Effect

2014-05-13T20:03:00.002-07:00

เพิ่มลูกเล่น เก๋ๆให้กับรูปภาพของเราด้วย Animated Zoom โดยใช้ โค้ด CSS ไม่ต้องพึ่ง Javascripts อีกต่อไป

โดยเจ้า Animated Zoom ตัวนี้ เมื่อเลื่อนเมาส์ ไปยังรูป รูปจะ Zoom ขยายนิดนึง พร้อมจางลง
และจะมี title วิ่งเข้า อย่างน่าตื่นตาตื่นใจ สะเจ๋งมากแค่ไหนไปดูกันเลยครับ

ขั้นตอนการติดตั้ง

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

.titlezoom{display:inline-block;overflow:hidden;position:relative;text-decoration:none} .titlezoom:before{display:block;background-color:#000;content:"";height:100%;opacity:0;position:absolute;width:100%;z-index:2} .titlezoom:after{display:block;background-color:rgba(255,255,255,0.8);color:#000;content:attr(title);left:-100%;position:absolute;text-align:center;text-transform:uppercase;top:5%;width:94%;z-index:3;padding:2% 3%} .titlezoom img{border:none;display:block;z-index:1} .titlezoom:before,.titlezoom:after,.titlezoom img{-webkit-transition:all 200ms ease;-moz-transition:all 200ms ease;-o-transition:all 200ms ease;transition:all 200ms ease} .titlezoom:hover img{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)} .titlezoom:hover:before{opacity:0.3} .titlezoom:hover:after{left:0}

ขั้นที่ 2 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

แก้ไข ไตเติ้ล ข้อความทที่จะแสดง
แก้ไข ลิงค์ url ของ href
แก้ไข ลิงค์รูป urlรูป ของ src

นำโค้ดที่แก้ไขแล้ว ไปวางใน post บทความ หรือ Widget HTML ที่จะแสดงได้ตามควา่มต้องการ

<a class="titlezoom" title="ไตเติ้ล" href="url"><img src="urlรูป" height="192" width="320"></a>

ตัวอย่าง

[SEO] - ปัจจัยง่ายๆเกี่ยวกับ SEO ที่นักพัฒนาเวปไซท์มักจะมองข้ามไป

2014-04-22T18:58:00.001-07:00

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

ซึ่งมันก็เป็นเหตุที่ทำให้เว็บไซต์มากมายต้องโดนแก้ใหม่หมดทั้งเว็บโดยเหล่านัก SEO ภายหลัง เอาล่ะที่นี้ไม่ว่าคุณกำหลังออกแบบเว็บกันอยู่ หรือจะไปซื้อ หรือเอา template ที่ไหนก็ตามมาใช้หรือจะจ้างบริษัทต่างๆมาพัฒนาเว็บ ขอให้มั่นใจเลยว่าถ้า 18 ข้อ ต่อไปนี้ถูกจัดการพัฒนาไปพร้อมๆ กันก่อนเว็บจะเปิดตัวอย่างเป็นทางการล่ะก็คุณจะไม่ต้องมานั่งผ่าตัดครั้งใหญ่ ให้กับเว็บไซด์ของคุณภายหลัง ขอแค่ทำตามแนวทางต่อไปนี้ เว็บไซด์คุณก็จะง่ายต่อการที่ SEO จะหาคุณเจอตั้งแต่เริ่มเลยล่ะ

SEO 1.ศึกษาเรื่อง Keyword ก่อนลงมือพัฒนาหน้าเวป

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

สุดยอดกระบวนการค้นคว้าเรื่องการตั้ง Keywords

2. เปลี่ยน Non-www ไปเป็น WWW ให้เรียบร้อย
คุณจะต้องแปลกใจเมื่อพบว่า เวป จำนวนมากไม่ได้ถูกจัดทำในรูปแบบ WWW ซึ่งเกิดจากการที่มันถูกสร้างขึ้นเพื่อจำลองหน้าเวปหลักของคุณซึ่งจะทำให้เสีย โอกาสจากการที่ต้องเกิด link ที่ไม่จำเป็น เวลาชาวเวปต้องมากดเลือกว่าจะเอา version ไหน ตัดสินใจให้ชัดว่า URL เวอร์ชั่นไหนที่คุณอยากจะใช้ แล้วจัดการ 301redirect อย่างอื่นที่เหลือไปที่เวอร์ชั่นนั้น จบ

3. โปรดใช้โครงสร้าง URL ชนิด Static
Dynamice URL เป็นที่มาของเรื่องปวดหัวหากคุณจัดการมันไม่ถูกต้อง ดังนั้นอย่างเสี่ยง ให้มั่นใจว่าเวปของคุณมีระบบ URL rewrite ที่ถูกต้อง ซึ่งทำให้ไม่จำเป็นต้องไปยุ่งวุ่นวายกับ dynamic URL ดีที่สุดซึ่งก็จะมีอยู่ 2 วิธีก็คือ Mod_Rewrite และ 404 Page Not Found สำหรับ ก็สามารถ URL rewrite ได้ครับ

4. จัดให้ หัวข้อสินค้า และ บริการแต่ละชนิด มีชื่อ URL ที่เฉพาะของตัวเอง
เพื่อที่จะขจัดปัญหาเรื่องเนื้อหาที่ซ้ำไปซ้ำมา ให้มั่นใจว่าบริการแต่ละชนิด มีชื่อ URL ที่เฉพาะของตัวเอง แม้ว่า มันจะสามารถเข้าถึงได้จากหลายตำแหน่งบนเวปของคุณ

5. มั่นใจว่าเวปคุณสามารถ Redirect ได้
ไม่มีใครรู้ว่าเมื่อไหร่ที่คุณอาจจะต้องเอาหน้า page ลงและทำการ redirect ไปที่เนื้อหาอื่น ทำไมเหรอ? ก็เพราะการถอดหน้าpage ออกเฉยๆหลังจากไม่ใช้มัน ทำให้คุณสูญเสีย link ต่างๆที่ได้มาระหว่างที่หน้าpageนั้นเคยเปิดอยู่ไง ดังนั้นได้โปรดจัดให้หน้าpage สามารถ 301 redirect ได้เสมอนะ

6.สร้าง custom 404 page ไว้ด้วย
ข้อดีก็คือ หากคุณมี custom 404 pageไว้ อย่างน้อยผู้ใช้เวปก็ทราบได้ว่าเขาเข้ามาถูกเวปแล้วละ เพราะหากไม่มีหน้าpageนี้ใครๆก็คงคิดเอาว่า เวปของคุณปิดไปแล้ว และ ก็ไม่รอช้าที่จะกดไปที่เวปของคู่แข่งของคุณแทน

7.ให้ดูแล Keyword ใน Alt Attributes
Alt attributes มักจะถูกลืมให้ความสำคัญไป แต่ถ้าคุณดูแลข้อมูลส่วนนี้ให้ดีๆ มันสามารถช่วยแจ้งให้ SEO ค้นหาหน้าเวปของคุณได้ดีขึ้น เทคนิคง่ายๆอย่างหนึ่งก็คือ อย่าได้ ยัดเอา Keyword ประโยค หัวข้อทุกสิ่งอย่างลงไปในนั้นเด็ดขาด

8. เผื่อพื้นที่สำหรับเนื้อหาไว้ด้วย
ผู้ออกแบบเวปบางคนออกแบบหน้าเวปซะสวยงามจนลืมไปเลยว่าต้องเผื่อพื้นที่สำหรับเนื้อหาแบบ text ด้วย เพราะนั่นคือส่วนที่ SEO จะจ้องหา ดังนั้นให้มั่นใจว่าเผื่อพื้นที่สำหรับเนื้อหาไว้อย่างเหมาะสม ทั่วไปแล้วก็คือประมาณ 150-200 คำ ถ้าอยากให้ page นั้นๆได้อำดับที่ดี และก็ต้องให้มั่นใจว่า ได้จัดวางโครงสร้างของเนื้อหาอย่างถูกต้อง โดยมี H1 tag อยู่บนสุด จากนั้นก็แยกส่วนของเนื้อหาลงมาก ด้วย H2-H6 tag ตามสมควร แอบใส่ Keyword ไว้ตามหัวข้อหลักและเนื้อหาบ้าง แต่ได้โปรดอย่ายัดซะเยอะเกินละ

9. จัดทำโครงสร้าง Link ภายในให้เรียบร้อย
นี่ก็เป็นอีกจุดที่มักจะถูกมองข้ามไป เอางี้ขอแนะนำให้ไปอ่านบทความของ Ken Lyons เรื่อง Want More Link Juice? Here’s an Easy Way to Get It ข้างในมีรายละเอียดครบถ้วนเกี่ยวกับการทำ Link

10. สร้างรูปแบบคงที่ให้กับโครงสร้างของ title ของคุณ
หน้าเวปที่ดีควรจะใช้โครงสร้าง title ชนิดเดียวกันทั้งเวป เลือกซักอันที่คุณถนัดแล้วก็ลุย ถ้าจะให้ยกตัวอย่างก็คือการมีรูปประโยคที่ รวมเอา Keywords หลักของหน้าpage และ อธิบายว่า page มีเนื้อหาเกี่ยวกับอะไร ต่อตัว separator เช่น – หรือ or ตัวอย่างเช่น “Professional SEO Services for Organic Website Optimization | SEO.com” โดยใช้คำประมาณ 65-70 ตัวอักษาก็พอ จะได้ไม่เฝือเวลาแสดงผลออกมา

11. ใส่ Meta Descriptions ในทุกๆหน้า page
ในเมื่อ SEO สามารถเลือกเอา Meta Descriptions เป็น snippet ของเวปคุณในการแสดงผล ก็ควรที่จะมี Meta Descriptionsเฉพาะของแต่ละหน้าpage ไปเลย ซึ่งของตายก็คือ มี keyword หลัก และเสริมด้วย คำเด็ดๆที่ชวนให้กดเข้าสู่เวปของคุณ อย่าเอา keyword มายัดลงไปเฉยๆ น่าเบื่อมาก

12. อนุญาตให้ รวมเอา Meta Tags อื่นเข้ามาด้วย (canonical,robots)
ในกรณีที่คุณใช้ tracking codes หรืออะไรคล้ายกันในเวปของคุณเพื่อที่จะ duplicate URLs ฟันธงเลยวุ่คณควรสามารถที่จะเพิ่ม canonical tag ในหน้าpage นั้นๆ นี่ไม่นับไปถึง meta tag อย่าง robots tag เอาเป็นว่ามันใจว่า ฉุกเฉินขึ้นมาเวปคุณสามารถจัดการเรื่องเหล่านี้ได้หากจำเป็น

13. ควรจะมีปุ่มสำหรับ Social Media ตามกระแส
ถ้าคุณไม่อยู่ในถ้ำ หรืออยู่หลังเขา ก็คงจะรู้ว่า กระแส Social Media มาแรงแค่ไหน จัดมาซะอย่าให้เสีย ลองตรวจสอบดูว่า Social Media ตัวไหนที่มีกลุ่มเป้าหมายของคุณอยู่ ทำปุ่ม share แล้วก็เตรียมเฮ

14. ติดตั้ง Analytics Tracking
ถ้าคุณอยากรู้ว่า traffic ในเวปคุณมันมากจากไหน ทางเดียวก็คือการติดตั้ง Analytics Tracking มันยังจะช่วยให้ข้อมูลสำคัญอื่นๆอีกจำนวนมาก ศึกษาดูแล้วเลือกตัวที่โอเคสำหรับคุณจากรายการต่อไปนี้

Google Analytics

Omniture

Mint

StatCounter

แน่ละว่า ให้ติดตั้งเจ้าตัวที่สามารถ block office IP address สามารถตรวจสอบการแรกเปลี่ยนข้อมูล ยอด revenuesecommerce ที่จากทุกโครงข่าย online และอะไรก็ตามที่ช่วยให้คุณทราบถึงผลกระทบที่จะส่งผลต่อความสำเร็จของเวปของคุณ

15. จัดระบบ และ ตรวจเวปของคุณด้วย Web master tools
ลองไปศึกษา Google Webmaster Tools คุณจะเห็นเวปของตัวเองผ่านสายตาของ Google ซึ่งช่วยทำให้คุณสื่อสารกับ Google ได้ชัดเจน เกี่ยวกับการจัดการ parameters การ submit SML อีกทั้งแจงให้เห็นปัญหาต่างๆที่เกิดขึ้นบน site ของเรา ถ้ามีเวลาเหลือก็ลองไปดู Bing’s Webmaster Center อีกซักตัว

16. อย่าฉีกกฎ เกี่ยวกับ HTML,CSS และ Database Programming
ยิ่งคุณทำทุกอย่างตามาตราฐาน มันก็ง่ายเมื่อจำเป็นต้องดัดแปลงปรับปรุงตัวเวป ไม่มีอะไรปวดหัวไปกว่าเมื่อคุณไปเปิดเวปของคนอื่นแล้วพบว่ามันเขียนด้วย code หรือ database ที่ลึกลับซับซ้อน รบกวนออกแบบเวปของคุณให้มันเข้าใจง่ายไว้จะดีที่สุด

17.Generate XML sitemap
ไม่ได้เสียเวลาอะไรมากมายมาย ขอเพียงให้ทุกครั้งที่เวปคุณ online ก็จัดการทำ XML sitemap และ submit กับ SEO ดังๆทั้งหลายด้วย webmaster tool และจะยิ่งเยี่ยมเข้าไปอีกถ้าคุณจัดการให้มัน automatically updates แถม pings ไปบอก SEO เหล่านั้น เมื่อมีอะไรเปลี่ยนแปลงในหน้าเวป

18. สร้าง Robots.txt file
เมื่อคุณสร้าง Robots.txt fileมั่นใจว่าคุณ disallow หน้าpage หรือ directoryที่คุณไม่อยากให้ SEO เข้าไปวุ่นวาย ตัวอย่างทั่วๆไปก็คือ login pages, search results pages, และ shopping cart pages อย่าลืมรวม link ใน XML sitemap เข้าไปด้วย

จากนั้นก็ไปตรวจสอบดูด้วยเจ้า Google webmaster tools อีกทีให้มั่นใจว่าทุกอย่างทำงานเรียบร้อย

แนะนำว่าให้ไปหาอ่านเพิ่มเติมได้ที่ http://www.robotstxt.org/robotstxt.html

รับรองว่าถ้าคุณทำตามที่บอกไว้ทั้ง 18 รายการนี้ เวปของคุณจะเปิดตัวอย่างสวยหรูและในฐานะเวปที่เยี่ยมสำหรับ SEO จัดให้

อ้างอิง : http://www.seo.com/blog/18-seo-items-commonly-missed-web-dev/

ที่มา : http://seo.clisk.co.th/article/18-สิ่งง่ายๆเกี่ยวกับ-SEO-ที่มักจะมองข้ามไป.html

[SEO] - ข้อห้าม 10 อย่าง ในการทำ SEO

2014-04-22T18:53:00.001-07:00

1. ห้ามโกง Search Engine ในทุกๆ วิธี จะทำอะไรก็ทำแต่ พองาม นะครับ บาง คนอาจจะบอกว่า "ก็มันติดหน้าแรกเร็วนี่" เคยได้ยินคำว่า มาไวไปไวมั้ยล่ะครับ โดนแบนมาเมื่อไหร่อย่าหาว่าผมไม่เตือนนะ อยากให้จำสุภาษิตนึงไว้ว่า "ซื่อกินไม่หมด คดกินไม่นาน" อย่าหลงเข้าไปอยู่ในด้านมืดของ SEO นะครับ

2. อย่าให้เห็นนะว่า link ไหนเข้าไม่ได้ การทำมี link ตัวไหนซักตัว นี่ก็เป็น ผลเสียของ SEO เช่นกันครับ เพราะ บรรดา Search Engine จะมองว่า เว็บที่มี link เสีย หรือที่เรียกกันว่า Broken Link นั้นเป็นเว็บไม่มีคุณภาพ ไม่นาเชื่อถือ เอาล่ะว่าแล้วก็รีบเช็คกันเลยนะครับ
เช็ค Broken Link

3. Hosting ที่ให้บริการมีคุณภาพต่ำ เรื่องนี้ก็เห็นใจนะครับ เพราะปรกติ เราจ่ายค่าโฮสเป็นรายปี ก็ใช้ไปแล้วนี่เนอะ อืม...อยากบอกว่า
ถ้าเปลี่ยนได้ก็เปลี่ยนเถอะครับ เพราะ อยากให้คุณลองวัดที่ตัวคุณเองดูว่าเวลาเข้าเว็บไหน ที่มันโหลดนานๆ คุณจะอยากเข้ามั้ย หรือ เข้าเว็บไหน
แล้วมันกลายเป็น Page Not Found คุณจะกลับมาเข้าเว็บนี้อีกมั้ย และ ก็จงอย่าแปลกใจเลย หาก คุณทำ SEO ขั้นเทพแล้ว เว็บยังไม่ติดอันดับ
ซักที อาจเป็นเพราะ บอท มันมาเจอคำว่า Page Not Found ตอนมาเว็บคุณก็เป็นได้

4. link ไปเว็บที่เนื้อหาไม่สอดคล้องกับเว็บเรา เนื้อหาเว็บ กับเว็บที่เรา link ไปหาก็เกี่ยวเหมือนกันนะครับ เพราะ Google panda Algorithm นอกจากจะวัดคุณภาพจากเนื้อหาในเว็บของคุณแล้ว ยังวัดจาก link ที่ไปจากเว็บของคุณด้วยเช่นกัน อาธิเช่น เว็บนี้เป็นเว็บ สอนทำ SEO ก็และมี link ไปถึง goragod.com ซึ่งเว็บนั้นสอนทำเว็บไซด์ จะเห็นได้ว่ามีเนื้อหาเรื่องการสอนทำเว็บเหมือนๆ กัน ครับ เพราะฉะนั้น จะแลก link กับเว็บไหนจะดูแต่ PR ไม่ได้นะครับ ต้องดูเนื้อหาเว็บด้วยครับ

5. link เข้ามามากผิดปรกติ คุณเป็นคนนึงหรือป่าวที่ submit directory ที่เดียว 500 กว่าเว็บ,Googleคงไม่ปลื้มแน่ถ้าเห็นเว็บไหนทำแบบนี้ เรียกว่าไม่เนียน เอาซะเลย ค่อยๆ ทำดีกว่าครับ เนียนๆ ดูเป็นธรรมชาติ อยากให้จำสุภาษิตนึงไว้ (อีกแระ) ว่า "ช้าๆ ได้พร้าเล่มงาม" วันนึง 10 เว็บ 20 เว็บ ก็พอแล้วครับค่อยๆ นะ ค่อยๆ อ้อ !! อีกเรื่องครับ เว็บที่ link เข้ามาต้องเป็นเว็บที่เนื้อหาสอดคล้องกับเว็บคุณเหมือนกันนะครับ

6. อย่าทำ Gray SEO อย่างน่าเกลียด คำพระสอนไว้ว่าให้เดินสายกลาง เราก็ทำ SEO กันแบบสีเทาๆ เหอๆ เค้ามี สายขาว กับ สายดำ เราสายเทา ว่างั้น อืม...บาปเบาๆ ทำบ่อยๆ มันก็เป็นบาป หนักได้เหมือนกันนะครับ เพราะ ฉะนั้น Gray SEO ถ้าเราคิดว่าเฮ้ย "ไม่เป็นไร" แล้วอัดมันทุกวันล่ะก็ มันก็จะกลายเป็นเหมือนกับคุณกำลังทำ Black SEO อยู่ แล้วก็รอวันโดนแบนได้เลยล่ะครับ

7. ทำตัวเป็นโจรขโมยเนื้อหา นอกจากจะบาป แล้ว คริสต์ก็ผิดพระบัญญัติข้อ 8 ทาง พุทธก็ผิดศีลข้อ 2 ทาง Search Engine ก็มองว่าคุณ Duplicate Content อีกด้วย ผมเคยพูดถึงเรื่องนี้ในบทความ Google panda คืออะไร Duplicate Content คือ การก็อปปี้ หรือ ขโมย เนื้อหาข้อมูลมากจากเว็บไซต์อื่นๆ มาเว็บในเว็บของคุณเอง Google ก็จะมีหน้าที่เป็นตำรวจมาจับขโมยนั่นเอง

8. ทำ Cloaking เหอๆ จะกลายเป็นบทความศาสนา แล้วมั้ง ก็คือ ข้อนี้บาปครับ และ นอกจากนี้ ทาง Search Engine ก็มองว่าเว็บคุณ
ไม่ดีด้วย การทำ Cloaking การทำหน้าเว็บเพื่อหลอก Bots หรือ Crawler ของ Search Engine โดยทำเพื่อให้เว็บติดอันดับอย่างรวดเร็ว ครับ เหมือนกับการโกหก แหละครับ บาปกรรม นะ

9. หลีกเลี่ยงโปรแกรมช่วยทำ SEO ใครมาชวนให้ลองบอกไปเลยว่าไม่ เพราะ Search Engine เค้าฉลาดนะ จับได้หมดแหละครับ
อย่าพยายามเลย ไอ้วิธีนี้อ่ะไม่ได้ผลหรอกครับ เข้าข่าย ข้อ1 โกง Search Engine นะครับ

10. การทำ Redirects มาถึงข้อนี้อาจมีคนท้วงผมครับว่า "จำได้นะว่าเคยให้ทำ แนะนำไว้ในบทความที่ชื่อว่า 18 สิ่งง่ายๆเกี่ยวกับ SEO ที่นักพัฒนาเวปไซท์มักจะมองข้ามไป" ใช่ครับผมเคยบอกไว้ การทำ Redirect นั้นควรทำแต่ต้องทำอย่างถูกวิธีครับทำได้แค่วิธีที่ชื่อว่า 301 redirect เท่านั้นครับ ถ้าเป็นประเภท <META HTTP-EQUIV='Refresh' อะไรแบบนั้น อย่าครับ ห้ามเด็ดขาด

ที่มา : http://seo.clisk.co.th/article/110-ข้อห้ามในการทำ-SEO.html

[SEO] - Google Dance คืออะไร มาทำความรู้จักกันหน่อย

2014-04-22T03:18:00.003-07:00

เว็บมาสเตอร์หรือเจ้าของเว็บไซต์หลายท่าน อาจเคยเจอลักษณะอันดับเว็บไซต์เกิดการเปลี่ยนแปลงอย่างรวดเร็วจนน่าตกใจ อาทิเช่น อันดับอาจเคยอยู่หน้าแรกมานาน แต่ในวัดถัดมากลับไปอยู่ในหน้าท้ายๆ ที่กระโดดไปไกลจากเดิมเป็นอย่างมาก หรือ บางท่านก็อาจมีอันดับที่ดีขึ้นมาจนหน้าแปลกใจ

ซึ่งลักษณะอาการดังกล่าวในเบื้องต้นนี้ หากท่านใดกำลังพบเจออาการดังกล่าวสันนิษฐานเบื้องต้นได้เลยว่า ท่านอาจเจอกับอัลกอริทึมที่ในกลุ่มนักทำ SEO เรียกกันว่า “Google Dance” นั้นเอง โดยอาการดังกล่าวจะพบมากที่สุดเมื่อมีการปรับเปลี่ยนวิธีคำนวณอัลกอริทึมสำหรับการจัดลำดับของเจ้ากูเกิ้ลจนส่งผลให้มีการเปลี่ยนแปลงอันดับขึ้นลงอย่างรวดเร็วผิดปกติ

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

[MAKE MONEY] - ฝากไฟล์ได้เงิน กับ ziddu

2014-04-21T21:00:00.001-07:00

เป็นเศรษฐีด้วย..ziddu วิธีง่ายๆ ได้เงินจริงที่นี่

Ziddu เว็บฝากไฟล์ รูปภาพ วีดีโอ อัพโหลดได้ไม่จำกัด ไม่ลบไฟล์ ไม่ต้องรอเวลา

ข้อดีของ Ziddu

1. ไม่มีเวลานับถอยหลังในการดาวน์โหลดไฟล์
2. Ziddu ให้เราอัพโหลดไฟล์ได้ขนาดสูงสุดถึงไฟล์ละ 200 MB (204,800KB)
3. ในกรณีที่ไฟล์เป็นรูปภาพ คลิปวีดีโอ หรือไฟล์เพลง Ziddu ก็จะแสดงเป็นภาพตัวอย่างให้ดูในหน้าดาวน์โหลด และจะนับเป็น 1 download เมื่อมีผู้คลิกเข้าไปดูภาพใหญ่ กดเล่นคลิปวีดีโอ หรือ กดฟังเพลงด้วย (มันยอดมั๊ยล่ะ!)
4. Ziddu จะมีออพชั่นให้เราเลือกส่งลิ้งค์ของไฟล์ที่อัพโหลดไปทาง e-mail ได้ทันที
5. ไฟล์ที่อัพโหลดไว้กับ Ziddu จะถูกเก็บได้นานถึง 90 วันเมื่อไม่มีผู้ดาวน์โหลด
6. การยื่นขอรับเงินค่าตอบแทนใน Ziddu จะสามารถทำได้ทันทีเมื่อทำยอดได้ถึงหรือมากกว่ $10

ข้อเสียของ Ziddu

1. การนับจำนวนดาวน์โหลดไฟล์จะนับจาก Unique Download หรือผู้ดาวน์โหลดที่ไม่ซ้ำ IP Address ต่อวัน/ไฟล์
2. เนื่องจากกฎการจ่ายเงินใหม่ของ Ziddu (ออก ณ วันที่ 24/12/50) ที่ให้เราต้องเสียเวลารอนานถึง 40 วันกว่า ที่จะได้รับรายได้ในแต่ละครั้ง (เช่น ยื่นขอค่าตอบแทนในเดือนมกราคม จะได้รับเงินในเดือนมีนาคม)

อื่นๆเกี่ยวกับ Ziddu

• อัพโหลดไฟล์ได้ไม่จำกัดจำนวน
• รับค่าตอบแทน $10 เมื่อมีผู้ดาวน์โหลดไฟล์ครบ 10000 ครั้ง
• จ่ายค่าตอบแทนผ่าน Paypal

วิธีการสมัครหาเงินกับ Ziddu

1. ให้เข้าไปที่เว็บไซต์ของ Ziddu โดยคลิกที่รูปด้านล่าง

>>>สมัครที่นี่<<<

2. เมื่อเข้ามาแล้ว ให้กรอกข้อมูลในการสมัครสมาชิกครับ (ไม่ต้องใส่ชื่อจริงก็ได้ครับ เว้นแต่ e-mail ต้องเป็น e-mail ที่ใช้ได้จริงครับ)

3.เมื่อลงทะเบียนสมาชิกเสร็จแล้ว จะแสดงข้อความนี้ครับ ให้คลิกเพื่อ log in หรือรอจนกว่าหน้าเว็บจะเปลี่ยนไปสู่หน้าบัญชีของเรา

4.เมื่อเข้ามาในบัญชีของเราแล้วให้คลิกที่ My Account

5.ทางด้านซ้ายมือจะแสดงรายการขึ้นมา ให้คลิกที่ Payment Settings เพื่อตั้งค่าการรับเงิน

6.ในส่วนของ Payment Setup ให้เลือกว่าคุณต้องการรับเงินทางไหน ในที่นี้เลือก Paypal

7.ให้คุณใส่ชื่อบัญชีลงไปแล้วคลิกที่ Add

เท่านี้ก็เป็นอันเสร็จขั้นตอนการสมัคร Ziddu แล้วล่ะครับ ต่อไปเราจะมาดูวิธีอัพโหลดและแชร์ไฟล์เพื่อสร้างรายได้กัน

วิธีการอัพโหลดไฟล์กับ Ziddu

1. คลิกที่ Upload file แล้วเลือกจำนวนไฟล์ที่จะอัพโหลดในครั้งเดียวกัน

2. คลิกปุ่ม Browes แล้วเลือกไฟล์ที่จะอัพโหลดจากเครื่องของคุณ

3. เมื่อเลือกไฟล์ที่ต้องการแล้วก็คลิกปุ่ม Upload ได้เลย

4. รอให้ทำการอัพโหลดเสร็จ

5. เมื่ออัพโหลดเสร็จก็จะได้ลิงค์สำหรับดาว์โหลด ให้คุณบันทึกลิงค์นี้ไว้ เพื่อใช้ในการแชร์ไฟล์ในที่ๆคุณต้องการ

เพียงเท่านี้คุณก็สามารถสร้างรายได้จากเว็บ Ziddu แล้วครับ

>>>สมัครที่นี่<<<

[SEO] - auto ping blog กระตุ้นให้เรียก bot เข้ามาเก็บข้อมูลเรา

2014-04-21T00:58:00.002-07:00

การ ping blog ก็คือการกระตุ้นให้ บอทเข้ามาเก็บข้อมูลเราไง เหมือนกับการที่เราทำเครื่องหมายโบกมือเรียก บอทนั่่นเอง

การ Ping blog นั้นถ้าจะให้ดีควรที่จะ Ping blog อย่างมากก็วันล่ะ 1 ครั้งกำลังดี อย่าให้มากกว่านี้เพราะจะกลายเป็นการสแปม แทนที่ Bot จะมาเก็บข้อมูลกับกลายเป็นว่าเว็บไซต์ของเราจะโดนแบนเอาได้นะครับ ส่วน
ลองเอา blog ของตัวเองไป Ping blog ดูน่ะครับ แต่อย่า Ping Blog บ่อย ๆ นะ แนะนำว่าทำ บล็อกละครั้ง ต่อ 1 Web ping ก็พอ

รวม เว็บ Ping เรียก bots ให้ทำทุกวัน จะทำให้ได้รับการจัดอันดับจาก Google ที่ดี

http://sitesubmiturl.com/ping-site/

http://www.mypagerank.net/service_pingservice_index

http://www.squidutils.com/login.php

http://www.pingomatic.com/

http://www.pingmyblog.com/
http://www.autopinger.com/
http://www.feedshark.brainbliss.com/
http://www.pingates.com/index.php
http://www.ping.in/
http://www.autopinger.com/
http://www.pingler.com/
http://www.colorpack.net/ping-site-free.html
http://www.feedping.com/
http://www.pingomatic.com/
http://www.mypagerank.net/service_pingservice_index
http://www.pingoat.com/
http://www.squidutils.com/login.php
http://www.pingmyblog.com/
http://www.feedshark.brainbliss.com/
http://www.pingates.com/index.php
http://www.ping.in

สร้าง backlink Builder
http://expresslanka.blogspot.com/2012/04/free-2000-backlinks-submitter.html

2512 pages
http://www.2000backlink.com/

submit and ping your website in 350
http://turboseo.org/admin/backlinksubmitter

http://www.pingsubmit.com/auto-backlink/
http://www.scriptalicious.com/tools/backlink-builder/

http://backlinkworldyou.blogspot.com/p/website-submitter.html
http://www.backlinkdirect.com/backlinkbuilder/

High PageRank Backlinks
http://www.onewayseolinks.com

[SEO] - การ Submit Feed และ Submit Ping

2014-04-07T21:35:00.001-07:00

การ Submit Feed ในที่นี้ หมายถึงการ ส่ง feed บล็อกของเราไปยัง Feed directory ซึ่งเป็นแหล่งที่จะรวบรวม feed ที่ส่งมาจากแหล่งต่าง ๆ เช่น เว็บไซต์ หรือบล็อกของเราเป็นต้น โดยเราจะต้องเป็นผู้ลงทะเบียนให้มีการส่ง Feed ไปยัง Feed directory เหล่านั้นด้วยตัวเองเสียก่อน

การแพร่กระจาย feed ของเราด้วยวิธีนี้จะทำให้ SE พบข่าวสารจากบล็อกของเราง่ายขึ้นและยังทำให้ทราบทุกการ update บล็อกของเราเป็นระยะ ๆ ด้วย

ในทำนองเดียวกันการ Submit Ping ก็เป็นการส่งข่าวสารไปยังแหล่งต่าง ๆ ให้ Robot ของ SE ทราบว่าบล็อกของเรามีการ update แล้ว เข้ามาดูได้เลย (ประมาณว่าไม่ต้องรออีกหลายวัน ตามยะถากรรม)

เอาล่ะครับเมื่อเข้าใจ Concept การ Submit Feed และ Submit Ping แล้วมาลงมือทำกันเลยครับ

การ Submit Feed

การ Submit blog กับ Feedburner

ผมได้เคยกล่าวถึงไว้ในบทความนี้ >> Click หากท่านใดยังไม่ได้ทำก็ควรย้อนกลับไปทำให้เรียบร้อยเสียก่อน ๆ ที่จะดำเนินการโปรโมทบล็อกในขั้นอื่น ๆ ต่อไป

เหตุที่ต้องกล่าวถึง การ Submit blog กับ Feedburner ขึ้นมาอีกครั้งเพราะ การ Submit blog เข้าสู่ SE และ อื่นๆ ที่จะกล่าวตามมาจะทำได้สะดวกขึ้นหากเราได้ Submit Feed กับ Feedburner ไว้แล้วนันเองครับ

ตอนนี้เหมาว่าทุกคนมี feed ที่ได้ลงทะเบียนกับ Feedburner เรียบร้อยแล้วต่อไปผมจะกล่าวถึงการ Submit Feed เข้าสู่ SE อื่นๆ

ก่อนที่จะดูว่ามีแหล่ง Submit Feed ที่ใดบ้าง เราก็ควรจะเตรียม feed URL เอาไว้เพื่อให้ทำการ Submit ได้รวดเร็วขึ้น

เตรียมตัวก่อนการ Submit feed

เปิดโปรแกรม Notepad เตรียมเอาไว้ โดยไปที่ (คอมของคุณ) Start up >> All Program >> Accessories >> Notepad

แล้วเตรียมโค้ดเหล่านี้เอาไว้

โค้ด Atom Feed

http:// ชื่อบล็อก.blogspot.com/feeds/posts/default

โค้ด RSS Feed

http://ชื่อบล็อก.blogspot.com/feeds/posts/default?alt=rss

โค้ด Feedburner

http://feeds.feedburner.com/ Account ของคุณ

ถ้าหากเป็นไปได้การ Submit feed ควรจะใช้ feed จาก feedburner ในการ submit จะดีกว่าใช้ feed จาก Atom หรือ Rss โดยตรงเพราะหากใช้ Rss feed หรือ Atom feed ไป Submit มากเกินไปมันก็จะกิน Bandwidth ของคุณไปด้วย (มากน้อยก็แล้วแต่จำนวนที่ Submit)

แหล่งบริการ Submit Feed อื่นๆ นอกจาก Feedburner นั้นมีมากมายจน Submit กันทั้งวันก็ไม่หมด บางบริการปิดตัวไปแล้วก็มี ซึ่งจากการทดลองของผมก็เห็นว่ามีที่น่าสนใจดังนี้ครับ

(ให้แทนที่ hxxp ด้วย http )

hxxp://4guysfromrolla.aspin.com/func/addres/rss-review/userlist?rid=1427020&cob=4guysfromrolla
hxxp://www.5z5.com/Suggest-A-Feed/
hxxp://www.allheadlinenews.com/corp/submitnews/submitnewsform.shtml
hxxp://automotive-links.mustangv8.com/RSS-directory/RSS/l_op=Addrss.html
hxxp://www.cdrinfo.com/Sections/RSS/SubmitNews.aspx
hxxp://www.devasp.com/search/AddRSS.asp
hxxp://www.educational-feeds.com/submitrss.php
hxxp://www.feedagg.com/add_feed.php
hxxp://www.feedbase.net/Add.php
hxxp://www.rssfeeddirectory.org/submit-rss-feed/free.aspx
hxxp://www.feedest.com/feedAdd.cfm
hxxp://www.feedgy.com/Submit.aspx
hxxp://www.feedlisting.com/submit.php
hxxp://feedmil.com/addfeed.jsp
hxxp://www.feedplex.com/add-url.php?email=
hxxp://www.feedsee.com/submit.html
hxxp://feedsubmitter.com/
hxxp://www.feeds4all.nl/_NF.aspx
hxxp://feedshark.brainbliss.com/
hxxp://www.feedzie.com/submit.php
hxxp://www.finance-investing.com/submitrss.php
hxxp://www.goldenfeed.com/AddFeed.aspx
hxxp://www.icerocket.com/c?p=addblog
hxxp://www.jordomedia.com/RSS/l_op=Addrss.html
hxxp://www.leighrss.com/rss-add.html
hxxp://www.medical-feeds.com/submitrss.php
hxxp://www.metafeeder.com/suggest-feed.html
hxxp://www.millionrss.com/add-my-feed.php
hxxp://www.moneyhighstreet.com/feed_directory/add_url.php/
hxxp://msn.com/
hxxp://www.news-feeds.org/addfeed.php
hxxp://www.newsmaster.lv/newsmaster/catalogue/add/en
hxxp://www.newsnow.co.uk/contact/sources_add.html
hxxp://ngoid.sourceforge.net/sub_rss.php
hxxp://www.oobdoo.com/form.php
hxxp://www.paiddirectory.com/feeds/submitrss.php
hxxp://www.plazoo.com/en/addrss.asp
hxxp://www.political-humor.net/submitrss.php
hxxp://www.pressradar.com/suggest
hxxp://publisher.yahoo.com/rss_guide/submit.php
hxxp://rapidfeeds.com
hxxp://www.anse.de/rdfticker/addchannel.php
hxxp://www.readablog.com/AddFeed.aspx
hxxp://www.redtram.com/pages/addsource
hxxp://www.rss001.com
hxxp://www.rssbuffet.com/submit.php
hxxp://www.rssfeeds.com/suggest_wizzard.php
hxxp://www.rsshugger.com/register
hxxp://www.rssmicro.com/feedsubmit.web
hxxp://rssmountain.com/rss_directory.php
hxxp://www.rssmotron.com/feed_submission.php
hxxp://www.rss-network.com/submitrss.php
hxxp://rssroot.com/
hxxp://www.rss-spider.com/submit.php
hxxp://www.rsstop10.com/directory/rss-submit.php
hxxp://www.solarwarp.net/submitrss.php
hxxp://swoogle.umbc.edu/index.php?option=com_swoogle_service&service=submit
hxxp://www.twingly.com/ping?url= hxxp%3A%2F%2Fwww.toprankmarketing.com%2Fnewsroom%2Ffeed%2F
hxxp://www.urlfanx.com/search_not_found.php3?no_cache=1
hxxp://www.weblogalot.com/Ping
hxxp://publisher.yahoo.com/rss_guide/submit.php
hxxp://www.xmeta.net/users/

แหล่งรวมอื่นๆ มากมาย Submit กันไม่หวาดไม่ไหวครับ

hxxp://www.rss-specifications.com/rss-submission.htm
hxxp://www.masternewmedia.org/rss/top55/

และที่กล่าวมาก็ยังไม่หมดครับ ถ้าหากจะเอาให้หมดจริง ๆ ลองค้นจาก google โดยใช้ keyword “Submit Feed” อีกครั้งครับ

นอกจากนี้ยังมี Software สำหรับ Submit Feed โดยเฉพาะ หากใครสนใจลองแวะไปเยี่ยมชมเจ้าของผลิตภัณฑ์ที่

http://www.rssfeedssubmit.com/

การ Submit Ping

เว็บที่ให้บริการ Submit Ping ที่แนะนำมีดังนี้ครับ

(ให้แทนที่ hxxp ด้วย http )

hxxp://pingomatic.com/
hxxp://www.pingoat.com/
hxxp://www.icerocket.com/c?p=ping
hxxp://pingler.com/

แนะนำว่า Update บล็อกเมื่อไหร่ ก็ให้ Ping เมื่อนั้นเลยครับ รับรอง Bot มาทันทีครับ (แต่ถ้าไม่ได้ update อย่า Ping นะครับ)

ผมเองก็ลองแล้วครับ ตอนแรก bot ของ Google มาเก็บ แล้ววันที่ 28 /1/53 จากนั้นผมเขียนบทความวันที่ 31/1/53 แล้วทำการ Ping ไป 1 ครั้ง bot ก็มาเก็บไปวันที่ 31/1/53 ทันทีเลยครับ ดีจริง ๆ ครับ

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

ข้อมูลจาก: http://www.hackublog.com/2010/02/2-submit-feed-ping.html

[SEO] - FeedBurner คือ อะไร มาทำความรู้จักกันหน่อย

2014-04-07T21:30:00.001-07:00

FeedBurner คืออะไร?

FeedBurner เป็นบริการบริหารฟีดจัดการสำหรับเจ้าของเว็บไซต์หรือบล็อกซึ่งทางกูเกิ้ลได้เข้าซื้อกิจการเมื่อปี ค.ศ. 2007

RSS feed / สำคัญไฉน

โดยส่วนใหญ่เว็บไซต์ web 2.0 โดยทั่วไปจะมีการเก็บข้อมูลเว็บไซต์ในรูปแบบของ XML อยู่แล้ว หรือมักติดตั้งระบบฟีดมาด้วยในตัว เพื่อบริการไปถึงผู้ใช้งานโดยตรงอาจจะเป็นในแบบ RSS, ATOM RSS หรือ ATOM หรือจะยังไงก็แล้วแต่มันก็เป็นเทคโนโลยีเดียวกัน ซึ่งตรงนี้เราสามารถนำไปใช้งานกับ Feedburner ได้นั่นแหละ แต่ไม่ใช่ว่ามี แต่เจ้าเดียวเท่านั้นยังมีการให้บริการเช่นกันอย่างเช่นบริการของ Feedsky
อาจจะยังมองไม่เห็นภาพ สมมุติ เรามีคนประมาณ พันกว่าคน (เป็นเรื่องปกติของบล็อกต่างประเทศ) จะกินแบนด์วิธตรงนี้ไปมากเท่าใด (1,000 คน / วัน) แล้วมาดึงทราฟฟิคจากเว็บเราไปทำให้ทราฟฟิคของเว็บเราเปลืองอย่างแน่นอน แต่ถ้ามีวิธีการประหยัดทราฟฟิคและพลังงานของเซิร์ฟเวอร์เราได้ ก็จะดีใช่หรือเปล่า

เข้าไปยังเว็บไซต์ของ Feedburner กันเลยที่ www.feedburner.com จากนั้นให้พิมพ์ URL กรอกเว็บบล็อกของเราลงไปได้เลย (ไม่จำเป็นต้องบอกตำแหน่ง URL ของฟีด) จากนั้นคลิกถัดไปส่วนจะเลือก Podcaster ด้วยหรือไม่นั้นก็ต้องดูด้วยว่าบล็อกเราเนื้อหาเป็นแบบพอดคาสต์ด้วยหรือเปล่า

ข้อดีของ RSS

RSS จะแสดงข้อความใหม่จากบล็อกต้นฉบับทำให้เราไม่ต้องมานั่งเสียเวลาในการไล่อัพเดตเว็บที่เรารับผิดชอบทุกวัน สะดวก และประหยัดเวลาอย่างมาก

สัญลักษณ์

สังเกตรูปคลื่นสีเหลี่ยมสีส้มนั้นฟีดคือเป็นตัวช่วยส่งข่าวการอัพเดทใหม่ ๆ ๆ อยากจะติดตามข้อมูล ฟีดโดยใช้เครื่องมือช่วยฟีดอ่านเครื่องมือที่นิยมใช้กันเช่น Google Reader ส่วนเว็บของเรา ก็มีนะครับ

ขั้นตอนการสมัครและใช้บริการ FeedBurner

1. ไปที่ http://feedburner.google.com และใช้ accout เดียวกับ blogger หรือ gmail กรอกลงไปครับ (ไม่ต้องสมัครใหม่)

2. ให้กรอก URL ของบล็อกเราลงไป (ไม่จำเป็นต้องบอกตำแหน่งไปถึง URL ของฟีด)

จากนั้นคลิก Next ส่วนจะเลือก I am a Podcaster ด้วยหรือไม่นั้น ก็ต้องดูด้วยว่าบล็อกเรามี Content เป็น Podcast ด้วยหรือเปล่า ( คลิกข้อความนี้เพื่ออ่านความหมายของ Podcast )

3. ขั้นต่อมาเมื่อ feedburner ตรวจสอบพบ feed ของบล็อกเราแล้ว ก็จะถามว่าต้องการ ใช้ Feed แบบ Atom หรือ แบบ RSS จะเลือกแบบไหนก็ได้ครับ (การทำงานของ Atom และ RSS ก็เหมือนกันครับ RSS เกิดขึ้นมาก่อน Atom เท่านั้น แต่ google จะหนุนหลัง Atom มากกว่า RSS ) ในที่นี้ผมจะเลือก Atom

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

5. เมื่อตั้งชื่อในข้อ 4 เสร็จแล้ว เราจะได้รับข้อความตอบรับ และบอก URL Feed ของเรา เช่น ในที่นี้ URL ที่ผมได้ก็คือ http://feeds.feedburner.com/Hackublogger จากนั้นก็กด next ครับ

6. ถัดจากข้อ 5. เราก็จะพบกับหน้าต่างนี้ เป็นการตั้งค่าสถิติ ต่างๆ เช่น ดูว่ามีคน subscribed feed ของเรากี่ครั้ง/กี่คนเป็นต้น แนะนำว่าเอาแบบเดิมๆ นี่แหละครับ และกด next อีกทีครับ

7. เมื่อจบขั้นที่ 6 ก็ถือว่าเราได้สร้างตัวช่วยในการส่งออก feed ให้กับ blog อย่างเต็มอัตราแล้ว

8. ในขั้นนี้เป็นการตั้งค่า feed ให้ใช้งานได้ทุกสถานการณ์ โดยคลิกที่แถบ Optimize แล้วคลิกที่ SmartFeed ทางซ้ายมือเพื่อจะเปิดใช้งาน เพราะการเปิดการใช้งาน SmartFeed มีข้อดีคือรองรับทุก Feed Reader นั่นเอง >> สั่ง Activateได้เลยครับ

9. ต่อไปเป็นการเรียกเอา feed ที่สร้างไว้กับ feedburner ไปใช้งาน โดยให้คลิกที่แถบ Publicize และทำการ Activateเครื่องมือต่างๆ ตามขั้นตอนจากข้อ 9.1 ถึงข้อ 9.7 ครับ

เนื่องจากมีหลายเครื่องมือให้เราลงทะเบียน แต่ไม่จำเป็นต้องลงทะเบียนทุกตัว เลือกเอาที่สนใจนะครับ และในที่นี้ผมจะเลือกอธิบาย เครื่องมือ feed ที่สำคัญ ๆ เท่านั้นครับ

9.1 ตัวแรก Email Subscriptions ใช้ในกรณีที่อยากมีใครจะติดตามอ่านบล็อกเราผ่านอีเมล์ สั่ง Activate และ save ได้เลยครับผม

เมื่อสั่งให้มันทำงานแล้ว ก็ให้คัดลอกโค้ดไปวางในบล็อกโดย Add gadget ชนิด HTML/จาวาสคริปต์ >> วางโค้ดลงไปและบันทึก

โดยปกติแล้วโค้ดของ Email Subscriptions จะไม่มีรูปภาพ ถ้าใครอยากได้รูปภาพสวยๆ ไปใส่ให้ดูสวยงามขึ้นก็เอาจากผมไปได้เลยครับ

<center><img src="http://upic.me/i/xu/9feed.png"/></center>

ตัวอย่างเมื่อนำ Email Subscriptions มาใส่ในบล็อก

9.2 ตัวต่อมาก็มาเปิด Feedcount ซึ่งเป็นระบบนับจำนวนคนอ่านฟีดของเรา สั่ง Activate และ save

จากนั้นให้คัดลอกโค้ดมาแปะที่ blogger ในตำแหน่งที่ต้องการได้ เช่นเดียวกับข้อ 9.1

ระบบ FeedCount จะยังทำงานไม่ได้ ถ้าไม่เปิด Awareness API เสียก่อนนะครับ เพื่อให้ผู้ใช้ภายนอก สามารถเชื่อมโยงเพื่อดึงข้อมูลออกไปใช้งานได้ ดังนั้นทุกคนก็ต้องคลิกที่แถบ Awareness API แล้ว Activate และ save ไปด้วยเลยครับ

Trip : เราสามารถนำโค้ดของ Feedcount รวมกับ Email Subscriptions ได้เลยเพราะจะทำให้ไม่เปลืองเนื้อที่ของ sidebar มากนัก และเมื่อรวมโค้ด 9.1+9.2 มาแปะที่บล็อกเกอร์แล้วจะได้ผลงานดังนี้ครับ

Enter your e-mail:

9.3 ถึงขึ้นนี้เราก็ได้ลงทะเบียนใช้งาน Publicize ไป 3 ตัวแล้ว เหนื่อยไหมครับ…

ต่อไปเป็นการลงทะเบียน ใช้งาน Headline Animator ซึ่งเป็นเหมือนพาดหัวข่าวของบล็อก และมีจุดน่าสนใจคือ มันจะเวียนบทความในบล็อกของเราแบบวงกลมไปเรื่อยๆ ถ้าใครสนใจก็ตั้งค่าต่างๆ ตามความพอใจแล้วตั้งค่า add ไปยัง blogger ของเราครับ (ดูรูป)

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

9.4 ต่อไป BuzzBoost เป็นเครื่องมือที่ช่วยโปรโมทเว็บไซต์ หรือบล็อก ในกรณีที่คุณมีบล็อกหลายๆ บล็อก เพราะเครื่องมือนี้จะดึงเอา feed จากบล็อกหนึ่งให้ปรากฎยังอีกบล็อกหนึ่งได้ โดยอาศัยการทำงานของจาวาสคริปต์

ถ้าสนใจก็ตั้งค่า >> Activate >> คัดลอกเอา โค้ด ไปวางในบล็อกหรือเว็บไซต์อื่นๆ ที่ต้องการได้เลยครับ >> เสร็จแล้วก็อย่าลืม save ด้วยครับ

9.5 ตัวต่อมาก็คือ PingShot ก็เปิดใช้งานได้เลย ทุกๆครั้งที่ฟีดเราอัพเดต เจ้า FeedBurner ก็จะแจ้งให้ Search Engine ต่างๆได้ทราบและก็เข้ามาเก็บข้อมูลได้แล้ว ส่วนตัวแนะนำให้เปิดใช้งานครับ ไม่ต้องใช้ระบบ Auto Ping ให้ยาก ลำพังเจ้านี้ ก็ทำการปิงให้เสร็จสรรพ

9.6 ต่อไป (คนเขียนเริ่มเหนื่อยครับ) Socialize เครื่องมือนี้จะทำงานร่วมกับ twitter โดย จะส่ง update ของบล็อกเรา ผ่านทาง twitter ให้ด้วย(ดีจริงๆ) ถ้าหากจะใช้งานเครื่องมือนี้ ก็จะต้องมี account ของ twitter ก่อนนะครับ

9.7 Chicklet Chooser ใช้เพื่อทำการบอกให้รับรู้ว่าผู้ที่ต้องการรับ Feed จาก Blog ของเราสามารถเรียกใช้จากตัวนี้ได้เลยครับ

ถ้าสนใจก็คลิกเลือก Chicklet Chooser แล้วเลือกครับว่าจะต้องการมีปุ่มบอกรับแบบไหน
เมื่อเลือกได้แล้วก็ทำการ คัดลอกโค๊ดจากในช่อง "Copy the HTML below for use in your own page templates:" ไปวางใน templates ได้เลยครับ

10. ต่อไปเฉพาะผู้ที่สนใจทำรายได้ผ่านบล็อก กับ Google AdSense (ในกรณีที่มีคนเข้าชมบล็อกของคุณมากๆ) ก็ให้คลิกที่แถบ Monetize และ Login ด้วยบัญชีของ Google AdSense เพื่อตั้งค่า AdSense for feed ครับ

บทความนี้ยาวไปนิด เพราะอยากให้ละเอียด สุดท้ายก็หวังอย่างยิ่งว่าบทความนี้จะเป็นประโยชน์ต่อชาว blogger ทุกคนครับ

ที่มา:

http://www.itnews24hrs.com/2013/05/feedburner-คืออะไร

http://www.hackublog.com/2010/01/feedburner-feed.html

[SEO] - การทำ SEO สำหรับ Blogger

2014-04-02T19:19:00.002-07:00

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

SEO คืออะไร?

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

ยกตัวอย่างเช่น ถ้าบล็อกของคุณเขียนเกี่ยวกับเรื่อง อาหารไทย เมื่อผมค้นหาข้อมูลใน google โดยใช้คำค้นว่า “อาหารไทย” ผมก็ควรจะพบบล็อกของคุณก่อนใครนั่นคืออยู่อันดับที่ 1 ในการค้นหา หรือในกรณีมีคู่แข่งหรือปริมาณการค้นหาจำนวนมาก การติดอันดับ 1 ใน 10 ก็เพียงพอแล้ว

ทำไมต้อง Google ? ที่จริงแล้ว Search Engine ไม่ได้มีเพียง Google เท่านั้นยังมี Bing ,yahoo ,Ask ,Alexa ฯลฯ แต่ Google เป็นบริการที่มีคนใช้มากที่สุด ดังนั้นถ้าเราติดอันดับที่ 1 ในผลการค้นหาจาก Google.com ด้วยคำค้นที่นิยมได้ คนเข้าบล็อกก็จะเพิ่มขึ้นเป็นจำนวนมากอย่างที่คุณคาดไม่ถึง

ทำไมต้องทำ SEO ?

ถ้าคุณมีเงินทุนเป็นล้าน ๆ ก็อาจจะใช้การประชาสัมพันธ์บล็อกหรือเว็บไซต์ผ่านโฆษณา TV, วิทยุ , หนังสือพิมพ์ หรือป้ายโฆษณาขนาดใหญ่ ได้โดยไม่ต้องทำ SEO เลยสักนิด แต่เราคนธรรมดาอย่างผมหรืออย่างคุณเองก็เขียนเว็บไซต์/หรือเว็บบล็อกส่วนตัว ก็คงไม่มีต้นทุนขนาดนั้น จึงต้องใช้การทำ SEO เพื่อให้คนมาพบบล็อก/เว็บไซต์ของเราโดยคุณอาจจะไม่ต้องเสียเงินเลยสักบาท

การทำ SEO มีแนวทางอย่างไร?

ทุกวันนี้ SEO ยังเป็นศาสตร์ที่ต้องลองผิดลองถูกไปเรื่อย ๆ เพราะ Algorithm ของ Search Engine เปลี่ยนอยู่บ่อย ๆ เช่นกัน การทำ SEO จึงเป็นเรื่องที่ทำอย่างละเอียดอ่อน ต้องทำอย่างค่อยเป็นค่อยไป การลงมือทำจึงต้องใช้การเฝ้าสังเกตอย่างสม่ำเสมอ และต้องอดทนในการรอให้ผลลัพธ์เป็นไปตามที่ราคาดหวัง

แนวทางการทำ SEO สำหรับ Blogger

ในช่วงเวลาที่ผ่านมาประมาณ 9 เดือน ผมได้ทดลองทำ SEO กับ Blogger และก็ได้ผลเป็นที่น่าพอใจ แต่ก็ยังต้องพัฒนาฝีมืออีกมาก เพราะคนที่เก่งในเรื่องนี้เขามีกลยุทธ์กันหลากหลายรูปแบบมาก และเกิดจากการทดลองด้วยตนเองและลองผิดลองถูกกันเสียส่วนใหญ่

อย่างไรก็ตามการทำ SEO แบบพื้นฐานสามารถเริ่มต้นคล้าย ๆ กัน เมื่อคุณทำตามที่ผมได้แนะนำครบแล้วจะไปเพิ่มเติมอะไรก็ได้ตามใจชอบ และสิ่งที่ผมนำเสนอนั้นก็ไม่จำเป็นต้องทำตามทั้งหมด 100 % แต่ให้เลือกเอาที่คุณคิดว่าพอทำได้หรือเต็มใจที่จะทำเท่านั้น

ขั้นเตรียมการ

ขั้นที่ 1 ให้วางแผนการทำบล็อก และคิด Keyword ของการทำบล็อก

1.1 วางเป้าหมายให้ชัดเจนว่าจะทำบล็อกเกี่ยวกับเรื่องใด
1.2 เขียน Keyword ที่เกี่ยวข้องกับเรื่องที่วางเป้าหมายออกมาให้ได้อย่างน้อย 10 คำ และควรเป็นคำที่คนนิยมค้นหาใน Google ด้วย

ขั้นที่ 2 สร้างบล็อกให้โดเมนเป็นมิตรกับ SEO

โดยการตั้งชื่อโดเมนควรใส่ Keyword หลักลงไปด้วยซึ่งจะได้โดเมนของบล็อกดังนี้

http://ชื่อที่มี keyword.blogspot.com

ขั้นที่ 3 ปรับ Onpage SEO

Onpage SEO คือปรับแต่งองค์ประกอบภายในบล็อกเพื่อให้ Bot เข้าถึงข้อมูลในบล็อกได้ง่าย และเข้าใจข้อมูลในบล็อกของคุณได้ง่ายด้วย ซึ่งคุณควรศึกษาบทความต่าง ๆ ดังนี้

3.1 รู้จักกับ meta tag และติดตั้งลงใน blogger
3.2 วิธีการปรับแต่ง SEO Onpage บน Blogger ให้สมบูรณ์แบบ
3.3 พยายามติดตั้ง gadget เท่าที่จำเป็น และพยายามทำให้โหลดหน้าแรกของบล็อกได้เร็วที่สุดเท่าที่เป็นไปได้ เพราะการที่หน้าบล็อกโหลดได้ช้า จะแสดงให้เห็นถึงความเสถียรของบล็อกมีน้อย ทำให้คะแนน PR น้อย และ Bot เก็บข้อมูลบนหน้าได้น้อย ทำให้เราเสียโอกาส
3.4 พยายามเลือกแม่แบบที่บทความอยู่ซ้ายสุด เพราะ Bot จะเก็บข้อมูลจากซ้ายไปขวา
3.5 พยายามหลีกเลี่ยงลิงค์ออกเพราะจะทำให้ Bot วิ่งไปที่อื่นเร็วเกินไปและเสียคะแนน PR ด้วย

ขั้นที่ 4 การเขียนบทความให้ถูกหลัก SEO

การเขียนบทความแต่ละบทความให้ทำเช่นนี้กับทุกบทความ

4.1 การตั้งชื่อบทความแต่ละบทความควรให้มี keyword สอดแทรกเข้าไปทุกครั้งที่ทำได้ อย่าตั้งชื่อบทความแบบตามใจตัวเอง เพราะ Bot ของ Search Engine จะตีความ main idea ของบทความ และของบล็อกได้ยาก

4.2 คุณควรศึกษาเทคนิคการตั้งชื่อบทความให้ตั้งชื่อเป็นภาษาอังกฤษก่อนแล้วเปลี่ยนเป็นภาษาไทย จากบทความ วิธีทำให้ URL ของบทความใน Blogger เป็นมิตรกับ SEO เพื่อให้ URL ของแต่ละบทความดูมีความหมายมากขึ้นเป็นผลดีกับการทำ SEO มากขึ้น

4.3 อักษร 1000 ตัวแรกของบทความควรจะมี Keyword ยิ่งทำเป็นตัวหนาหรือทำเป็น Anchor text ยิ่งดี

4.4 ถ้าบทความนั้นคุณเขียนเกี่ยวกับเรื่อง อาหารไทย คำว่า อาหารไทยควรจะต้องกระจายอย่างหนาแน่นในบทความ เพื่อให้ bot ของ Search Engine เข้าใจว่าบทความนั้นเกี่ยวกับเรื่องใด

4.5 การเขียนบทความพยายามควรหลีกเลี่ยงลิงค์ออกไปภายนอก แต่ก็ใส่ได้บ้างเท่าที่จำเป็น

4.6 ถ้าในบทความมีการคัดลอกข้อความ หรือรูปมาจากที่อื่น ๆ ควรให้เครดิตกับแหล่งที่มาด้วย

4.7 ถ้าในบทความของคุณมีรูปภาพควรใส่โค้ด alt='keyword' ลงไปในโค้ดของรูปภาพด้วยเพราะ Bot

ของ Search Engine ไม่รู้จักรูปภาพ ดังนั้นถ้าเราใส่ keyword ลงไปก็จะได้ประโยชน์ในการทำให้ keyword มีอันดับในการ Index ดีขึ้นอีกด้วย

4.8 ถ้าในบทความมี Keyword หลักแทรกอยู่ให้พยายาม ทำ Keyword นั้นให้เป็น Link โดยลิงค์ไปยังบทความในบล็อกของเราที่เกี่ยวข้องกับคำนั้น ๆ เรียกการทำแบบนี้ว่า Link ภายใน

ขั้นที่ 5 Submit บทความกับ Social Bookmark หรือ Pligg

เมื่อเราเพิ่งสร้างบล็อกเสร็จแล้ว แน่นอนว่าข้อมูลบล็อกจะยังไม่ถูกเก็บข้อมูลไปจัดอันดับในผลการค้นหา หรือพุดกันง่าย ๆ ว่ายังไม่ index ดังนั้นเราต้องทำให้ bot ของ Search Engine มาพบบล็อกของเราให้ได้ ซึ่งทำได้ง่าย ๆ คือนำบล็อกไป Submit กับ Social Bookmark หรือ Pligg

เว็บจำพวก Social Bookmark หรือ Pligg จะมีการเพิ่มของข้อมูลอยู่แทบจะตลอดเวลา bot ของ Search Engine จะเข้ามาเก็บข้อมูลบ่อยมาก และเมื่อพบบทความที่เรานำไป Submit เอาไว้ Bot ก็จะวิ่งเข้ามาเก็บข้อมูลในบล็อกของเราอีกต่อหนึ่งทำให้ Search Engine นำบล็อกของเราไป index นั่นเอง

5.1 แหล่งบริการรับ Submit สามารถดูข้อมูลได้ที่บทความ >> การ Submit blog กับ Social Bookmark
5.2 ทุกครั้งที่เขียนบทความให้นำบทความไป Submit ทุกครั้ง
5.3 ควร Submit ให้ต่างเว็บกันจะได้ผลดีกว่า Submit อยู่ที่เดียวหลาย ๆ บทความ
5.4 ควรเลือก Submit กับ Social Bookmark หรือ Pligg ที่มีคะแนน PR สูง ๆ และให้ backlink แบบ Dofollow

ขั้นที่ 6 จะรู้ได้อย่างไรว่าบล็อกของคุณถูก index ไปแล้ว

6.1 ไปที่ Google.com หรือ Google.co.th ก็ได้แล้วพิมพ์ข้อความด้านล่างนี้ในช่องค้นหา

site : ชื่อบล็อกของคุณ.blogspot.com

ซึ่งถ้าพบผลลัพธ์บ้างแล้วก็แปลว่า index ไปแล้ว แต่!! การที่ index ไปแล้วไม่ได้แปลว่าผลการค้นหาจะดีหรือค้นเจอได้ง่าย อันดับในการ index จากการค้นหาด้วย Keyword ที่คุณต้องการอาจจะยังอยู่ในลำดับที่ 100,000 จาก 300,000 ก็ได้

6.2 วิธีตรวจว่าบล็อกของคุณถูก index ใน keyword ที่ต้องการหรือยัง ทำได้โดย
ไปที่ Google.com หรือ Google.co.th ก็ได้แล้วพิมพ์ข้อความด้านล่างนี้ในช่องค้นหา

Keyword site : ชื่อบล็อกของคุณ.blogspot.comสมมติถ้าต้องการตรวจว่า Keyword อาหารไทย ถูก index สำหรับบล็อกของคุณหรือยัง ก็พิมพ์ลงไปดังนี้

อาหารไทย site : ชื่อบล็อกของคุณ.blogspot.comถ้าพบผลลัพธ์บ้างแล้วแสดงว่าบล็อกของคุณถูก index ใน keyword ที่ต้องการแล้ว แต่อันดับอาจจะยังไม่ดี

6.3 ถ้าไม่พบผลลัพธ์จากการทำใน 6.2 ทำอย่างไร
ถ้ายังไม่ผลลัพธ์จากการทำใน 6.2 แปลว่าบล็อกคุณยังไม่ถูก index ให้เขียนบทความวันละ 1-2 บทความแล้วนำบทความไป Submit กับ Social Bookmark และ Pligg ตามที่ได้แนะนำไว้อย่างสม่ำเสมอ โดยการเขียนบทความควรเน้น keyword ตามที่ได้กล่าวไว้ในขั้นที่ 4

6.4 พยายามเช็คผลลัพธ์การเปลี่ยนแปลงว่า index เพิ่มขึ้นหรือไม่ อันดับในการ index ดีขึ้นหรือไม่

6.5 ขอแนะนำให้คุณเน้น keyword หลักในช่วงแรก ๆ 3-4 keyword เท่านั้น เพราะทำคราวเดียวหลาย ๆ คำอาจจะไม่ได้ผลดีเลยสักคำเดียว ซึ่งถ้า keyword ที่ต้องการติดหน้าแรกของ google แล้วก็หันมาดัน keyword คำอื่น ๆ โดยทำซ้ำขั้นตอนเดิม

ขั้นที่ 7 ทำ Sitemap ให้บล็อก

การทำ site map ให้บล็อกเหมือนกับการส่งโครงสร้างบล็อกให้ Search engine รู้จักแล้วเข้ามาเก็บข้อมูลได้ง่ายขึ้น ซึ่งควรทำหลังจากเขียนบทความคุณภาพ (เป็นบทความสดใหม่มีคุณภาพเนื้อหาไม่ซ้ำกับใครเลยยิ่งดี และมีความ density ด้วย) สัก 5 บทความ และควรนำบทความไป Submit ตามที่ได้แนะนำไปแล้ว

7.1 ให้ Submit Sitemap กับ Yahoo ,Bing ,Ask ,Alexa และที่อื่น ๆ ถ้าคุณรู้จักในทันทีที่ปรับแต่ง Onpage และเสร็จสิ้นแล้ว

7.2 ให้ Submit Sitemap กับ Google เมื่อมีบทความที่เน้นคุณภาพอย่างน้อย ๆ 5 บทความ เพราะเมื่อนำไป Submit เราก็จะถูกประเมินให้มีคุณภาพสูง ยิ่งถ้าปรับแต่ง Onpage ได้ถูกหลักแล้วภายหลังจาก Approve (ด้วยคน) แล้วอันดับจะขึ้นมาได้สูงมาก และจะเหนื่อยทำ SEO ได้ไม่ยากเลย

ขั้นที่ 8 ติดตั้งตัวนับสถิติในบล็อก

หัวใจของการทำ SEO ที่สำคัญอันหนึ่งคือการเฝ้าสังเกต ซึ่งสำหรับ Blogger รุ่นใหม่ ๆ นับว่าโชคดีมากเพราะว่า Blogger ได้ผูกเครื่องมือในการนับสถิติจาก Google Analysis ทำให้คุณสามารถรู้ว่ามีคนเข้าชมบล็อกของคุณกี่คน มาจากที่ใดบ้าง ใช้เวลากี่นาทีบนบล็อกของคุณ หน้าใดถูกเปิดอ่านมากที่สุด คำค้นใดถูกค้นมายังบล็อกคุณมากที่สุด

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

คุณอาจจะใช้บริการการนับสถิติตด้วยบริการต่อไปนี้
8.1 Gadget นับสถิติคนเข้าชมบล็อกด้วย Histats
8.2 นับจำนวนคนเยี่ยมชมด้วย Flagcounter
8.3 ติดตั้งโค้ดของ Google Analytic บนบล็อกของคุณซึ่งสามารถใช้งานได้ที่ >> http://www.google.com/analytics

ขั้นที่ 9 สมัคร feedburner

ขั้นต่อมาเราจะต้องใช้ บริการของ feedburner เพื่อเป็นเครื่องมือในการแพร่กระจายข่าวสารจากบล็อกของเราไปสู่แหล่งอื่น ๆ และยังใช้ช่วยในการ Submit บล็อกได้ด้วยคุณสามารถอ่านข้อมูลเรื่องฟีดและขั้นตอนการสมัครจากบทความต่อไปนี้
9.1 ทำความรู้จักกับ Feed ใน Blogger
9.2 FeedBurner ตัวช่วยให้ Feed แรง!!!

ขั้นที่ 10 เพิ่ม backlink ให้กับบล็อกของคุณ

นอกจากการสร้าง backlink จากการ Submit บล็อกกับ Social Bookmark หรือ Pligg แล้วยังมีวิธีอื่นที่น่าสนใจและควรทำดังนี้

10.1 สมัครเป็นสมาชิกเว็บบอร์ดหรือ Forum และศึกษากฎระเบียบของเขาให้ชัดเจนว่ากติกาเป็นอย่างไร จากนั้นให้ใส่ URL บล็อกของคุณใน Profile ใส่ลิงค์ในลายเซ็นใน forum (ควรใส่แบบ anchor text) โปรโมทลิงค์ในส่วนที่อนุญาตให้โปรโมทได้ และตอบกระทู้ที่เกี่ยวข้องกับเรื่องราวบนบล็อกของคุณ

10.2 ไป Comment ในเว็บไซต์ดัง ๆ ที่เกี่ยวกับเรื่องที่คุณเขียน แต่อย่า spam ในเว็บคนอื่น และอย่าวางลิงค์บล็อกของตัวเองอย่างเดียว

10.3 ไปเข้าร่วมกับ Blog Directory ศึกษาได้จากบทความ >> Submit Blog to Blog directory
10.4 ใช้ twitter โดย ทุกครั้งที่เขียนบทความให้ tweet และใส่ URL ของบทความ + Hashtag ที่เป็น keyword ของบล็อกทุกครั้งที่เขียนบทความ ดูตัวอย่าง tweet ของผมที่ติดในบล็อกนี้ก็ได้
10.5 .ใช้งาน http://identi.ca โดย Login ด้วย Twitter id และทำเช่นเดียวกับ 9.4

ถ้าทำได้ตาม 10.1 –10.5 คุณจะได้ backlink มาเพิ่มอีกมากทีเดียว

ขั้นที่ 11 ใช้ Social Network ในการโปรโมท และเพิ่ม Traffic ให้บล็อก

11.1 สมัครใช้งาน facebook และติดตั้ง Like box บน Blogger เพื่อขยายกลุ่มผู้อ่าน

11.2 สมัครใช้งาน MySpace ,Twitter และใช้โปรโมทคล้าย ๆ กับ 10.1

ขั้นที่ 12 เพิ่มคุณภาพเนื้อหาในบล็อก

การทำ SEO ให้ความสำคัญกับเรื่อง Link ก็จริง แต่อย่างไรก็ตามเนื้อหาในบล็อกนั้นถือว่าสำคัญที่สุด ถ้าคนเข้ามาพบบล็อกของคุณมาก ๆ แต่เนื้อหาในบล็อกไม่น่าสนใจหรือไม่แตกต่างจากที่อื่น ๆ เลย ก็คงจะยากที่เขาจะกลับมาอีก ดังนั้นคุณควรเขียนเนื่อหาที่เจาะลึกในเรื่องใดเรื่องหนึ่งมากกว่าจะเขียนตามกระแส แล้วบล็อกคุณจะโด่งดังคับประเทศเลยทีเดียว

ขั้นที่ 13 สร้าง backlink ที่แข็งแกร่ง

ปัจจุบันมีวิธีการสร้าง Backlink ที่แข็งแกร่ง ซึ่งได้ผลมากกว่า backlink แบบปกติหลายเท่า มีความยืดหยุ่นสามารถดัดแปลงได้หลากหลายรูปแบบ เรียก Backlink ชนิดนี้ว่า Link Wheel ซึ่งจะเขียนบทความให้ได้อ่านกันในบทความถัดไปครับ

ขั้นที่ 14 พัฒนาวิธีทำ SEO ตามแบบฉบับของคุณเอง

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

หมั่นศึกษาและให้ทำอย่างค่อยเป็นค่อยไป อย่าไปหักโหมทำเอาวันเดียวนะครับ และสุดท้ายหวังว่าบทความนี้คงเป็นประโยชน์กับ Blogger ทุกคนครับ

ขอบคุณบทความดีๆจาก http://www.hackublog.com/2010/07/roadmap-seo-blogger.html

แต่งบล็อก

เช็คความเร็วเว็บไซต์กับ Google PageSpeed

เช็คความเร็วเว็บไซต์กับ Google PageSpeed

[Template] : TubeMag Responsive

TubeMag Responsive

TubeMag Responsive Blogger Template

[Template] : Sora Red Responsive

[Template] : Sora Red Responsive

Sora Red Responsive Blogger Template

[jQuery] - Content Spoiler การซ่อน/แสดงเนื้อหา บางส่วนใน Blogger ด้วยjQuery toggle

วิธีสร้าง jQuery toggle เพื่อใช้ในการซ่อน/แสดงเนื้อหา

DEMO 1

DEMO 2

DEMO 3

[jQuery] - featured slider hover Automatic post

ขั้นตอนการติดตั้ง

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ขั้นที่ 2 ติดตั้ง Javascript (jQuery)

ขั้นที่ 3 ติดตั้ง HTML ตำแหน่ง slideshow ที่ต้องการแสดง

[SEO] - วิธีทำให้ผลเสิร์ชเว็บใน Google โชว์ภาพหน้าของเรา (Google Authorship)

รู้จักกับ GOOGLE AUTHORSHIP

ขั้นตอนการติดตั้งและเริ่มใช้ GOOGLE AUTHORSHIP

ทดสอบ Sticky Tooltip script

[jQuery] - สร้าง bubble popup ด้วย CSS3

ขั้นตอนการติดตั้ง bubble popup css3

ขั้นที่ 1 ติดตั้ง CSS

ขั้นที่ 2 ติดตั้ง HTML

[jQuery] - แบบเจ๋งๆ Hover Responsive Portfolio Gallery with Jquery

ขั้นตอนการติดตั้ง Responsive Portfolio Gallery with Jquery

ขั้นที่ 4 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

ตัวอย่าง

New Year 2013

lifestyle

Models

Fashion

Asean life

Asean life

Asean life

Asean life

Asean life

[SEO] - รู้ทำความรู้จักกับ meta tag และติดตั้งลงใน blogger

Title Element - Page Titles (มีผลกับการทำ SEO มาก)

Meta Description Tag (มีผลกับการทำ SEO ปานกลาง)

Meta Keywords Tag (มีผลกับการทำ SEO ปานกลาง)

Meta author Tag (มีผลกับการทำ SEO น้อย)

Meta copyright Tag (มีผลกับการทำ SEO น้อย)

Meta Language Tag (มีผลกับการทำ SEO มาก)

Meta Content Type Tag (มีผลกับการทำ SEO มาก)

Meta Revisit-After Tag (มีผลกับการทำ SEO ปานกลาง)

Meta Robots Tag (มีผลกับการทำ SEO มาก)

Meta Distribution Tag เป็น Tag (มีผลกับการทำ SEO มาก)

[Template] : X10 Masonry Red

[Template] : Modern Mag Responsive

Modern Mag Responsive Blogger Template

วิธีทำ On-Page SEO อย่างไรถึงจะเรียกว่าสมบูรณ์แบบ

ปัจจัย Onpage SEO เพิ่มเติมจาก Info Graphic

[Blogger tips] - วิธีสมัคร Blogspot หรือ Blogger สำหรับมือใหม่ ง่ายๆ และ ฟรี

[Blogger tips] - Blogger คืออะไร ?

Blogger คืออะไร

[Blogger tips] - How to Embed JW Player in Blogger วิธีติดตั้ง JW Player ใน Blogger

How to Embed JW Player in Blogger to Play Flash/ MP4/ FLV Videos?วิธีติดตั้ง JW Player ใน Blogger

ขั้นตอนการติดตั้ง

ขั้นที่ 1 ติดตั้ง Javascript (jQuery)

ขั้นที่ 3 ติดตั้ง HTML แสดง JW Player

[jQuery]:Animated Zoom With Caption Effect

ขั้นตอนการติดตั้ง

ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ

ขั้นที่ 2 ติดตั้ง HTML รูปภาพที่ต้องการแสดง

ตัวอย่าง

[SEO] - ปัจจัยง่ายๆเกี่ยวกับ SEO ที่นักพัฒนาเวปไซท์มักจะมองข้ามไป

[SEO] - ข้อห้าม 10 อย่าง ในการทำ SEO

[SEO] - Google Dance คืออะไร มาทำความรู้จักกันหน่อย

[MAKE MONEY] - ฝากไฟล์ได้เงิน กับ ziddu

ข้อดีของ Ziddu

ข้อเสียของ Ziddu

อื่นๆเกี่ยวกับ Ziddu

วิธีการสมัครหาเงินกับ Ziddu

[SEO] - auto ping blog กระตุ้นให้เรียก bot เข้ามาเก็บข้อมูลเรา

[SEO] - การ Submit Feed และ Submit Ping

การ Submit Feed

How to Embed JW Player in Blogger to Play Flash/ MP4/ FLV Videos?
วิธีติดตั้ง JW Player ใน Blogger