آموزش رایگان PHP

آموزش صفحه‌بندی اطلاعات در PHP به صورت اصولی و مطابق استانداردهای سئو گوگل

1405/05/13 21:21 محراب حسن زاده
آموزش صفحه‌بندی اطلاعات در PHP به صورت اصولی و مطابق استانداردهای سئو گوگل

مقدمه: چرا صفحه‌بندی اطلاعات اهمیت دارد؟

در وب‌سایت‌هایی با حجم اطلاعات بالا مانند فروشگاه‌های اینترنتی، وبلاگ‌ها و پرتال‌های خبری، نمایش کل داده‌ها در یک صفحه غیرممکن است. این کار سرعت لود سایت را به شدت کاهش داده و تجربه کاربری (UX) بدی را ایجاد می‌کند. در این راهنما، قصد داریم نحوه پیاده‌سازی صفحه‌بندی اطلاعات در زبان PHP را با به کارگیری متدولوژی شی‌گرا و کتابخانه PDO آموزش دهیم و در کنار آن، استانداردهای حیاتی گوگل برای جلوگیری از مشکلات تکرار محتوا (Duplicate Content) و بهبود ایندکس‌پذیری را بررسی کنیم.

اصول سئو در صفحه‌بندی بر اساس استانداردهای گوگل

گوگل طی سال‌های گذشته الگوهای مواجهه با صفحات سریالی (Paginated Pages) را تغییر داده است. برای اینکه ربات‌های خزنده گوگل بتوانند تمام صفحات سایت شما را بدون نقص کراول کنند، رعایت اصول زیر الزامی است:

  • استفاده از آدرس‌های خوانا (Clean URLs): بهتر است ساختار آدرس‌ها به جای پارامترهای نامفهوم، منظم و قابل خواندن باشند (مثلا /blog/page/2 به جای /blog.php?p=12&offset=2).
  • ساختار تگ‌های کنونیکال (Canonical Tags): هر صفحه از صفحه‌بندی باید دارای یک تگ کانونی به آدرس خودِ آن صفحه باشد. از اشاره دادن تگ Canonical صفحه ۲ یا ۳ به صفحه ۱ خودداری کنید، چرا که این کار مانع از ایندکس شدن آیتم‌های موجود در صفحات بعدی می‌شود.
  • محدود نکردن کراولرها: لینک‌های صفحه‌بندی باید به شکل تگ‌های واقعی لینک (< a href = " ... " > ) پیاده‌سازی شوند تا موتورهای جستجو بتوانند آن‌ها را دنبال کنند. ساختارهای مبتنی بر کلیک جاوااسکریپتی بدون تگ a برای سئو مناسب نیستند.

گام اول: پیکربندی اتصال ایمن دیتابیس در PHP با PDO

اولین گام، برقراری ارتباط با پایگاه داده است. استفاده از PDO به دلیل پشتیبانی از Prepared Statements، از حملات تزریق کد (SQL Injection) جلوگیری می‌کند:


$host = 'localhost';
$db   = 'my_database';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = 'mysql:host=' . $host . ';dbname=' . $db . ';charset=' . $charset;
try {
    $pdo = new PDO($dsn, $user, $pass, [
        PDO::ATTR_ERRMODE            =--> PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES   => false,
    ]);
} catch (\PDOException $e) {
    die('Error: ' . $e->getMessage());
}

گام دوم: محاسبه منطق ریاضی صفحه‌بندی (Pagination Logic)

برای پیاده‌سازی صفحه‌بندی به دو فاکتور اصلی نیاز داریم: تعداد کل آیتم‌ها جهت محاسبه کل صفحات و اندیس شروع داده‌ها (Offset) برای صفحه فعلی:


$limit = 10;

$page = isset($_GET['page']) && is_numeric($_GET['page']) ? (int)$_GET['page'] : 1;
if ($page < 1) {
    $page = 1;
}

$offset = ($page - 1) * $limit;

$total_stmt = $pdo--->query('SELECT COUNT(*) FROM articles');
$total_items = $total_stmt->fetchColumn();

$total_pages = ceil($total_items / $limit);

$stmt = $pdo->prepare('SELECT * FROM articles ORDER BY id DESC LIMIT :limit OFFSET :offset');
$stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
$articles = $stmt->fetchAll();

گام سوم: خروجی استاندارد HTML و آدرس‌دهی اصولی برای گوگل

در طراحی رابط کاربری بخش صفحه‌بندی، ساختار کدهای HTML اهمیت فوق‌العاده‌ای در کراول شدن محتوا دارند. همیشه از تگ‌های استاندارد استفاده کنید تا خزنده به درستی مسیر را بیابد:

< nav class='pagination-container' >
    < ul class='pagination' >
        < li >< a href='?page=1' class='prev-page' >صفحه قبل< / a >< / li >
        < li >< a href='?page=1' class='active' >1< / a >< / li >
        < li >< a href='?page=2' >2< / a >< / li >
        < li >< a href='?page=3' >3< / a >< / li >
        < li >< a href='?page=2' class='next-page' >صفحه بعد< / a >< / li >
    < / ul >
< / nav >

نکات تکمیلی برای بهینه‌سازی نهایی

در گذشته گوگل استفاده از تگ‌های rel="next" و rel="prev" را در تگ head برای شناسایی توالی صفحات توصیه می‌کرد. اگرچه امروزه موتور جستجوی گوگل به اندازه کافی هوشمند شده است و می‌تواند این توالی را بدون تگ‌های مذکور تشخیص دهد، اما همچنان پیاده‌سازی آنها به عنوان یک سیگنال قوی برای موتورهای جستجوی دیگر نظیر Bing بسیار کارآمد است. همیشه اطمینان حاصل کنید که پارامترهای صفحه‌بندی منجر به تولید کوئری‌های تکراری و ارجاع نامعتبر نشوند.


پیشنمایش

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل
1403/08/05 20:55

آموزش اصول کار با WebSockets و ارتباطات بلادرنگ در وب: راهنمای کامل

مطالعه بیشتر
آموزش کامل ثابت‌ها در PHP: تفاوت عمیق define و const طبق استانداردهای گوگل
1405/03/24 01:10

آموزش کامل ثابت‌ها در PHP: تفاوت عمیق define و const طبق استانداردهای گوگل

مطالعه بیشتر
آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)
1404/05/15 22:45

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)

مطالعه بیشتر
آموزش صفر تا صد ساخت ماشین حساب با جاوا اسکریپت (پروژه محور و کاربردی)
1405/03/13 23:55

آموزش صفر تا صد ساخت ماشین حساب با جاوا اسکریپت (پروژه محور و کاربردی)

مطالعه بیشتر
آموزش کامل $_SERVER در PHP: راهنمای جامع متغیرهای سوپرگلوبال سرور
1405/05/01 20:04

آموزش کامل $_SERVER در PHP: راهنمای جامع متغیرهای سوپرگلوبال سرور

مطالعه بیشتر
پارامترها و بازگشت از توابع در جاوا اسکریپت: نحوه تعریف و مدیریت خروجی‌ها
1402/11/02 23:32

پارامترها و بازگشت از توابع در جاوا اسکریپت: نحوه تعریف و مدیریت خروجی‌ها

مطالعه بیشتر
آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب
1403/08/16 23:05

آموزش ایجاد Transitions و انیمیشن‌های صفحه بارگذاری (Loader) در CSS: طراحی لودرهای جذاب

مطالعه بیشتر
آموزش CSS Transform و Transition: تبدیل‌ها و ایجاد تغییرات ظاهری پویا
1402/06/10 18:32

آموزش CSS Transform و Transition: تبدیل‌ها و ایجاد تغییرات ظاهری پویا

مطالعه بیشتر
استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل
1403/08/16 22:58

استفاده از clip-path در CSS برای برش‌های زیبا و جذاب: راهنمای کامل

مطالعه بیشتر
آموزش کامل و امن آپلود فایل در PHP (مطابق استاندارد گوگل)
1405/05/01 20:17

آموزش کامل و امن آپلود فایل در PHP (مطابق استاندارد گوگل)

مطالعه بیشتر
آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا
1403/08/16 22:20

آموزش ساخت Toggle Switch با CSS: طراحی دکمه‌های تغییر وضعیت جذاب و واکنش‌گرا

مطالعه بیشتر
آموزش گام به گام طراحی مگا منو (Mega Menu) مدرن با CSS و HTML
1405/03/13 23:44

آموزش گام به گام طراحی مگا منو (Mega Menu) مدرن با CSS و HTML

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد