Thêm bài viết liên quan thế nào thì mới chính xác và tốt cho seo

Thêm tiêu đề của các bài viết liên quan theo label vào bài viết rất tốt và quan trọng. Tác dụng của việc thêm bài viết liên quan ngoài cách ...

Thêm tiêu đề của các bài viết liên quan theo label vào bài viết rất tốt và quan trọng. Tác dụng của việc thêm bài viết liên quan ngoài cách sắp xếp đẹp cho bố cục bài viết nó còn giúp tăng độ tương tác bài viết giúp giữ chân người đọc lâu hơn.

Nếu đã đề cập đến bài viết liên quan thì nó phải xuất hiện trong bài viết và liên quan trực tiếp đến label, dựa vào label gọi dữ liệu sắp xếp thành các tiêu đề bài viết mà bố cục có thể đơn giản chỉ bao gồm tiêu đề hoặc tiêu đề cộng với hình ảnh. Tác dụng của việc thêm bài viết liên quan theo label dạng này ngoài cách sắp xếp đẹp cho bố cục bài viết nó còn giúp tăng độ tương tác bài viết.

Thông thường khi soạn bài viết chúng ta vẫn thêm label phân cấp có từ 2 label trở lên như vậy chúng ta có thể kết hợp thêm hai dạng bài viết liên quan trong đó một dạng dựa vào điều kiện label cuối và một dạng điều kiện gọi tất cả label.
Với điều kiện gọi dữ liệu label cuối chúng ta nên đặt bài viết liên quan ngay dưới tiêu đề hoặc dưới mô tả bài biết ví dụ như hình demo bên dưới

Còn với điều kiện gọi dữ liệu tất cả label có trong bài viết chúng ta đặt dưới chân bài, ví dụ

Cụ thể khi soạn bài viết mình thêm label có tên Chơi Blog, Seo, Seo label thì 3 bài viết liên quan bên dưới mô tả sẽ lấy dữ liệu từ label cuối có tên Seo label, còn 6 bài viết có hình ảnh dưới chân lấy dữ liệu từ 3 label Chơi Blog, Seo, Seo label và các bài viết được lấy hoàn toàn sắp xếp ngẫu nhiên.

Để gọi được dữ liệu thành bài viết liên quan cần sử dụng đến javascript bắt buộc còn css bạn có thể chỉnh theo ý thích. Sau đây là hướng dẫn cách thêm bài viết liên quan vào bài viết

Đầu tiên bạn chèn đoạn css và javascript sau trước thẻ </head>

<b:if cond='data:view.isPost'>
<style type='text/css'>
.related-post{padding:15px 0}
.related-post li{line-height:1.6em;margin:0 20px;list-style-type:disc}
.related-post a{font:15px Roboto,sans-serif;color:#333;line-height:1.6em;transition:all .3s ease-out 0s}
.related-post a:hover,#related-title a:hover{color:#333}
#related-posts{float:left;width:100%;margin:15px 0}
#related-posts a{width:33.3%;height:240px;padding:10px 13px 0;color:#333}
#related-posts .related_img{width:100%;height:165px;float: left;overflow: hidden;margin-bottom:10px}
#related-title{float:left;width:100%;font: bold 16px Roboto,sans-serif;-webkit-line-clamp:2;line-height:1.6em;-webkit-box-orient: vertical;overflow:hidden;text-overflow:ellipsis;display:-webkit-box}
#related-posts h4{padding:10px;color:#333;font:bold 20px Roboto,sans-serif;text-align:center;text-transform:uppercase}
@media screen and (max-width:1366px){#related-posts a{height:215px}#related-posts .related_img{height:135px}}
@media screen and (max-width:960px){#related-posts a{height:190px}#related-posts .related_img{height:125px}}
@media screen and (max-width:600px){#related-posts a{height:160px}#related-posts .related_img{height:115px}}
@media screen and (max-width:500px){#related-posts a{height:185px}#related-posts .related_img{height:90px}}
@media screen and (max-width:414px){#related-posts a{width:100%;height:100%}#related-posts .related_img{height:90px;width:41%;padding-right:15px}#related-title{float:none;width:auto;-webkit-line-clamp:3}}
@media screen and (max-width:375px){#related-posts .related_img{height:80px}}
@media screen and (max-width:320px){#related-posts .related_img{height:70px}}
</style>
<script>
//<![CDATA[
//Related Posts with thumb
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try {
thumburl[relatedTitlesNum] = entry.gform_foot.url
} catch (error) {
s = entry.content.$t;
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 != "")) {
thumburl[relatedTitlesNum] = d
} else thumburl[relatedTitlesNum] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYE9r3n7Ih5Aua2Z8RenVJrAlcrO9vAvHETmvXohX66XgI54dFR_nzYlNG767n_9ziDhSNFDlG-R8HsXD02S8irygDsQwa8P39UiFR6BfujDX44kd6OqTedK98dfvGXWa0w_FlAD6CmZaw/s1600/no-thumbnail.png'
}
if (relatedTitles[relatedTitlesNum].length > 35) relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 100) + "";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for (var i = 0; i < relatedUrls.length; i++) {
if (!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i]
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl = tmp3
}
function contains_thumbs(a, e) {
for (var j = 0; j < a.length; j++)
if (a[j] == e) return true;
return false
}
function printRelatedLabels_thumbs() {
for (var i = 0; i < relatedUrls.length; i++) {
if ((relatedUrls[i] == currentposturl) || (!(relatedTitles[i]))) {
relatedUrls.splice(i, 1);
relatedTitles.splice(i, 1);
thumburl.splice(i, 1);
i--
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if (relatedTitles.length > 0);
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i < maxresults) {
document.write('<a style="text-decoration:none;float:left');
if (i != 0) document.write('"');
else document.write('"');
document.write(' title="' + relatedTitles[r] + '" href="' + relatedUrls[r] + '"><img class="related_img" alt="' + relatedTitles[r] + '" src="' + thumburl[r] + '"/><div id="related-title">' + relatedTitles[r] + '</div></a>');
if (r < relatedTitles.length - 1) {
r++
} else {
r = 0
}
i++
}
document.write('</div>');
relatedUrls.splice(0, relatedUrls.length);
thumburl.splice(0, thumburl.length);
relatedTitles.splice(0, relatedTitles.length)
}
//Related Posts
var randomRelatedIndex, showRelatedPost;
! function(t, e, a) {
var l = {
widgetTitle: "",
homePage: "/",
numPosts: 3,
callBack: function() {}
};
for (var s in relatedPostConfig) l[s] = "undefined" == relatedPostConfig[s] ? l[s] : relatedPostConfig[s];
var i = function(t) {
var l = e.createElement("script");
l.type = "text/javascript", l.src = t, a.appendChild(l)
},
r = function(t) {
var e, a, l = t.length;
if (0 === l) return !1;
for (; --l;) e = Math.floor(Math.random() * (l + 1)), a = t[l], t[l] = t[e], t[e] = a;
return t
},
n = "object" == typeof labelArray && labelArray.length > 0 ? "/-/" + r(labelArray)[0] : "";
randomRelatedIndex = function(t) {
var e, a, s = t.feed.openSearch$totalResults.$t - l.numPosts,
r = (e = 1, a = s > 0 ? s : 1, Math.floor(Math.random() * (a - e + 1)) + e);
i(l.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + n + "?alt=json-in-script&orderby=updated&start-index=" + r + "&max-results=" + l.numPosts + "&callback=showRelatedPost")
}, showRelatedPost = function(t) {
var e, a, s, i, n, m = document.getElementById(l.containerId),
o = r(t.feed.entry),
d = l.widgetStyle,
h = l.widgetTitle + '<ul class="related-post-style-' + d + '">',
c = l.newTabLink ? ' target="_blank"' : "",
p = '<span style="display:block;clear:both;"></span>';
if (m) {
for (var u = 0; u < l.numPosts && u != o.length; u++) {
a = o[u].title.$t, s = "auto" !== l.titleLength && l.titleLength < a.length ? a.substring(0, l.titleLength) + "&hellip;" : a, i = "media$thumbnail" in o[u] && !1 !== l.thumbnailSize ? o[u].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/, "/s" + l.thumbnailSize + "-c") : l.noImage, n = "summary" in o[u] && l.summaryLength > 0 ? o[u].summary.$t.replace(/<br ?\/?>/g, " ").replace(/<.*?>/g, "").replace(/[<>]/g, "").substring(0, l.summaryLength) + "&hellip;" : "";
for (var g = 0, b = o[u].link.length; g < b; g++) e = "alternate" == o[u].link[g].rel ? o[u].link[g].href : "#";
h += 2 == d ? '<li><img alt="" class="related-post-item-thumbnail" src="' + i + '" width="' + l.thumbnailSize + '" height="' + l.thumbnailSize + '"><a class="related-post-item-title" title="' + a + '" href="' + e + '"' + c + ">" + s + '</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + n + '</span> <a href="' + e + '" class="related-post-item-more"' + c + ">" + l.moreText + "</a></span>" + p + "</li>" : 3 == d || 4 == d ? '<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="' + e + '"' + c + '><img alt="" class="related-post-item-thumbnail" src="' + i + '" width="' + l.thumbnailSize + '" height="' + l.thumbnailSize + '"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="' + a + '" href="' + e + '"' + c + ">" + s + "</a></div>" + p + "</li>" : 5 == d ? '<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="' + e + '" title="' + a + '"' + c + '><img alt="" class="related-post-item-thumbnail" src="' + i + '" width="' + l.thumbnailSize + '" height="' + l.thumbnailSize + '"><span class="related-post-item-tooltip">' + s + "</span></a>" + p + "</li>" : 6 == d ? '<li><a class="related-post-item-title" title="' + a + '" href="' + e + '"' + c + ">" + s + '</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="' + i + '" width="' + l.thumbnailSize + '" height="' + l.thumbnailSize + '"><span class="related-post-item-summary"><span class="related-post-item-summary-text">' + n + "</span></span>" + p + "</div></li>" : '<li><a title="' + a + '" href="' + e + '"' + c + ">" + s + "</a></li>"
}
m.innerHTML = h += "</ul>" + p, l.callBack()
}
}, i(l.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + n + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
}(window, document, document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

Đoạn javscript ở trên yêu cầu cần phải có thư viện jquery chèn trước nó phần này thì theme nào có sử dụng js đều có link jquery cả chỉ trừ template AMP. Tiếp theo bạn chọn mở rộng đoạn <b:includable id='post' var='post'>...</b:includable>, với bài viết liên quan cho label cuối dưới tiêu đề của bài viết bạn chèn đoạn mã sau:

<b:if cond='data:view.isPost'>
<div id='related-post' class='related-post'>
<script>
var labelArray = [<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'>&quot;<data:label.name/>&quot;</b:if></b:loop>];
var relatedPostConfig = {
homePage: &quot;/&quot;,  
numPosts: 3,
containerId: &quot;related-post&quot;,
callBack: function() {}
};
</script>
</div>
</b:if>

Còn bài viết liên quan đến tất cả label thì chèn dưới chân bài thường là dưới

<b:if cond='data:view.isPost'>
<div id='related-posts'>
<h4>BÀI CÙNG CHUYÊN MỤC</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' />
</b:loop>
<script>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
printRelatedLabels_thumbs();
</script>
</div>
</b:if>

Lưu template lại sau đó truy cập một bài viết chỉnh sửa lại css cho phù hợp với bố cục bài viết.

Link bài viết gốctại đây

Share Tool Nhỏ

Thêm bài viết liên quan thế nào thì mới chính xác và tốt cho seo | Chia sẻ tool