برجسته سازی لینک های Sponsored و Nofollow در وردپرس – راهنمای سئو حرفه ای

مقدمه

در دنیای امروز، مدیریت درست لینک های «Sponsored» و «Nofollow» در وب سایت های وردپرسی نه تنها برای بهبود سئو بلکه برای رعایت قوانین افیلیت و شفاف سازی تجربه کاربری حیاتی است. اگر به تازگی یک سایت افیلیت راه اندازی کرده اید یا محتواهای تبلیغاتی در سایت تان می نویسید، احتمالاً با این سؤال مواجه شده اید: چگونه می توانم این لینک ها را به صورت واضح و متمایز برای بازدیدکنندگان و موتورهای جستجو نمایش دهم؟

در این مقاله، گام به گام و به زبانی ساده به شما نشان می دهیم که چگونه با استفاده از ابزارهای داخلی وردپرس، افزونه های رایج یا حتی با افزودن کدهای کوتاه به قالب، لینک های «Sponsored» و «Nofollow» را برجسته کنید. توضیحاتی فنی اما قابل درک، مثال های عملی، و نکات مهمی برای جلوگیری از خطاهای رایج در این زمینه در انتهای هر بخش آورده شده است.

در ادامه، ابتدا به تعریف دقیق این دو نوع لینک می پردازیم، سپس روش های مختلف (از تنظیمات پیش فرض وردپرس تا افزونه های تخصصی) را بررسی می کنیم و در نهایت نحوه سفارشی سازی ظاهر آن ها با CSS را برای شما به صورت قدم به‑قدم ارائه می دهیم. هدف ما این است که پس از خواندن این راهنما، شما بتوانید با اطمینان و به صورت حرفه ای، لینک های تبلیغاتی و نوفالو را در سایت تان مدیریت و به چشم بیایید.

با ما همراه باشید؛ این مسیر نه تنها سئو و اعتبار سایت تان را ارتقا می دهد، بلکه به کاربران نشان می دهد که چه محتوایی تجاری است و چه محتوایی ارجاعی، بدون اینکه نیازی به دانش عمیق برنامه نویسی داشته باشید. 🚀

فهرست مطالب

• افزودن کلاس سفارشی برای شناسایی لینک های اسپانسری
• پیکربندی ویژگی nofollow از طریق فایل functions.php
• به کارگیری افزونه های مناسب برای نمایش واضح لینک های تبلیغی
• آزمون و بهینه سازی نمایش لینک های اسپانسری در مرورگرها

افزودن کلاس سفارشی برای شناسایی لینک های اسپانسری

برای تمایز دادن لینک های اسپانسری می توانید یک کلاس سفارشی به آن ها اضافه کنید. ساده ترین راه این است که از فیلتر the_content در فایل functions.php قالب استفاده کنید و تمام لینک های دارای ویژگی rel="sponsored" یا rel="nofollow" را به صورت خودکار با یک کلاس مخصوص (مثلاً sp-sponsored) تزئین کنید. نمونه کد زیر را در functions.php اضافه کنید:

function add_custom_class_to_sponsored_links( $content ) {
    $pattern = '/]+)(rel="(?:[^"]*?)(sponsored|nofollow)(?:[^"]*?)")([^>]*?)>/i';
    $replacement = '';
    return preg_replace( $pattern, $replacement, $content );
}
add_filter( 'the_content', 'add_custom_class_to_sponsored_links' );

• rel=”sponsored” یا rel=”nofollow” را هدف گیری می کند.
• کلاس sp-sponsored به تگ اضافه می شود.
• قالب شما می تواند با CSS این کلاس را به صورت دلخواه استایل بدهد.

پس از افزودن کلاس، می توانید با استفاده از CSS یا حتی یک جدول استایل، ظاهر لینک های اسپانسری را به صورت واضحی برجسته کنید. به عنوان مثال، در فایل style.css یا از طریق سفارشی ساز وردپرس، کدهای زیر را اضافه کنید:

.sp-sponsored {
    background-color: #fff3cd;
    border-bottom: 2px solid #ff9800;
    padding: 2px 4px;
    border-radius: 3px;
}

پیکربندی ویژگی nofollow از طریق فایل functions.php

برای افزودن ویژگی rel=”nofollow” به لینک های خاص از طریق functions.php، می توانید از فیلتر the_content یا هوک wp_targeted_link_rel استفاده کنید. در ادامه یک قطعه کد ساده آورده شده که به صورت خودکار به تمام لینک های دارای کلاس .sponsored یا .affiliate ویژگی nofollow را اضافه می کند. کافیست این کد را در فایل functions.php قالب تان قرار دهید و سپس با افزودن کلاس های مورد نظر به لینک ها، رفتار مورد انتظار را خواهید داشت.

function add_nofollow_to_special_links( $content ) {
    // جستجو برای لینک های دارای کلاس های مخصوص
    $content = preg_replace_callback(
        '/]+)class=["']([^"']*?)(sponsored|affiliate)([^"']*?)["']([^>]*)>/i',
        function( $matches ) {
            $attrs = $matches[1] . $matches[2] . $matches[3] . $matches[4] . $matches[5];
            // اگر rel قبلاً تعریف نشده باشد، اضافه می کنیم
            if ( strpos( $attrs, 'rel=' ) === false ) {
                $attrs .= ' rel="nofollow"';
            } elseif ( ! preg_match( '/rel=['"]([^'"]*?)nofollow([^'"]*?)['"]/i', $attrs ) ) {
                $attrs = preg_replace( '/rel=(['"][^'"]*['"])/i', 'rel="$1 nofollow"', $attrs );
            }
            return '';
        },
        $content
    );
    return $content;
}
add_filter( 'the_content', 'add_nofollow_to_special_links' );

پس از افزودن کد، می توانید برای نمایش بصری لینک های Sponsored و Nofollow یک استایل سفارشی تعریف کنید. به عنوان مثال، با استفاده از CSS زیر، این لینک ها را به رنگ نارنجی و زیرخط می کنیم تا بازدیدکنندگان به راحتی تشخیص دهند:

.sponsored,
.nofollow {
    color: #ff6600;
    text-decoration: underline;
}

• گام ۱: کد PHP را در functions.php اضافه کنید.
• گام ۲: کلاس های .sponsored یا .affiliate را به لینک های مورد نظر اختصاص دهید.
• گام ۳: CSS سفارشی را در فایل استایل قالب یا بخش Additional CSS وارد کنید.
• گام ۴: خروجی را در مرورگر بررسی کنید؛ لینک های هدف باید با رنگ و زیرخط مشخص شوند و در سورس کد دارای ویژگی rel="nofollow" باشند.

به کارگیری افزونه های مناسب برای نمایش واضح لینک های تبلیغی

برای اطمینان از اینکه بازدیدکنندگان به راحتی می توانند لینک های تبلیغی یا nofollow را تشخیص دهند، استفاده از افزونه های مخصوص نمایش واضح این لینک ها ضروری است. این ابزارها نه تنها قابلیت افزودن کلاس های CSS سفارشی مثل .sponsored یا .nofollow را فراهم می کنند، بلکه به صورت خودکار ویژگی rel="sponsored" یا rel="nofollow" را به تگ  اضافه می کنند. با ترکیب این افزونه ها و یک قالب سبک دار (مثلاً .highlight-sponsored { background:#fff8e1; border-left:4px solid #ff9800; padding:8px; }) می توانید یک تجربه کاربری شفاف و در عین حال سازگار با قوانین موتورهای جستجو ایجاد کنید.

در زیر فهرستی از افزونه های پرکاربرد و یک جدول مقایسه ای کوتاه برای انتخاب بهترین گزینه آورده شده است:

• Sponsored Links – WP: به صورت خودکار تمام لینک های خروجی را به rel="sponsored" تبدیل می کند و امکان تنظیم رنگ و پس زمینه برای نمایش واضح دارد.
• WP NoFollow & Sponsored: قابلیت افزودن هر دو ویژگی nofollow و sponsored را به صورت جداگانه یا ترکیبی ارائه می دهد؛ همچنین از شرت کدهای سفارشی پشتیبانی می کند.
• Pretty Links Pro: نه تنها لینک های کوتاه شده را مدیریت می کند، بلکه می تواند با یک گزینه ساده، لینک های تبلیغی را علامت گذاری و در پنل مدیریت رنگ بندی نماید.
• Link Whisper: برای سئو داخلی عالی است؛ با قابلیت افزودن توضیح نامه های سفارشی برای لینک های «nofollow» و «sponsored» در ویرایشگر گوتنبرگ.

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

برای اطمینان از اینکه لینک های اسپانسری و nofollow در تمام مرورگرهای محبوب به درستی نمایش داده می شوند، ابتدا باید یک آزمون چندمرورگره انجام دهید. این کار را می توانید با ابزارهای DevTools هر مرورگر یا سرویس های آنلاین مانند BrowserStack انجام دهید. سپس، با بررسی Specificity و وزن دار بودن استایل ها، اطمینان حاصل کنید که قوانین CSS شما بر استایل پیش فرض مرورگرها پیروز می شوند. مراحل اصلی عبارتند از:

• بارگذاری صفحه در Chrome, Firefox, Safari و Edge؛ بررسی رنگ، حاشیه و آیکون های سفارشی سازی شده.
• استفاده از inspector برای مشاهدهٔ computed style و شناسایی هرگونه تداخل.
• تست حالت های hover و focus؛ اطمینان از این که حالت های تعاملی هم سان هستند.
• بررسی واکنش گرایی؛ اطمینان از اینکه لینک ها در موبایل و دسکتاپ به درستی مقیاس می شوند.

پس از شناسایی مشکلات، بهینه سازی نمایش لینک های اسپانسری با استفاده از CSS مدرن و کلاس های مخصوص WordPress می رسد. می توانید یک کلاس سفارشی مثل .sponsored-link تعریف کنید و ویژگی های زیر را به کار ببرید تا هم سرعت بارگذاری حفظ شود و هم سازگاری مرورگرها تضمین گردد:

در نهایت، برای کاهش بار CSS، می توانید استایل های عمومی را در فایل style.css قالب خود قرار داده و فقط کلاس های .sponsored-link و .nofollow را در functions.php به صورت enqueue کنید. این کار نه تنها سرعت لود صفحه را بهبود می بخشد، بلکه از بروز تداخل با افزونه های دیگر جلوگیری می کند.

در پایان، امیدواریم که این راهنمای گام به گام به شما کمک کرده باشد تا به سادگی لینک های Sponsored و Nofollow را در سایت وردپرس خود شناسایی، برجسته و مدیریت کنید. با استفاده از افزونه های مناسب یا کدهای سفارشی که در مقاله بررسی کردیم، می توانید به سرعت استایل دلخواه خود را به این لینک ها اعمال کنید و همزمان به بهینه سازی سئو و تجربه کاربری بهتر دست یابید.

به یاد داشته باشید:

1. شناسایی دقیق: ابتدا تمام لینک های مرتبط با تبلیغات یا منابع خارجی را پیدا کنید.
2. استفاده از کلاس یا ویژگی: با افزودن کلاس CSS یا ویژگی rel="sponsored nofollow"، می توانید به راحتی آن ها را تمییز دهید.
3. استایل دهی واضح: با CSS یا افزونه های استایل ساز، رنگ، زیرخط یا پس زمینه ای متفاوت برای این لینک ها تعیین کنید تا برای بازدیدکنندگان قابل تشخیص باشد.
4. آزمون و بازبینی: پس از اعمال تغییرات، حتماً در مرورگرهای مختلف و ابزارهای سئو (مانند Google Search Console) بررسی کنید که لینک ها به درستی شناسایی می شوند.

اگر در طول مسیر با مشکلی مواجه شدید یا سوالی داشتید، حتماً در بخش نظرات با ما به اشتراک بگذارید؛ تیم ما خوشحال می شود که راهنمایی تان کنیم. همچنین می توانید از مقالات مرتبط دیگر در این وبلاگ برای گسترش دانش خود در زمینه سئو و بهینه سازی وردپرس بهره مند شوید.

موفق باشید و به روز نگه داشتن سایت تان را ادامه دهید! 🚀