Bạn muốn bài viết Blogger của mình nổi bật trên Google với những ngôi sao đánh giá lấp lánh? ⭐⭐⭐⭐⭐ Bạn muốn thu thập phản hồi realtime từ độc giả nhưng loay hoay vì schema đánh giá sao không được Google nhận diện? Đừng lo lắng! Trong bài viết này, TruongDevs sẽ hướng dẫn bạn từ A đến Z cách tạo đánh giá sao cho Blogger bằng Firebase, kết hợp với sức mạnh của Cloud Function để tối ưu hiển thị sao trên Google (rich snippets) một cách hiệu quả và chuẩn SEO nhất.
Việc tích hợp đánh giá động và đảm bảo Googlebot đọc được schema là một thách thức lớn. Googlebot thường chỉ quét HTML tĩnh và không đợi JavaScript kết nối Firebase xong. Giải pháp chúng ta sẽ thực hiện bằng cách sử dụng Cloud Function để tạo file cache, đây là phương pháp tối ưu nhất hiện nay để giải quyết vấn đề này, đảm bảo Google thấy được dữ liệu đánh giá gần như thật ngay lập tức.
Hãy cùng bắt tay vào làm nhé!
Tại sao cần dùng Cloud Function & Cache cho đánh giá sao Blogger?
Nhiều hướng dẫn tạo sao đánh giá Blogger chỉ dừng lại ở việc dùng JavaScript kết nối trực tiếp Firebase. Cách này hoạt động tốt cho người dùng, nhưng thường thất bại với Google vì:
- Googlebot quét nhanh: Nó đọc HTML gốc trước khi JavaScript kịp chạy và lấy dữ liệu từ Firebase.
- Firebase bị chặn: File
robots.txtcủa Firebase có thể chặn Googlebot truy cập trực tiếp để lấy dữ liệu.
Giải pháp Cloud Function + Cache khắc phục điều này:
- Cloud Function (Trợ lý ảo): Tự động tổng hợp dữ liệu rating từ Firebase Realtime Database và lưu vào một file cache (ví dụ:
ratings_cache.json) trên Firebase Storage. - JavaScript trên Blogger: Thay vì kết nối Firebase trực tiếp (chậm), nó chỉ cần tải file cache (nhanh) và tạo schema JSON-LD ngay lập tức.
Kết quả: Googlebot đọc được schema với dữ liệu gần như thật ngay trong lần quét đầu tiên, tăng tối đa khả năng hiển thị sao trên Google.
Chuẩn bị cần thiết
Trước khi bắt đầu tạo đánh giá sao cho Blogger, bạn cần:
- Kiến thức cơ bản về chỉnh sửa theme Blogger (HTML/CSS/JS).
- Tài khoản Google.
- Node.js và npm cài đặt trên máy tính (Tải tại nodejs.org).
- Firebase CLI: Cài bằng Command Prompt/PowerShell:
npm install -g firebase-tools- Google Cloud SDK (gcloud CLI): Cài đặt theo hướng dẫn tại đây.
Thiết lập Firebase Realtime Database
Tạo dự án Firebase
1. Truy cập Firebase Console.
2. Nhấn “Create a New Firebase project” và làm theo hướng dẫn để tạo dự án mới (ví dụ: myblog-ratings).
Tạo Realtime Database
- Trong menu dự án, chọn Build → Realtime Database.
- Nhấn “Create Database”.
- Chọn vị trí (ví dụ:
asia-southeast1).
- Chọn “Start in locked mode“. Nhấn “Enable”.
Lấy Firebase Config
- Nhấn biểu tượng bánh răng → Project settings.
- Tab General → Kéo xuống Your apps → Nhấp biểu tượng Web (</>).
- Đặt tên app (ví dụ:
Blogger Rating App) → “Register app”. - Sao chép lại đối tượng
firebaseConfig. Bạn sẽ cần dùng nó sau. - Nhấn “Continue to console”.
Thêm giao diện và JavaScript vào Blogger
Thêm HTML vào Theme
1. Vào Chủ đề → Chỉnh sửa HTML.
2. Tìm vị trí muốn hiển thị đánh giá (thường trong <div class='post-body'>).
3. Dán code HTML:
<b:if cond='data:view.isPost'>
<div class='truongdevs-rating-section' expr:data-post-id='data:post.id'>
<div class='truongdevs-rating-area'>
<div class='truongdevs-rating-average'>
<span id='truongdevs-avg-score'>0.0</span><small>/5.0</small>
</div>
<div class='truongdevs-rating-stars' id='truongdevs-rating-stars'>
</div>
<div class='truongdevs-rating-total'><span id='truongdevs-total-rating-count'>0</span> ratings</div>
<div class='truongdevs-rating-caption truongdevs-hidden'>
<p>Cảm ơn bạn đã đánh giá!</p>
</div>
</div>
<div class='truongdevs-rating-breakdown'>
<div class='truongdevs-rating-progress' data-rate='5'>
<span class='truongdevs-rating-grade'>5</span>
<div class='truongdevs-rating-bar'><div class='truongdevs-rating-bar-fill' style='width: 0%;'/></div>
<span class='truongdevs-rating-votes'><span class='truongdevs-rating-votes-count'>0</span> votes</span>
</div>
<div class='truongdevs-rating-progress' data-rate='4'>
<span class='truongdevs-rating-grade'>4</span>
<div class='truongdevs-rating-bar'><div class='truongdevs-rating-bar-fill' style='width: 0%;'/></div>
<span class='truongdevs-rating-votes'><span class='truongdevs-rating-votes-count'>0</span> votes</span>
</div>
<div class='truongdevs-rating-progress' data-rate='3'>
<span class='truongdevs-rating-grade'>3</span>
<div class='truongdevs-rating-bar'><div class='truongdevs-rating-bar-fill' style='width: 0%;'/></div>
<span class='truongdevs-rating-votes'><span class='truongdevs-rating-votes-count'>0</span> votes</span>
</div>
<div class='truongdevs-rating-progress' data-rate='2'>
<span class='truongdevs-rating-grade'>2</span>
<div class='truongdevs-rating-bar'><div class='truongdevs-rating-bar-fill' style='width: 0%;'/></div>
<span class='truongdevs-rating-votes'><span class='truongdevs-rating-votes-count'>0</span> votes</span>
</div>
<div class='truongdevs-rating-progress' data-rate='1'>
<span class='truongdevs-rating-grade'>1</span>
<div class='truongdevs-rating-bar'><div class='truongdevs-rating-bar-fill' style='width: 0%;'/></div>
<span class='truongdevs-rating-votes'><span class='truongdevs-rating-votes-count'>0</span> votes</span>
</div>
</div>
</div>
</b:if>Thêm CSS
Thêm đoạn CSS sau vào khu vực CSS tùy chỉnh của theme:
/* --- CSS CHO PHẦN ĐÁNH GIÁ --- */
.truongdevs-rating-section{display:flex;align-items:center;flex-wrap:wrap;position:relative;width:100%;margin-top:35px;padding-top:35px;padding-bottom:35px;margin-bottom:35px;}
.truongdevs-rating-section::before,.truongdevs-rating-section::after{content:'';position:absolute;left:0;width:100%;height:10px;background-image:radial-gradient(circle at 1px 1px,$(border) 1px,transparent 0);background-size:5px 5px;opacity:0.5;}
.truongdevs-rating-section::before{top:0;}
.truongdevs-rating-section::after{bottom:0;}
.truongdevs-rating-area{width:35%;text-align:center;padding-right:30px;margin-right:30px;border-right:1px solid $(border);box-sizing:border-box;}
.truongdevs-rating-average{font-weight:700;color:$(text.color);line-height:1;margin-bottom:10px;}
#truongdevs-avg-score{font-size:48px;}
#truongdevs-avg-score+small{font-size:20px;font-weight:500;color:$(meta.color);}
.truongdevs-rating-stars{display:flex;gap:4px;justify-content:center;margin:15px 0 10px;}
.truongdevs-rating-stars svg{width:32px;height:32px;cursor:pointer;transition:transform .2s ease;}
.truongdevs-rating-stars svg path{fill:#ccc;transition:fill .2s ease;}
.truongdevs-rating-stars:not(.rated) svg:hover{transform:scale(1.1);}
.truongdevs-rating-stars:not(.rated) svg:hover path,.truongdevs-rating-stars:not(.rated) svg:hover~svg path{fill:#ffc107;}
.truongdevs-rating-stars.rated svg{cursor:default;}
.truongdevs-rating-stars.rated svg path{fill:#ffc107;}
.truongdevs-rating-total{font-size:14px;color:$(meta.color);}
.truongdevs-rating-caption p{font-size:15px;font-weight:600;color:#28a745;margin-top:10px;}
.truongdevs-rating-breakdown{width:calc(65% - 30px);}
.truongdevs-rating-progress{display:flex;align-items:center;gap:15px;margin-bottom:8px;}
.truongdevs-rating-grade{display:flex;align-items:center;gap:5px;font-size:15px;font-weight:500;color:$(meta.color);flex-shrink:0;}
.truongdevs-rating-grade::before{content:'F586';font-family:'bootstrap-icons';font-size:14px;color:#ffc107;} /* Cần có font Bootstrap Icons */
.truongdevs-rating-bar{flex-grow:1;height:8px;background-color:$(gray);border-radius:4px;overflow:hidden;}
.truongdevs-rating-bar-fill{height:100%;background-color:$(accent.color);border-radius:4px;transition:width .6s ease;}
.truongdevs-rating-votes{font-size:14px;font-weight:500;color:$(meta.color);width:50px;text-align:right;flex-shrink:0;}
.truongdevs-rating-votes-count{font-weight:700;color:$(text.color);}
.truongdevs-hidden{display:none!important;}
@media (max-width:680px){.truongdevs-rating-section{flex-direction:column;align-items:stretch;gap:20px;padding-top:25px;padding-bottom:25px;margin-bottom:25px;}.truongdevs-rating-area{width:100%;border-right:none;border-bottom:1px solid $(border);margin:0 0 10px 0;padding:0 0 20px 0;}.truongdevs-rating-breakdown{width:100%;}}
Đảm bảo theme đã nhúng font Bootstrap Icons và có các biến màu cần thiết.
Thêm JavaScript
Dán đoạn script sau vào theme, ngay trước thẻ đóng </body>. Quan trọng: Nhớ thay thế các giá trị placeholder trong firebaseConfig và CACHE_URL bằng thông tin thực tế của bạn.
<script src='https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js'></script>
<script src='https://www.gstatic.com/firebasejs/9.6.1/firebase-database-compat.js'></script>
<script src='https://cdn.jsdelivr.net/npm/fingerprintjs2@2.1.4/dist/fingerprint2.min.js'></script>
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', () => {
const firebaseConfig = {
apiKey: "YOUR_API_KEY", // <<= THAY BẰNG CONFIG CỦA BẠN
authDomain: "YOUR_AUTH_DOMAIN", // <<= THAY BẰNG CONFIG CỦA BẠN
databaseURL: "YOUR_DATABASE_URL", // <<= THAY BẰNG CONFIG CỦA BẠN
projectId: "YOUR_PROJECT_ID", // <<= THAY BẰNG CONFIG CỦA BẠN
storageBucket: "YOUR_STORAGE_BUCKET.appspot.com", // <<= THAY BẰNG CONFIG CỦA BẠN
messagingSenderId: "YOUR_MESSAGING_SENDER_ID", // <<= THAY BẰNG CONFIG CỦA BẠN
appId: "YOUR_APP_ID" // <<= THAY BẰNG CONFIG CỦA BẠN
};
// !!! QUAN TRỌNG: Thay đúng tên bucket của bạn vào đây !!!
const CACHE_URL = 'https://storage.googleapis.com/YOUR_STORAGE_BUCKET.appspot.com/ratings_cache.json'; // <<= THAY TÊN BUCKET
let db;
let ratingSection;
let postId;
let ratingRef;
let starsContainer;
let stars;
const FINGERPRINT_KEY = 'your_blog_rating_fp'; // Có thể đổi tên nếu muốn
const starSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.431L24 9.423l-6 5.848 1.417 8.268L12 18.897l-7.417 4.642L6 15.271 0 9.423l8.332-1.405z"/></svg>`;
let cachedRatingData = null;
let schemaCreated = false;
ratingSection = document.querySelector('.truongdevs-rating-section');
if (!ratingSection) return;
postId = ratingSection.getAttribute('data-post-id');
if (!postId) return;
starsContainer = document.getElementById('truongdevs-rating-stars');
if (!starsContainer) return;
try {
starsContainer.innerHTML = Array(5).fill(starSvg).join('');
stars = starsContainer.querySelectorAll('svg');
} catch(e) { return; }
<code class="language-javascript">
<p> try {<br>
if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);<br>
db = firebase.database();<br>
ratingRef = db.ref('ratings/' + postId);<br>
} catch (e) { updateUI(null); return; }</p>
<p> const getFingerprint = () => new Promise(resolve => {<br>
try {<br>
const savedFp = localStorage.getItem(FINGERPRINT_KEY);<br>
if (savedFp) { resolve(savedFp); }<br>
else {<br>
Fingerprint2.get(components => {<br>
const values = components.map(c => c.value);<br>
const murmur = Fingerprint2.x64hash128(values.join(''), 31);<br>
localStorage.setItem(FINGERPRINT_KEY, murmur);<br>
resolve(murmur);<br>
});<br>
}<br>
} catch (e) {<br>
resolve('fp_error_' + Date.now());<br>
}<br>
});</p>
<p> const updateUI = (data) => {<br>
try {<br>
const sum = data ? (data.sum || 0) : 0;<br>
const count = data ? (data.count || 0) : 0;<br>
const avg = count > 0 ? (sum / count) : 0;<br>
const avgDisplay = avg.toFixed(1);<br>
const countDisplay = count;<br>
const avgElement = document.getElementById('truongdevs-avg-score');<br>
const countElement = document.getElementById('truongdevs-total-rating-count');<br>
if (avgElement) avgElement.textContent = avgDisplay;<br>
if (countElement) countElement.textContent = countDisplay;<br>
stars.forEach((star, index) => {<br>
const path = star.querySelector('path');<br>
if (path) {<br>
path.style.fill = index < Math.round(avg) ? '#ffc107' : '#ccc';<br>
}<br>
});<br>
for (let i = 1; i <= 5; i++) {<br>
const countForStar = data && data.distribution ? (data.distribution[i] || 0) : 0;<br>
const progressRow = document.querySelector(`.truongdevs-rating-progress[data-rate="${i}"]`);<br>
if (progressRow) {<br>
const percentage = count > 0 ? (countForStar / count) * 100 : 0;<br>
const barFill = progressRow.querySelector('.truongdevs-rating-bar-fill');<br>
const votesCount = progressRow.querySelector('.truongdevs-rating-votes-count');<br>
if (barFill) barFill.style.width = `${percentage}%`;<br>
if (votesCount) votesCount.textContent = countForStar;<br>
}<br>
}<br>
} catch (e) { /* Ignore UI errors */ }<br>
};</p>
<p> const generateSchema = (avg, count) => {<br>
try {<br>
const existingSchema = document.getElementById('truongdevs-rating-schema');<br>
if (existingSchema) existingSchema.remove();</p>
<p> if (count > 0 && typeof avg === 'number' && !isNaN(avg)) {<br>
const canonicalLink = document.querySelector("link[rel='canonical']");<br>
const postTitleElement = document.querySelector('.entry-title, .post-title, h1');<br>
const postTitle = postTitleElement ? postTitleElement.textContent.trim() : document.title;<br>
if (!canonicalLink || !canonicalLink.href) return;</p>
<p> const schema = {<br>
"@context": "https://schema.org",<br>
"@id": canonicalLink.href + "#aggregateRating",<br>
"@type": "AggregateRating",<br>
"itemReviewed": {<br>
"@type": "CreativeWorkSeries", // Sử dụng CreativeWorkSeries<br>
"name": postTitle,<br>
"url": canonicalLink.href<br>
},<br>
"ratingValue": avg.toFixed(1),<br>
"ratingCount": count<br>
};</p>
<p> const scriptElement = document.createElement('script');<br>
scriptElement.id = 'truongdevs-rating-schema';<br>
scriptElement.type = 'application/ld+json';<br>
scriptElement.textContent = JSON.stringify(schema);</p>
<p> setTimeout(() => { // Thêm độ trễ nhỏ<br>
try {<br>
if (document.head) {<br>
document.head.appendChild(scriptElement);<br>
schemaCreated = true;<br>
}<br>
} catch (appendError) { /* Ignore append errors */ }<br>
}, 150);</p>
<p> } else if (schemaCreated) {<br>
const existingSchemaToRemove = document.getElementById('truongdevs-rating-schema');<br>
if (existingSchemaToRemove) existingSchemaToRemove.remove();<br>
schemaCreated = false;<br>
}<br>
} catch (e) { /* Ignore schema generation errors */ }<br>
};</p>
<p> const handleRating = async (e) => {<br>
try {<br>
const rating = parseInt(e.currentTarget.dataset.value);<br>
const fingerprint = await getFingerprint();<br>
if (!ratingRef) return;<br>
ratingRef.transaction((currentData) => {<br>
if (currentData === null) {<br>
return { sum: rating, count: 1, distribution: { [rating]: 1 }, fingerprints: { [fingerprint]: true } };<br>
}<br>
if (currentData.fingerprints && currentData.fingerprints[fingerprint]) {<br>
return;<br>
}<br>
const newData = JSON.parse(JSON.stringify(currentData));<br>
newData.count = (newData.count || 0) + 1;<br>
newData.sum = (newData.sum || 0) + rating;<br>
if (!newData.distribution) newData.distribution = {};<br>
newData.distribution[rating] = (newData.distribution[rating] || 0) + 1;<br>
if (!newData.fingerprints) newData.fingerprints = {};<br>
newData.fingerprints[fingerprint] = true;<br>
return newData;<br>
}, (error, committed, snapshot) => {<br>
if (!error && committed && snapshot && snapshot.exists()) {<br>
if(starsContainer) starsContainer.classList.add('rated');<br>
const caption = document.querySelector('.truongdevs-rating-caption');<br>
if (caption) caption.classList.remove('truongdevs-hidden');<br>
}<br>
});<br>
} catch(e) { /* Ignore rating errors */ }<br>
};</p>
<p> async function initializeRating() {<br>
let schemaSuccessfullyCreatedFromCache = false;<br>
try {<br>
const response = await fetch(CACHE_URL + '?t=' + Date.now(), { cache: "no-store" });<br>
if (response.ok) {<br>
const cache = await response.json();<br>
if (cache && cache[postId]) {<br>
cachedRatingData = cache[postId];<br>
const avgCache = parseFloat(cachedRatingData.avg);<br>
const countCache = parseInt(cachedRatingData.count, 10);<br>
if (!isNaN(avgCache) && !isNaN(countCache) && countCache > 0) {<br>
generateSchema(avgCache, countCache);<br>
schemaSuccessfullyCreatedFromCache = true;<br>
}<br>
}<br>
}<br>
} catch (e) { /* Ignore cache errors */ }</p>
<p> if (ratingRef) {<br>
ratingRef.on('value', async (snapshot) => {<br>
const firebaseData = snapshot.val();<br>
const currentData = firebaseData || { sum: 0, count: 0 };<br>
updateUI(currentData);<br>
const avg = currentData.count > 0 ? (currentData.sum / currentData.count) : 0;<br>
const count = currentData.count || 0;<br>
const cacheCount = cachedRatingData ? parseInt(cachedRatingData.count, 10) : -1;</p>
<p> if (!schemaSuccessfullyCreatedFromCache || (count > 0 && count !== cacheCount) || (count === 0 && schemaCreated)) {<br>
generateSchema(avg, count);<br>
cachedRatingData = { avg: avg.toFixed(1), count: count };<br>
schemaSuccessfullyCreatedFromCache = true;<br>
}<br>
try {<br>
const fingerprint = await getFingerprint();<br>
if (currentData.fingerprints && currentData.fingerprints[fingerprint]) {<br>
if (starsContainer) starsContainer.classList.add('rated');<br>
const caption = document.querySelector('.truongdevs-rating-caption');<br>
if (caption) caption.classList.remove('truongdevs-hidden');<br>
} else {<br>
if (starsContainer) starsContainer.classList.remove('rated');<br>
}<br>
} catch (fpError) { /* Ignore */ }<br>
}, (error) => {<br>
updateUI(null); generateSchema(0, 0);<br>
});<br>
} else { updateUI(null); generateSchema(0, 0); }</p>
<p> if (stars && stars.length > 0) {<br>
stars.forEach((star, index) => {<br>
star.dataset.value = index + 1;<br>
star.addEventListener('click', handleRating);<br>
});<br>
}<br>
}</p>
</code>
initializeRating();
});
//]]>
</script>Thiết lập Cloud Function
Đây là bước then chốt để tạo file cache giúp Google đọc schema đánh giá nhanh hơn.
Khởi tạo Firebase CLI trên máy tính (nếu chưa)
1. Mở Command Prompt (cmd) hoặc PowerShell.
2. Di chuyển đến thư mục bạn muốn chứa code (ví dụ: cd E:MyProjects).
firebase login --no-localhost3. Khởi tạo dự án:
firebase init4. Chọn (*) Functions (dùng phím cách để chọn, Enter để xác nhận).
5. Chọn Use an existing project -> Chọn dự án Firebase của bạn (ví dụ: myblog-ratings).
6. Chọn ngôn ngữ JavaScript.
7. Chọn No cho ESLint (cho đơn giản).
8. Chọn Yes để cài đặt dependencies. Chờ quá trình hoàn tất.
Viết và Deploy Code Function
1. Trong thư mục dự án của bạn, mở thư mục functions, sau đó mở file index.js.
2. Xóa hết code mẫu.
3. Dán code sau vào:
const {onSchedule} = require("firebase-functions/v2/scheduler");
const {initializeApp} = require("firebase-admin/app");
const {getDatabase} = require("firebase-admin/database");
const {getStorage} = require("firebase-admin/storage");
const logger = require("firebase-functions/logger");
initializeApp();
exports.updateRatingsCache = onSchedule("every 4 hours", async (event) => { // <<= Đặt tần suất cập nhật
try {
const db = getDatabase();
const storage = getStorage();
const ratingsRef = db.ref("ratings"); // Tên nhánh dữ liệu Firebase
const snapshot = await ratingsRef.once("value");
const allRatings = snapshot.val();
const cache = {};
if (allRatings) {
for (const postId in allRatings) {
if (Object.prototype.hasOwnProperty.call(allRatings, postId)) {
const ratingData = allRatings[postId];
if (ratingData && ratingData.count > 0 && ratingData.sum) {
cache[postId] = {
avg: (ratingData.sum / ratingData.count).toFixed(1),
count: ratingData.count,
};
}
}
}
}
const bucket = storage.bucket(); // Lấy bucket mặc định
const file = bucket.file("ratings_cache.json"); // Tên file cache
await file.save(JSON.stringify(cache), {
metadata: {
contentType: "application/json",
cacheControl: "public, max-age=3600", // Cache trình duyệt 1 giờ
},
});
await file.makePublic(); // Đặt file thành công khai
logger.info("Successfully updated ratings cache.", {
count: Object.keys(cache).length,
});
} catch (error) {
logger.error("Error updating ratings cache:", error);
}
});4. Lưu file index.js.
5. Quay lại Command Prompt, đảm bảo bạn đang ở trong thư mục dự án (ví dụ: E:MyProjects).
6. Chạy lệnh deploy:
firebase deploy --only functionsChờ quá trình deploy hoàn tất.
Cấu hình Firebase Storage và CORS
Chạy Function lần đầu
- Vào Firebase Console → Functions.
- Tìm
updateRatingsCache→ Nhấn menu (…) → View in Cloud Scheduler. - Trong Cloud Scheduler, chọn job → Resume (nếu đang Paused) → Force run.
- Đợi khoảng 1 phút.
Kiểm tra và lấy link file cache
- Vào Firebase Console → Storage.
- Bạn sẽ thấy file
ratings_cache.json. - Nhấp vào file. Link chuẩn sẽ có dạng
https://storage.googleapis.com/YOUR_BUCKET_NAME/ratings_cache.json. - Copy link này và dán vào biến
CACHE_URLtrong script Blogger.
Cấu hình CORS (Quan trọng)
Bước này cho phép trang Blogger của bạn đọc được file cache.
1. Cài đặt Google Cloud SDK trên máy tính (nếu chưa).
2. Mở Command Prompt (cmd) hoặc PowerShell.
3. Đăng nhập:
gcloud auth login4. Khởi tạo (nếu chưa):
gcloud init5. Tạo file cors.json (ví dụ: trên Desktop) với nội dung:
[
{
"origin": ["https://www.yourblogdomain.com"], // <<= THAY BẰNG DOMAIN CỦA BẠN
"method": ["GET"],
"maxAgeSeconds": 3600
}
]6. Chạy lệnh (thay YOUR_BUCKET_NAME và đường dẫn file cors.json):
gsutil cors set C:pathtoyourcors.json gs://YOUR_BUCKET_NAMEĐợi vài phút để CORS có hiệu lực.
Sửa Quy tắc Bảo mật Firebase (Rules)
Bước này đảm bảo chỉ có dữ liệu hợp lệ được ghi vào database. TruongDevs đề xuất sử dụng quy tắc an toàn sau, xử lý cả lần vote đầu tiên và các lần sau.
Giải thích Quy tắc
!data.exists() && newData.child('count').val() == 1: Cho phép ghi nếu đây là lần vote đầu tiên (dữ liệu cũ chưa tồn tại) vàcountgửi lên là 1.data.exists() && newData.child('count').val() == data.child('count').val() + 1: Cho phép ghi nếu dữ liệu đã tồn tại vàcountmới bằngcountcũ cộng thêm 1.
Quy tắc này rất hiệu quả trong việc chống spam và đảm bảo tính toàn vẹn của dữ liệu.
Cập nhật Rules
1. Vào Firebase Console → Realtime Database → Rules.
2. Thay thế nội dung bằng:
{
"rules": {
"ratings": {
"$postId": {
".read": "true",
// Quy tắc an toàn cho cả tạo mới và cập nhật
".write": "(!data.exists() && newData.child('count').val() == 1) || (data.exists() && newData.child('count').val() == data.child('count').val() + 1)",
"count": { ".validate": "newData.isNumber()" },
"sum": { ".validate": "newData.isNumber()" },
"distribution": { ".validate": "newData.hasChildren()" },
"fingerprints": { ".validate": "newData.hasChildren()" }
}
}
}
}3. Nhấn Publish.
Kiểm tra và Chờ đợi
1. Kiểm tra lỗi Console: Mở bài viết có đánh giá trên trình duyệt, nhấn F12 → Console, xem có lỗi đỏ nào không.
2. Kiểm tra Schema: Dùng Google Rich Results Test hoặc URL Inspection (Test Live URL) trong Search Console. Tìm thẻ <script id='truongdevs-rating-schema'> trong mã nguồn render hoặc xem Google có nhận diện “Đoạn trích đánh giá” không.
Chờ đợi: Google cần thời gian (vài ngày đến vài tuần) để thu thập dữ liệu mới và hiển thị sao đánh giá.
Kết luận
Việc triển khai hệ thống đánh giá sao cho Blogger hiển thị trên Google đòi hỏi sự kết hợp giữa Firebase, Cloud Function và cấu hình cẩn thận. Bằng cách làm theo hướng dẫn chi tiết này từ TruongDevs, bạn đã xây dựng một giải pháp mạnh mẽ, chuẩn SEO và sử dụng dữ liệu realtime từ người dùng. Hãy kiên nhẫn chờ đợi Google cập nhật và tận hưởng thành quả!
Nếu bạn thấy bài viết này hữu ích và đã thực hiện thành công, đừng quên để lại một đánh giá 5 sao để ủng hộ TruongDevs nhé. Mỗi lượt đánh giá của bạn là nguồn động lực rất lớn để mình tiếp tục chia sẻ những hướng dẫn chi tiết và chất lượng hơn! Còn nếu gặp bất kỳ khó khăn nào, bước nào chưa làm được, hay gặp lỗi gì ở đâu, đừng ngần ngại để lại bình luận bên dưới. Mình sẽ xem và hỗ trợ để bạn làm được!