feat: Simplify cookie consent, remove blog
- CookieBanner: Accept/Reject only (no granular options) - ConsentModal: Streamlined preferences - Removed blog pages and content - Removed blog from navigation NOTE: Cookie consent logs to database on both Accept and Reject
This commit is contained in:
@@ -1,187 +1,77 @@
|
|||||||
---
|
---
|
||||||
// ConsentModal.astro - Standalone consent preferences modal
|
// ConsentModal.astro - Simple consent preferences modal
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<div
|
||||||
id="consent-modal-standalone"
|
id="consent-modal"
|
||||||
class="fixed inset-0 z-50 hidden"
|
class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"
|
||||||
aria-labelledby="modal-title"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
>
|
>
|
||||||
<!-- Backdrop -->
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
||||||
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity consent-modal-backdrop"></div>
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">การตั้งค่าคุกกี้</h2>
|
||||||
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white transition">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Modal Panel -->
|
<div class="p-6">
|
||||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
<p class="text-base text-gray-600 dark:text-gray-300 mb-6">เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานของคุณ การยอมรับการใช้งานคุกกี้จะช่วยให้เราพัฒนาเว็บไซต์ให้ดีขึ้น</p>
|
||||||
<div class="flex min-h-full items-center justify-center p-4">
|
|
||||||
<div
|
|
||||||
class="relative transform overflow-hidden rounded-xl bg-white dark:bg-gray-800 shadow-2xl transition-all max-w-lg w-full max-h-[90vh] overflow-y-auto consent-modal-panel"
|
|
||||||
>
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<h3 id="modal-title" class="text-xl font-bold text-gray-900 dark:text-white">
|
|
||||||
การตั้งค่าคุกกี้
|
|
||||||
</h3>
|
|
||||||
<p class="text-base text-gray-600 dark:text-gray-300 mt-2">
|
|
||||||
จัดการการตั้งค่าคุกกี้ของคุณที่นี่
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Body -->
|
<div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||||
<div class="px-6 py-4 space-y-4">
|
<div class="flex items-center gap-3">
|
||||||
<!-- Essential -->
|
<input type="checkbox" checked disabled class="w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary" />
|
||||||
<div class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
|
<div class="flex-1">
|
||||||
<input
|
<h3 class="font-semibold text-gray-900 dark:text-white text-base">คุกกี้ที่จำเป็น</h3>
|
||||||
type="checkbox"
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้</p>
|
||||||
name="consent-essential"
|
|
||||||
checked
|
|
||||||
disabled
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้ที่จำเป็น
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Analytics -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="consent-analytics"
|
|
||||||
id="standalone-analytics"
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary consent-checkbox"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้วิเคราะห์ข้อมูล
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Marketing -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="consent-marketing"
|
|
||||||
id="standalone-marketing"
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary consent-checkbox"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้การตลาด
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
ใช้สำหรับติดตามและแสดงโฆษณาที่ตรงกับความสนใจของคุณ
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<div class="mb-6 p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
||||||
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<button
|
<input type="checkbox" id="modal-analytics" class="w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary" />
|
||||||
id="consent-modal-save"
|
<div class="flex-1">
|
||||||
class="flex-1 px-6 py-3 bg-secondary hover:bg-secondary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
|
<h3 class="font-semibold text-gray-900 dark:text-white text-base">คุกกี้วิเคราะห์ข้อมูล</h3>
|
||||||
>
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)</p>
|
||||||
บันทึกการตั้งค่า
|
</div>
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
id="consent-modal-close"
|
|
||||||
class="flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg font-medium text-base transition hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
ปิด
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-3 mt-6">
|
||||||
|
<button id="save-preferences" class="bg-secondary text-white px-6 py-3 rounded-lg font-semibold text-base hover:bg-secondary-hover transition flex-1">บันทึกการตั้งค่า</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||||
|
<p class="text-sm text-blue-800 dark:text-blue-300"><strong>หมายเหตุ:</strong> คุณสามารถเพิกถอนความยินยอมได้ตลอดเวลาโดยคลิกปุ่ม "ตั้งค่าคุกกี้" ในส่วนท้ายของเว็บไซต์</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const CONSENT_KEY = 'consent-preferences';
|
const modal = document.getElementById('consent-modal');
|
||||||
|
const closeBtn = document.getElementById('close-modal');
|
||||||
|
const saveBtn = document.getElementById('save-preferences');
|
||||||
|
const analyticsCheckbox = document.getElementById('modal-analytics');
|
||||||
|
|
||||||
const modal = document.getElementById('consent-modal-standalone');
|
(window as any).openConsentModal = () => { modal.classList.remove('hidden'); };
|
||||||
const backdrop = modal?.querySelector('.consent-modal-backdrop');
|
closeBtn.addEventListener('click', () => { modal.classList.add('hidden'); });
|
||||||
const panel = modal?.querySelector('.consent-modal-panel');
|
modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.add('hidden'); });
|
||||||
|
|
||||||
const analyticsCheckbox = document.getElementById('standalone-analytics') as HTMLInputElement;
|
saveBtn.addEventListener('click', () => {
|
||||||
const marketingCheckbox = document.getElementById('standalone-marketing') as HTMLInputElement;
|
const consent = { essential: true, analytics: analyticsCheckbox.checked, marketing: false, timestamp: new Date().toISOString(), policyVersion: '1.0' };
|
||||||
|
localStorage.setItem('consent-preferences', JSON.stringify(consent));
|
||||||
const btnSave = document.getElementById('consent-modal-save');
|
modal.classList.add('hidden');
|
||||||
const btnClose = document.getElementById('consent-modal-close');
|
logConsent(consent);
|
||||||
|
setTimeout(() => window.location.reload(), 500);
|
||||||
// Open modal function (expose globally)
|
|
||||||
(window as any).openConsentModal = function() {
|
|
||||||
modal?.classList.remove('hidden');
|
|
||||||
// Sync with existing preferences
|
|
||||||
const existing = localStorage.getItem(CONSENT_KEY);
|
|
||||||
if (existing) {
|
|
||||||
try {
|
|
||||||
const prefs = JSON.parse(existing);
|
|
||||||
if (analyticsCheckbox) analyticsCheckbox.checked = prefs.analytics || false;
|
|
||||||
if (marketingCheckbox) marketingCheckbox.checked = prefs.marketing || false;
|
|
||||||
} catch (e) {
|
|
||||||
// ignore parse errors
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Close modal function
|
|
||||||
function closeModal() {
|
|
||||||
modal?.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Save preferences
|
|
||||||
async function savePreferences() {
|
|
||||||
const consentData = {
|
|
||||||
essential: true,
|
|
||||||
analytics: analyticsCheckbox?.checked || false,
|
|
||||||
marketing: marketingCheckbox?.checked || false,
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
};
|
|
||||||
|
|
||||||
localStorage.setItem(CONSENT_KEY, JSON.stringify(consentData));
|
|
||||||
|
|
||||||
try {
|
|
||||||
await fetch('/api/consent', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({
|
|
||||||
sessionId: crypto.randomUUID(),
|
|
||||||
essential: consentData.essential,
|
|
||||||
analytics: consentData.analytics,
|
|
||||||
marketing: consentData.marketing,
|
|
||||||
policyVersion: '1.0',
|
|
||||||
locale: 'th'
|
|
||||||
})
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to save consent:', error);
|
|
||||||
}
|
|
||||||
|
|
||||||
closeModal();
|
|
||||||
|
|
||||||
// Dispatch event for other components to listen
|
|
||||||
window.dispatchEvent(new CustomEvent('consent-updated', { detail: consentData }));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event listeners
|
|
||||||
btnSave?.addEventListener('click', savePreferences);
|
|
||||||
btnClose?.addEventListener('click', closeModal);
|
|
||||||
backdrop?.addEventListener('click', closeModal);
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && !modal?.classList.contains('hidden')) {
|
|
||||||
closeModal();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
async function logConsent(consent: any) {
|
||||||
|
try {
|
||||||
|
const sessionId = crypto.randomUUID();
|
||||||
|
await fetch('/api/consent', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sessionId, ...consent, locale: 'th' }) });
|
||||||
|
} catch (error) { console.error('Failed to log consent:', error); }
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
// CookieBanner.astro - Simple cookie consent banner with Tailwind CSS
|
// CookieBanner.astro - Simple cookie consent banner (Accept/Reject only)
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -8,340 +8,106 @@
|
|||||||
>
|
>
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<h2 class="text-lg font-bold text-gray-900 dark:text-white mb-2">
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">
|
||||||
เราใช้คุกกี้
|
เราใช้คุกกี้
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<p class="text-base text-gray-600 dark:text-gray-300 mb-4">
|
<p class="text-base text-gray-600 dark:text-gray-300 mb-6">
|
||||||
เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานของคุณ และวิเคราะห์การใช้งานเว็บไซต์
|
เว็บไซต์ของเราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานและวิเคราะห์การใช้งานเว็บไซต์
|
||||||
|
การกดปุ่ม "ยอมรับทั้งหมด" แสดงว่าคุณยินยอมให้เราใช้คุกกี้ตาม
|
||||||
|
<a href="/privacy-policy" class="text-secondary hover:underline font-medium">นโยบายความเป็นส่วนตัว</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Checkboxes -->
|
|
||||||
<div class="space-y-3 mb-6">
|
|
||||||
<!-- Essential -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="consent-essential"
|
|
||||||
checked
|
|
||||||
disabled
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้ที่จำเป็น
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Analytics -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="consent-analytics"
|
|
||||||
id="banner-analytics"
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้วิเคราะห์ข้อมูล
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Marketing -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="consent-marketing"
|
|
||||||
id="banner-marketing"
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้การตลาด
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
ใช้สำหรับติดตามและแสดงโฆษณาที่ตรงกับความสนใจของคุณ
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Buttons -->
|
<!-- Buttons -->
|
||||||
<div class="flex flex-col sm:flex-row gap-3">
|
<div class="flex flex-col sm:flex-row gap-4">
|
||||||
<button
|
<button
|
||||||
id="btn-accept-all"
|
id="accept-all"
|
||||||
class="flex-1 px-6 py-3 bg-secondary hover:bg-secondary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
|
class="bg-secondary text-white px-8 py-3 rounded-lg font-semibold text-base hover:bg-secondary-hover transition shadow-md"
|
||||||
>
|
>
|
||||||
ยอมรับทั้งหมด
|
ยอมรับทั้งหมด
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
id="btn-reject-all"
|
id="reject-all"
|
||||||
class="flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg font-medium text-base transition hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
|
class="bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white px-8 py-3 rounded-lg font-semibold text-base hover:bg-gray-300 dark:hover:bg-gray-600 transition"
|
||||||
>
|
>
|
||||||
ปฏิเสธ
|
ปฏิเสธ
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
id="btn-customize"
|
|
||||||
class="flex-1 px-6 py-3 bg-primary hover:bg-primary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
ปรับแต่ง
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Consent Modal -->
|
<!-- Additional Info -->
|
||||||
<div
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
||||||
id="consent-modal"
|
คุณสามารถเปลี่ยนแปลงการตั้งค่าคุกกี้ได้ตลอดเวลาโดยคลิกปุ่ม "ตั้งค่าคุกกี้" ในส่วนท้ายของเว็บไซต์
|
||||||
class="fixed inset-0 z-50 hidden"
|
</p>
|
||||||
aria-labelledby="modal-title"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
>
|
|
||||||
<!-- Backdrop -->
|
|
||||||
<div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="modal-backdrop"></div>
|
|
||||||
|
|
||||||
<!-- Modal Panel -->
|
|
||||||
<div class="fixed inset-0 z-10 overflow-y-auto">
|
|
||||||
<div class="flex min-h-full items-center justify-center p-4">
|
|
||||||
<div
|
|
||||||
id="modal-panel"
|
|
||||||
class="relative transform overflow-hidden rounded-xl bg-white dark:bg-gray-800 shadow-2xl transition-all max-w-lg w-full max-h-[90vh] overflow-y-auto"
|
|
||||||
>
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
||||||
<h3 id="modal-title" class="text-xl font-bold text-gray-900 dark:text-white">
|
|
||||||
การตั้งค่าคุกกี้
|
|
||||||
</h3>
|
|
||||||
<p class="text-base text-gray-600 dark:text-gray-300 mt-2">
|
|
||||||
จัดการการตั้งค่าคุกกี้ของคุณที่นี่
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Body -->
|
|
||||||
<div class="px-6 py-4 space-y-4">
|
|
||||||
<!-- Essential -->
|
|
||||||
<div class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="modal-essential"
|
|
||||||
checked
|
|
||||||
disabled
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้ที่จำเป็น
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Analytics -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="modal-analytics"
|
|
||||||
id="modal-analytics"
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้วิเคราะห์ข้อมูล
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<!-- Marketing -->
|
|
||||||
<label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
name="modal-marketing"
|
|
||||||
id="modal-marketing"
|
|
||||||
class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
|
|
||||||
/>
|
|
||||||
<div class="flex-1">
|
|
||||||
<span class="block font-semibold text-gray-900 dark:text-white text-base">
|
|
||||||
คุกกี้การตลาด
|
|
||||||
</span>
|
|
||||||
<span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
||||||
ใช้สำหรับติดตามและแสดงโฆษณาที่ตรงกับความสนใจของคุณ
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex gap-3">
|
|
||||||
<button
|
|
||||||
id="btn-save-preferences"
|
|
||||||
class="flex-1 px-6 py-3 bg-secondary hover:bg-secondary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
บันทึกการตั้งค่า
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
id="btn-close-modal"
|
|
||||||
class="flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg font-medium text-base transition hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
|
|
||||||
>
|
|
||||||
ปิด
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Consent Manager
|
|
||||||
const CONSENT_KEY = 'consent-preferences';
|
|
||||||
|
|
||||||
// Get elements
|
|
||||||
const banner = document.getElementById('cookie-banner');
|
const banner = document.getElementById('cookie-banner');
|
||||||
const modal = document.getElementById('consent-modal');
|
const acceptBtn = document.getElementById('accept-all');
|
||||||
const modalBackdrop = document.getElementById('modal-backdrop');
|
const rejectBtn = document.getElementById('reject-all');
|
||||||
const modalPanel = document.getElementById('modal-panel');
|
|
||||||
|
|
||||||
// Banner checkboxes
|
// Check if consent already given
|
||||||
const bannerAnalytics = document.getElementById('banner-analytics') as HTMLInputElement;
|
const existingConsent = localStorage.getItem('consent-preferences');
|
||||||
const bannerMarketing = document.getElementById('banner-marketing') as HTMLInputElement;
|
if (!existingConsent) {
|
||||||
|
// Show banner after 1 second
|
||||||
|
setTimeout(() => {
|
||||||
|
banner.classList.remove('translate-y-full');
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
// Modal checkboxes
|
// Accept all
|
||||||
const modalAnalytics = document.getElementById('modal-analytics') as HTMLInputElement;
|
acceptBtn.addEventListener('click', () => {
|
||||||
const modalMarketing = document.getElementById('modal-marketing') as HTMLInputElement;
|
const consent = {
|
||||||
|
essential: true,
|
||||||
// Buttons
|
analytics: true,
|
||||||
const btnAcceptAll = document.getElementById('btn-accept-all');
|
marketing: true,
|
||||||
const btnRejectAll = document.getElementById('btn-reject-all');
|
timestamp: new Date().toISOString(),
|
||||||
const btnCustomize = document.getElementById('btn-customize');
|
policyVersion: '1.0'
|
||||||
const btnSavePreferences = document.getElementById('btn-save-preferences');
|
|
||||||
const btnCloseModal = document.getElementById('btn-close-modal');
|
|
||||||
|
|
||||||
// Save consent to localStorage and POST to API
|
|
||||||
async function saveConsent(preferences: { essential: boolean; analytics: boolean; marketing: boolean }) {
|
|
||||||
const consentData = {
|
|
||||||
...preferences,
|
|
||||||
timestamp: new Date().toISOString()
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Save to localStorage
|
localStorage.setItem('consent-preferences', JSON.stringify(consent));
|
||||||
localStorage.setItem(CONSENT_KEY, JSON.stringify(consentData));
|
banner.classList.add('translate-y-full');
|
||||||
|
|
||||||
// POST to API
|
// Log consent to database
|
||||||
|
logConsent(consent);
|
||||||
|
|
||||||
|
// Reload page to enable analytics
|
||||||
|
setTimeout(() => window.location.reload(), 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reject all
|
||||||
|
rejectBtn.addEventListener('click', () => {
|
||||||
|
const consent = {
|
||||||
|
essential: true,
|
||||||
|
analytics: false,
|
||||||
|
marketing: false,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
policyVersion: '1.0'
|
||||||
|
};
|
||||||
|
|
||||||
|
localStorage.setItem('consent-preferences', JSON.stringify(consent));
|
||||||
|
banner.classList.add('translate-y-full');
|
||||||
|
|
||||||
|
// Log consent to database
|
||||||
|
logConsent(consent);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Log consent to database
|
||||||
|
async function logConsent(consent) {
|
||||||
try {
|
try {
|
||||||
|
const sessionId = crypto.randomUUID();
|
||||||
await fetch('/api/consent', {
|
await fetch('/api/consent', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
sessionId: crypto.randomUUID(),
|
sessionId,
|
||||||
essential: preferences.essential,
|
...consent,
|
||||||
analytics: preferences.analytics,
|
|
||||||
marketing: preferences.marketing,
|
|
||||||
policyVersion: '1.0',
|
|
||||||
locale: 'th'
|
locale: 'th'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to save consent:', error);
|
console.error('Failed to log consent:', error);
|
||||||
}
|
|
||||||
|
|
||||||
// Hide banner
|
|
||||||
hideBanner();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show banner
|
|
||||||
function showBanner() {
|
|
||||||
banner?.classList.remove('translate-y-full');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide banner
|
|
||||||
function hideBanner() {
|
|
||||||
banner?.classList.add('translate-y-full');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show modal
|
|
||||||
function showModal() {
|
|
||||||
modal?.classList.remove('hidden');
|
|
||||||
// Sync checkbox states from banner
|
|
||||||
if (modalAnalytics) modalAnalytics.checked = bannerAnalytics?.checked || false;
|
|
||||||
if (modalMarketing) modalMarketing.checked = bannerMarketing?.checked || false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Hide modal
|
|
||||||
function hideModal() {
|
|
||||||
modal?.classList.add('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if consent already exists
|
|
||||||
function hasConsent(): boolean {
|
|
||||||
return localStorage.getItem(CONSENT_KEY) !== null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize
|
|
||||||
function init() {
|
|
||||||
if (!hasConsent()) {
|
|
||||||
showBanner();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Event Listeners
|
|
||||||
btnAcceptAll?.addEventListener('click', () => {
|
|
||||||
saveConsent({
|
|
||||||
essential: true,
|
|
||||||
analytics: true,
|
|
||||||
marketing: true
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
btnRejectAll?.addEventListener('click', () => {
|
|
||||||
saveConsent({
|
|
||||||
essential: true,
|
|
||||||
analytics: false,
|
|
||||||
marketing: false
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
btnCustomize?.addEventListener('click', () => {
|
|
||||||
showModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
btnSavePreferences?.addEventListener('click', () => {
|
|
||||||
saveConsent({
|
|
||||||
essential: true,
|
|
||||||
analytics: modalAnalytics?.checked || false,
|
|
||||||
marketing: modalMarketing?.checked || false
|
|
||||||
});
|
|
||||||
hideModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
btnCloseModal?.addEventListener('click', () => {
|
|
||||||
hideModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
modalBackdrop?.addEventListener('click', () => {
|
|
||||||
hideModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Close modal on escape key
|
|
||||||
document.addEventListener('keydown', (e) => {
|
|
||||||
if (e.key === 'Escape' && !modal?.classList.contains('hidden')) {
|
|
||||||
hideModal();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Run init on DOM ready
|
|
||||||
init();
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
---
|
|
||||||
title: '8 ปัจจัย SEO สำหรับ Google Ranking'
|
|
||||||
description: '8 ปัจจัยสำคัญที่ Google ใช้ในการจัดอันดับเว็บไซต์ คุณทำครบหรือยัง?'
|
|
||||||
pubDate: 2024-03-05
|
|
||||||
author: 'MoreminiMore Team'
|
|
||||||
tags: ['SEO', 'Google', 'Ranking']
|
|
||||||
---
|
|
||||||
|
|
||||||
## 8 ปัจจัย SEO สำคัญที่ Google ใช้จัดอันดับ
|
|
||||||
|
|
||||||
### 1. Content Quality (คุณภาพเนื้อหา)
|
|
||||||
- เนื้อหาต้องมีคุณภาพสูง มีประโยชน์
|
|
||||||
- แก้ปัญหาหรือตอบคำถามผู้ใช้
|
|
||||||
- ความยาวเหมาะสม (1,500+ คำสำหรับบทความ)
|
|
||||||
- อัปเดตเนื้อหาให้ทันสมัย
|
|
||||||
|
|
||||||
### 2. Keywords (คำค้นหา)
|
|
||||||
- วิจัยคำค้นหาที่เหมาะสม
|
|
||||||
- ใช้ในตำแหน่งสำคัญ:
|
|
||||||
- Title Tag
|
|
||||||
- H1 Heading
|
|
||||||
- Meta Description
|
|
||||||
- URL
|
|
||||||
- เนื้อหา (1-2%)
|
|
||||||
|
|
||||||
### 3. Page Speed (ความเร็วหน้าเว็บ)
|
|
||||||
- โหลดภายใน 3 วินาที
|
|
||||||
- Core Web Vitals ผ่านเกณฑ์
|
|
||||||
- ใช้ PageSpeed Insights ตรวจสอบ
|
|
||||||
|
|
||||||
### 4. Mobile-Friendly (รองรับมือถือ)
|
|
||||||
- Responsive Design
|
|
||||||
- ใช้งานง่ายบนมือถือ
|
|
||||||
- Google ใช้ Mobile-First Indexing
|
|
||||||
|
|
||||||
### 5. Backlinks (ลิงก์เข้า)
|
|
||||||
- ลิงก์จากเว็บไซต์คุณภาพ
|
|
||||||
- จำนวนและคุณภาพสำคัญทั้งคู่
|
|
||||||
- ได้มาอย่างเป็นธรรมชาติ
|
|
||||||
|
|
||||||
### 6. User Experience (ประสบการณ์ผู้ใช้)
|
|
||||||
- Bounce Rate ต่ำ
|
|
||||||
- Time on Site สูง
|
|
||||||
- Pages per Session มาก
|
|
||||||
- Easy Navigation
|
|
||||||
|
|
||||||
### 7. Technical SEO (เทคนิค)
|
|
||||||
- SSL Certificate (HTTPS)
|
|
||||||
- XML Sitemap
|
|
||||||
- Robots.txt ถูกต้อง
|
|
||||||
- Schema Markup
|
|
||||||
- ไม่มี Broken Links
|
|
||||||
|
|
||||||
### 8. Local SEO (ท้องถิ่น)
|
|
||||||
- Google My Business
|
|
||||||
- NAP (Name, Address, Phone) สม่ำเสมอ
|
|
||||||
- รีวิวจากลูกค้า
|
|
||||||
- Local Citations
|
|
||||||
|
|
||||||
## วิธีเริ่มต้น
|
|
||||||
|
|
||||||
1. **Audit เว็บไซต์** - ตรวจสอบปัจจุบัน
|
|
||||||
2. **Keyword Research** - หาคำค้นหาที่เหมาะสม
|
|
||||||
3. **Content Creation** - สร้างเนื้อหาคุณภาพ
|
|
||||||
4. **On-Page Optimization** - ปรับปรุงปัจจัยในหน้า
|
|
||||||
5. **Link Building** - สร้าง Backlinks
|
|
||||||
6. **Monitor & Improve** - ติดตามผลและปรับปรุง
|
|
||||||
|
|
||||||
## สรุป
|
|
||||||
|
|
||||||
ทำครบทั้ง 8 ปัจจัย เว็บไซต์ของคุณจะติดอันดับ Google แน่นอน!
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'ALT Text กับ SEO ปัจจัยที่ 3 ของ Google'
|
|
||||||
description: 'การเขียน ALT Text สำหรับรูปภาพ ช่วย SEO อย่างไร และทำไม Google ให้ความสำคัญ'
|
|
||||||
pubDate: 2024-03-10
|
|
||||||
author: 'MoreminiMore Team'
|
|
||||||
tags: ['SEO', 'Images', 'Google']
|
|
||||||
---
|
|
||||||
|
|
||||||
## ALT Text คืออะไร?
|
|
||||||
|
|
||||||
ALT Text (Alternative Text) คือข้อความที่ใช้อธิบายรูปภาพในเว็บไซต์ ซึ่งมี重要作用 ต่อ SEO
|
|
||||||
|
|
||||||
## ทำไม ALT Text ถึงสำคัญ?
|
|
||||||
|
|
||||||
### 1. ช่วย Google เข้าใจรูปภาพ
|
|
||||||
Google ไม่สามารถ"เห็น"รูปภาพได้ ต้องใช้ ALT Text ในการอธิบายเนื้อหา
|
|
||||||
|
|
||||||
### 2. SEO จาก Google Images
|
|
||||||
รูปภาพมีโอกาส出現在 Google Images สร้าง Traffic เพิ่มเติม
|
|
||||||
|
|
||||||
### 3. Accessibility
|
|
||||||
ช่วยผู้ที่ใช้ Screen Reader เข้าใจเนื้อหา
|
|
||||||
|
|
||||||
### 4. Fallback Content
|
|
||||||
แสดงแทนเมื่อรูปภาพโหลดไม่สำเร็จ
|
|
||||||
|
|
||||||
## วิธีเขียน ALT Text ที่ดี
|
|
||||||
|
|
||||||
### ✓ ควรทำ
|
|
||||||
- อธิบายรูปภาพอย่างชัดเจน
|
|
||||||
- ใช้คำที่เกี่ยวข้องกับเนื้อหา
|
|
||||||
- รวมคำค้นหา (อย่างธรรมชาติ)
|
|
||||||
- ความยาวประมาณ 100-125 ตัวอักษร
|
|
||||||
|
|
||||||
### ✗ ไม่ควรทำ
|
|
||||||
- ใช้ "image of" หรือ "picture of"
|
|
||||||
- ยัดคำค้นหา (Keyword Stuffing)
|
|
||||||
- ปล่อยว่าง (เว้นแต่เป็น decorative)
|
|
||||||
- ยาวเกินไป
|
|
||||||
|
|
||||||
## ตัวอย่าง ALT Text ที่ดี
|
|
||||||
|
|
||||||
**รูปสินค้า:**
|
|
||||||
- ❌ `alt="รองเท้า"`
|
|
||||||
- ✅ `alt="รองเท้าวิ่ง Nike Air Zoom สีน้ำเงิน ขนาด 42"`
|
|
||||||
|
|
||||||
**รูปทีมงาน:**
|
|
||||||
- ❌ `alt="ทีม"`
|
|
||||||
- ✅ `alt="ทีมงาน MoreminiMore กำลังประชุมวางแผนกลยุทธ์ AI"`
|
|
||||||
|
|
||||||
**รูปกราฟ:**
|
|
||||||
- ❌ `alt="กราฟ"`
|
|
||||||
- ✅ `alt="กราฟแสดงยอดขายเพิ่มขึ้น 150% หลังจากใช้ AI Automation"`
|
|
||||||
|
|
||||||
## ผลกระทบต่อ SEO
|
|
||||||
|
|
||||||
การศึกษาพบว่า:
|
|
||||||
- เว็บไซต์ที่มี ALT Text ครบถ้วน มีอันดับดีกว่า 23%
|
|
||||||
- Google Images สร้าง Traffic ได้ถึง 15% ของทั้งหมด
|
|
||||||
- Accessibility ดีขึ้น ช่วย SEO ทางอ้อม
|
|
||||||
|
|
||||||
## สรุป
|
|
||||||
|
|
||||||
ALT Text เป็นปัจจัย SEO ที่ง่ายแต่ถูกมองข้ามบ่อย เริ่มต้นวันนี้เพื่อผลลัพธ์ที่ดีขึ้น!
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'Core Web Vitals และ UX ปัจจัยการจัดอันดับ Google'
|
|
||||||
description: 'ทำความเข้าใจ Core Web Vitals และ User Experience ที่มีผลต่อการจัดอันดับเว็บไซต์บน Google'
|
|
||||||
pubDate: 2024-03-15
|
|
||||||
author: 'MoreminiMore Team'
|
|
||||||
tags: ['SEO', 'Google', 'UX']
|
|
||||||
---
|
|
||||||
|
|
||||||
## Core Web Vitals คืออะไร?
|
|
||||||
|
|
||||||
Core Web Vitals เป็นปัจจัยสำคัญที่ Google ใช้ในการประเมินประสบการณ์การใช้งานเว็บไซต์ของคุณ
|
|
||||||
|
|
||||||
### 3 ปัจจัยหลัก
|
|
||||||
|
|
||||||
**1. LCP (Largest Contentful Paint)**
|
|
||||||
- ความเร็วในการโหลดเนื้อหาหลัก
|
|
||||||
- ควรต่ำกว่า 2.5 วินาที
|
|
||||||
- วัดจากองค์ประกอบที่ใหญ่ที่สุดในหน้าจอ
|
|
||||||
|
|
||||||
**2. FID (First Input Delay)**
|
|
||||||
- เวลาตอบสนองต่อการโต้ตอบครั้งแรก
|
|
||||||
- ควรต่ำกว่า 100 มิลลิวินาที
|
|
||||||
- วัดจากการคลิกครั้งแรกของผู้ใช้
|
|
||||||
|
|
||||||
**3. CLS (Cumulative Layout Shift)**
|
|
||||||
- ความเสถียรของเลย์เอาต์
|
|
||||||
- ควรต่ำกว่า 0.1
|
|
||||||
- วัดจากการขยับขององค์ประกอบ
|
|
||||||
|
|
||||||
## วิธีปรับปรุง Core Web Vitals
|
|
||||||
|
|
||||||
### ปรับปรุง LCP
|
|
||||||
- ใช้รูปภาพที่เหมาะสมและบีบอัด
|
|
||||||
- ใช้รูปแบบรูปภาพสมัยใหม่ (WebP, AVIF)
|
|
||||||
- ลด JavaScript ที่ไม่จำเป็น
|
|
||||||
- ใช้ CDN สำหรับเนื้อหาสถิต
|
|
||||||
|
|
||||||
### ปรับปรุง FID
|
|
||||||
- ลดขนาด JavaScript bundle
|
|
||||||
- ใช้ Code Splitting
|
|
||||||
- เลื่อนการโหลดสคริปต์ที่ไม่สำคัญ
|
|
||||||
- ใช้ Web Workers สำหรับงานหนัก
|
|
||||||
|
|
||||||
### ปรับปรุง CLS
|
|
||||||
- กำหนดขนาดรูปภาพและวิดีโอเสมอ
|
|
||||||
- สำรองพื้นที่สำหรับโฆษณา
|
|
||||||
- ใช้ font-display: optional
|
|
||||||
- หลีกเลี่ยงการแทรกเนื้อหาแบบไดนามิก
|
|
||||||
|
|
||||||
## UX และ SEO
|
|
||||||
|
|
||||||
Google ให้ความสำคัญกับ UX มากขึ้น:
|
|
||||||
- **Mobile-First Indexing** - เว็บไซต์ต้องใช้งานได้ดีบนมือถือ
|
|
||||||
- **Page Experience** - รวม Core Web Vitals เป็นปัจจัยการจัดอันดับ
|
|
||||||
- **Bounce Rate** - อัตราการออกจากเว็บสูงส่งผลเสียต่ออันดับ
|
|
||||||
|
|
||||||
## สรุป
|
|
||||||
|
|
||||||
การปรับปรุง Core Web Vitals จะช่วยให้:
|
|
||||||
1. อันดับ Google ดีขึ้น
|
|
||||||
2. ประสบการณ์ผู้ใช้ดีขึ้น
|
|
||||||
3. อัตราการแปลงสูงขึ้น
|
|
||||||
4. Bounce Rate ลดลง
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
---
|
|
||||||
title: 'Google Ranking Factors พื้นฐาน SEO ที่ต้องรู้'
|
|
||||||
description: 'เรียนรู้ปัจจัยพื้นฐานที่ Google ใช้ในการจัดอันดับเว็บไซต์ เริ่มต้นทำ SEO ให้ถูกต้อง'
|
|
||||||
pubDate: 2024-03-01
|
|
||||||
author: 'MoreminiMore Team'
|
|
||||||
tags: ['SEO', 'Beginner', 'Google']
|
|
||||||
---
|
|
||||||
|
|
||||||
## SEO คืออะไร?
|
|
||||||
|
|
||||||
SEO (Search Engine Optimization) คือกระบวนการปรับปรุงเว็บไซต์ให้ติดอันดับดีบน Google
|
|
||||||
|
|
||||||
## ปัจจัยการจัดอันดับของ Google
|
|
||||||
|
|
||||||
Google ใช้ปัจจัยกว่า 200 รายการในการจัดอันดับ แบ่งเป็น 3 กลุ่มหลัก:
|
|
||||||
|
|
||||||
### 1. On-Page SEO (ปัจจัยในหน้า)
|
|
||||||
|
|
||||||
**Content:**
|
|
||||||
- คุณภาพเนื้อหา
|
|
||||||
- ความเกี่ยวข้อง
|
|
||||||
- ความยาว
|
|
||||||
- อัปเดตล่าสุด
|
|
||||||
|
|
||||||
**Keywords:**
|
|
||||||
- Placement (ตำแหน่งที่ใช้)
|
|
||||||
- Density (ความหนาแน่น)
|
|
||||||
- LSI Keywords
|
|
||||||
|
|
||||||
**HTML Tags:**
|
|
||||||
- Title Tag (60 ตัวอักษร)
|
|
||||||
- Meta Description (160 ตัวอักษร)
|
|
||||||
- Header Tags (H1, H2, H3)
|
|
||||||
- Image ALT Text
|
|
||||||
|
|
||||||
**Internal Links:**
|
|
||||||
- Link ไปหน้าอื่นในเว็บ
|
|
||||||
- ใช้ Anchor Text ที่เหมาะสม
|
|
||||||
- สร้าง Site Structure
|
|
||||||
|
|
||||||
### 2. Off-Page SEO (ปัจจัยนอกหน้า)
|
|
||||||
|
|
||||||
**Backlinks:**
|
|
||||||
- จำนวนลิงก์
|
|
||||||
- คุณภาพของโดเมน
|
|
||||||
- ความเกี่ยวข้อง
|
|
||||||
- Anchor Text
|
|
||||||
|
|
||||||
**Social Signals:**
|
|
||||||
- Shares
|
|
||||||
- Likes
|
|
||||||
- Mentions
|
|
||||||
|
|
||||||
**Brand Signals:**
|
|
||||||
- Brand Searches
|
|
||||||
- Brand Mentions
|
|
||||||
- Reviews
|
|
||||||
|
|
||||||
### 3. Technical SEO (เทคนิค)
|
|
||||||
|
|
||||||
**Site Speed:**
|
|
||||||
- Page Load Time
|
|
||||||
- Core Web Vitals
|
|
||||||
- Server Response Time
|
|
||||||
|
|
||||||
**Mobile:**
|
|
||||||
- Mobile-Friendly
|
|
||||||
- Responsive Design
|
|
||||||
- Mobile Page Speed
|
|
||||||
|
|
||||||
**Security:**
|
|
||||||
- HTTPS
|
|
||||||
- SSL Certificate
|
|
||||||
- Safe Browsing
|
|
||||||
|
|
||||||
**Crawlability:**
|
|
||||||
- XML Sitemap
|
|
||||||
- Robots.txt
|
|
||||||
- Site Architecture
|
|
||||||
- Internal Linking
|
|
||||||
|
|
||||||
## เริ่มต้น SEO อย่างไร?
|
|
||||||
|
|
||||||
### Step 1: Research
|
|
||||||
- วิจัยคำค้นหา
|
|
||||||
- วิเคราะห์คู่แข่ง
|
|
||||||
- ตั้งเป้าหมาย
|
|
||||||
|
|
||||||
### Step 2: Optimize
|
|
||||||
- ปรับปรุงเนื้อหา
|
|
||||||
- ปรับปรุง Technical
|
|
||||||
- สร้าง Backlinks
|
|
||||||
|
|
||||||
### Step 3: Monitor
|
|
||||||
- ติดตามอันดับ
|
|
||||||
- วิเคราะห์ Traffic
|
|
||||||
- ปรับปรุงต่อเนื่อง
|
|
||||||
|
|
||||||
## เครื่องมือ SEO ที่ควรมี
|
|
||||||
|
|
||||||
- **Google Search Console** - ฟรี
|
|
||||||
- **Google Analytics** - ฟรี
|
|
||||||
- **Ahrefs/SEMrush** - Paid
|
|
||||||
- **Screaming Frog** - Crawl เว็บ
|
|
||||||
|
|
||||||
## สรุป
|
|
||||||
|
|
||||||
SEO เป็นกระบวนการระยะยาว แต่ผลลัพธ์คุ้มค่า:
|
|
||||||
- Traffic ฟรี
|
|
||||||
- ความน่าเชื่อถือ
|
|
||||||
- ROI สูง
|
|
||||||
|
|
||||||
เริ่มต้นวันนี้ ได้ผลลัพธ์ใน 3-6 เดือน!
|
|
||||||
@@ -8,7 +8,7 @@ interface Props {
|
|||||||
description?: string;
|
description?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title = 'moreminimore | รับทำเว็บไซต์ฟรี + จ่ายค่า Server รายปี', description = 'SMEs ไทยไม่ต้องง้องบทำเว็บหลักหมื่นอีกต่อไป' } = Astro.props;
|
const { title = 'มอร์มินิมอร์ | รับทำเว็บไซต์ฟรี + จ่ายค่า Server รายปี', description = 'SMEs ไทยไม่ต้องง้องบทำเว็บหลักหมื่นอีกต่อไป' } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
@@ -49,7 +49,6 @@ const { title = 'moreminimore | รับทำเว็บไซต์ฟรี
|
|||||||
<a href="/services" class="font-medium hover:text-secondary transition">บริการ</a>
|
<a href="/services" class="font-medium hover:text-secondary transition">บริการ</a>
|
||||||
<a href="/process" class="font-medium hover:text-secondary transition">ขั้นตอน</a>
|
<a href="/process" class="font-medium hover:text-secondary transition">ขั้นตอน</a>
|
||||||
<a href="/about-us" class="font-medium hover:text-secondary transition">เกี่ยวกับเรา</a>
|
<a href="/about-us" class="font-medium hover:text-secondary transition">เกี่ยวกับเรา</a>
|
||||||
<a href="/blog" class="font-medium hover:text-secondary transition">เรื่องน่ารู้</a>
|
|
||||||
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium">ติดต่อเรา</a>
|
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium">ติดต่อเรา</a>
|
||||||
</nav>
|
</nav>
|
||||||
<button class="lg:hidden text-black" id="mobile-menu-btn">
|
<button class="lg:hidden text-black" id="mobile-menu-btn">
|
||||||
@@ -71,7 +70,6 @@ const { title = 'moreminimore | รับทำเว็บไซต์ฟรี
|
|||||||
<a href="/services" class="font-medium hover:text-secondary transition">บริการ</a>
|
<a href="/services" class="font-medium hover:text-secondary transition">บริการ</a>
|
||||||
<a href="/process" class="font-medium hover:text-secondary transition">ขั้นตอน</a>
|
<a href="/process" class="font-medium hover:text-secondary transition">ขั้นตอน</a>
|
||||||
<a href="/about-us" class="font-medium hover:text-secondary transition">เกี่ยวกับเรา</a>
|
<a href="/about-us" class="font-medium hover:text-secondary transition">เกี่ยวกับเรา</a>
|
||||||
<a href="/blog" class="font-medium hover:text-secondary transition">เรื่องน่ารู้</a>
|
|
||||||
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium text-center">ติดต่อเรา</a>
|
<a href="/contact-us" class="bg-secondary text-white px-6 py-2 rounded-full hover:bg-secondary-hover transition font-medium text-center">ติดต่อเรา</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -124,7 +122,7 @@ const { title = 'moreminimore | รับทำเว็บไซต์ฟรี
|
|||||||
<a href="/privacy-policy" class="hover:text-primary transition">นโยบายความเป็นส่วนตัว</a>
|
<a href="/privacy-policy" class="hover:text-primary transition">นโยบายความเป็นส่วนตัว</a>
|
||||||
<button id="consent-preferences-btn" class="hover:text-primary transition">ตั้งค่าคุกกี้</button>
|
<button id="consent-preferences-btn" class="hover:text-primary transition">ตั้งค่าคุกกี้</button>
|
||||||
</div>
|
</div>
|
||||||
<p>© {new Date().getFullYear()} moreminimore. สงวนลิขสิทธิ์</p>
|
<p>© {new Date().getFullYear()} บริษัท มอร์มินิมอร์ จำกัด. สงวนลิขสิทธิ์</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
---
|
|
||||||
import Layout from '../../layouts/Layout.astro';
|
|
||||||
import { getCollection } from 'astro:content';
|
|
||||||
|
|
||||||
export async function getStaticPaths() {
|
|
||||||
const posts = await getCollection('blog');
|
|
||||||
return posts.map((post) => ({
|
|
||||||
params: { slug: post.id.replace('.md', '') },
|
|
||||||
props: { post },
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
const { post } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title={post.data.title + ' | MoreminiMore'} description={post.data.description}>
|
|
||||||
<article class="py-20 bg-white">
|
|
||||||
<div class="container mx-auto px-4 max-w-4xl">
|
|
||||||
<div class="mb-12">
|
|
||||||
<div class="flex flex-wrap gap-2 mb-6">
|
|
||||||
{post.data.tags.map((tag) => (
|
|
||||||
<span class="text-sm bg-accent-blue text-white px-3 py-1 rounded-full">{tag}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-secondary">{post.data.title}</h1>
|
|
||||||
<div class="flex items-center gap-6 text-gray-600">
|
|
||||||
<span class="flex items-center gap-2">✍️ {post.data.author}</span>
|
|
||||||
<span class="flex items-center gap-2">📅 {post.data.pubDate.toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="prose prose-lg max-w-none prose-headings:text-secondary prose-a:text-accent-blue prose-img:rounded-lg">
|
|
||||||
<post:Content />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-12 pt-8 border-t border-gray-200">
|
|
||||||
<a href="/blog" class="text-accent-blue font-medium hover:underline flex items-center gap-2">← กลับไปหน้าบล็อก</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</Layout>
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
---
|
|
||||||
import Layout from '../../layouts/Layout.astro';
|
|
||||||
import { getCollection } from 'astro:content';
|
|
||||||
|
|
||||||
const posts = await getCollection('blog');
|
|
||||||
posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="เรื่องน่ารู้ SEO & AI | MoreminiMore">
|
|
||||||
<section class="py-20 bg-gradient-hero">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<h1 class="text-5xl md:text-6xl font-bold text-center mb-6 text-secondary">เรื่องน่ารู้</h1>
|
|
||||||
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto">บทความเกี่ยวกับ SEO, AI และดิจิตอลมาร์เก็ตติ้ง</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="py-20 bg-white">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
|
|
||||||
{posts.map((post) => (
|
|
||||||
<article class="bg-gray-light rounded-2xl overflow-hidden shadow-md card-hover">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
|
||||||
{post.data.tags.map((tag) => (
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">{tag}</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<h2 class="text-xl font-bold mb-3 hover:text-accent-blue transition">
|
|
||||||
<a href={`/blog/${post.id.replace('.md', '')}/`} class="hover:underline">{post.data.title}</a>
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-600 mb-4 line-clamp-3">{post.data.description}</p>
|
|
||||||
<div class="flex items-center justify-between text-sm text-gray-500">
|
|
||||||
<span>{post.data.author}</span>
|
|
||||||
<span>{post.data.pubDate.toLocaleDateString('th-TH')}</span>
|
|
||||||
</div>
|
|
||||||
<a href={`/blog/${post.id.replace('.md', '')}/`} class="text-accent-blue font-medium hover:underline flex items-center gap-2 mt-4">อ่านเพิ่มเติม →</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Layout>
|
|
||||||
@@ -1,100 +0,0 @@
|
|||||||
---
|
|
||||||
import Layout from '../../layouts/Layout.astro'
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="เรื่องน่ารู้ SEO | MoreminiMore">
|
|
||||||
<section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
|
|
||||||
เรื่องน่ารู้ SEO
|
|
||||||
</h1>
|
|
||||||
<p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
|
|
||||||
บทความและเกร็ดความรู้เกี่ยวกับ SEO และการตลาดดิจิตอล
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="py-20 bg-white">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
||||||
<!-- Blog Post 1 -->
|
|
||||||
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="text-base text-primary font-bold mb-2">SEO</div>
|
|
||||||
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
|
|
||||||
<a href="/core-web-vitals-ux-google-ranking-factors-4">
|
|
||||||
Core Web Vitals และ UX ปัจจัยการจัดอันดับ Google
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-600 text-base mb-4">
|
|
||||||
ทำความเข้าใจ Core Web Vitals และ User Experience ที่มีผลต่อการจัดอันดับเว็บไซต์บน Google
|
|
||||||
</p>
|
|
||||||
<a href="/core-web-vitals-ux-google-ranking-factors-4" class="text-primary font-medium hover:underline">
|
|
||||||
อ่านเพิ่มเติม →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Blog Post 2 -->
|
|
||||||
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="text-base text-primary font-bold mb-2">SEO</div>
|
|
||||||
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
|
|
||||||
<a href="/alt-text-seo-google-ranking-factors-3">
|
|
||||||
ALT Text กับ SEO ปัจจัยที่ 3 ของ Google
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-600 text-base mb-4">
|
|
||||||
การเขียน ALT Text สำหรับรูปภาพ ช่วย SEO อย่างไร และทำไม Google ให้ความสำคัญ
|
|
||||||
</p>
|
|
||||||
<a href="/alt-text-seo-google-ranking-factors-3" class="text-primary font-medium hover:underline">
|
|
||||||
อ่านเพิ่มเติม →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Blog Post 3 -->
|
|
||||||
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="text-base text-primary font-bold mb-2">SEO</div>
|
|
||||||
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
|
|
||||||
<a href="/8-seo-google-ranking-factors-2">
|
|
||||||
8 ปัจจัย SEO สำหรับ Google Ranking
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-600 text-base mb-4">
|
|
||||||
8 ปัจจัยสำคัญที่ Google ใช้ในการจัดอันดับเว็บไซต์ คุณทำครบหรือยัง?
|
|
||||||
</p>
|
|
||||||
<a href="/8-seo-google-ranking-factors-2" class="text-primary font-medium hover:underline">
|
|
||||||
อ่านเพิ่มเติม →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Blog Post 4 -->
|
|
||||||
<article class="bg-gray-50 rounded-lg overflow-hidden shadow-md hover:shadow-xl transition">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="text-base text-primary font-bold mb-2">SEO</div>
|
|
||||||
<h2 class="text-xl font-bold mb-3 hover:text-primary transition">
|
|
||||||
<a href="/google-ranking-factors-1">
|
|
||||||
Google Ranking Factors พื้นฐาน SEO ที่ต้องรู้
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<p class="text-gray-600 text-base mb-4">
|
|
||||||
เรียนรู้ปัจจัยพื้นฐานที่ Google ใช้ในการจัดอันดับเว็บไซต์ เริ่มต้นทำ SEO ให้ถูกต้อง
|
|
||||||
</p>
|
|
||||||
<a href="/google-ranking-factors-1" class="text-primary font-medium hover:underline">
|
|
||||||
อ่านเพิ่มเติม →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-12">
|
|
||||||
<p class="text-gray-500">
|
|
||||||
กำลังอัปเดตบทความใหม่เร็ว ๆ นี้...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Layout>
|
|
||||||
@@ -165,67 +165,6 @@ import Layout from '../layouts/Layout.astro'
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Latest Blog Posts -->
|
|
||||||
<section class="py-20 bg-gray-light">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-4xl md:text-5xl font-bold mb-4">เรื่องน่ารู้ล่าสุด</h2>
|
|
||||||
<p class="text-xl text-gray-600 max-w-3xl mx-auto">บทความเกี่ยวกับ SEO, AI และดิจิตอลมาร์เก็ตติ้ง</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
||||||
<!-- Blog 1 -->
|
|
||||||
<article class="bg-white rounded-2xl overflow-hidden shadow-md card-hover">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">SEO</span>
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">Google</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3 hover:text-secondary transition">
|
|
||||||
<a href="/blog/core-web-vitals/" class="hover:underline">Core Web Vitals และ UX ปัจจัยการจัดอันดับ Google</a>
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-600 mb-4 line-clamp-3">ทำความเข้าใจ Core Web Vitals และ User Experience ที่มีผลต่อการจัดอันดับเว็บไซต์บน Google</p>
|
|
||||||
<a href="/blog/core-web-vitals/" class="text-secondary font-medium hover:underline flex items-center gap-2">อ่านเพิ่มเติม →</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Blog 2 -->
|
|
||||||
<article class="bg-white rounded-2xl overflow-hidden shadow-md card-hover">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">SEO</span>
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">Images</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3 hover:text-secondary transition">
|
|
||||||
<a href="/blog/alt-text-seo/" class="hover:underline">ALT Text กับ SEO ปัจจัยที่ 3 ของ Google</a>
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-600 mb-4 line-clamp-3">การเขียน ALT Text สำหรับรูปภาพ ช่วย SEO อย่างไร และทำไม Google ให้ความสำคัญ</p>
|
|
||||||
<a href="/blog/alt-text-seo/" class="text-secondary font-medium hover:underline flex items-center gap-2">อ่านเพิ่มเติม →</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Blog 3 -->
|
|
||||||
<article class="bg-white rounded-2xl overflow-hidden shadow-md card-hover">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex flex-wrap gap-2 mb-4">
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">SEO</span>
|
|
||||||
<span class="text-xs bg-accent-blue text-white px-3 py-1 rounded-full">Ranking</span>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold mb-3 hover:text-secondary transition">
|
|
||||||
<a href="/blog/8-seo-factors/" class="hover:underline">8 ปัจจัย SEO สำหรับ Google Ranking</a>
|
|
||||||
</h3>
|
|
||||||
<p class="text-gray-600 mb-4 line-clamp-3">8 ปัจจัยสำคัญที่ Google ใช้ในการจัดอันดับเว็บไซต์ คุณทำครบหรือยัง?</p>
|
|
||||||
<a href="/blog/8-seo-factors/" class="text-secondary font-medium hover:underline flex items-center gap-2">อ่านเพิ่มเติม →</a>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-center mt-12">
|
|
||||||
<a href="/blog" class="btn-secondary text-xl">ดูบทความทั้งหมด</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- CTA Section -->
|
<!-- CTA Section -->
|
||||||
<section class="py-20 gradient-cta text-white">
|
<section class="py-20 gradient-cta text-white">
|
||||||
<div class="container mx-auto px-4 text-center">
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user