طی سالهای اخیر، مشخص کردن لینکهای اسپانسری و همکاری در فروش (Affiliate) و مدیریت صحیح ویژگی rel برای سئو، به یک ضرورت حرفهای تبدیل شده است. اکثر وبسایتها با انبوهی از مطالب قدیمی و لینکهای متعدد روبرو هستند که باید تگ sponsored داشته باشند یا بهصورت nofollow مدیریت شوند تا اعتماد کاربران را جلب کنند و ساختار لینکسازی داخلی و خارجی نیز دچار اختلال نشود.
این مقاله با تمرکز بر ویرایشگر وردپرس (کلاسیک و گوتنبرگ)، رویکردی عملی ارائه میدهد تا بتوان لینکهای دارای rel=sponsored یا rel=nofollow را مستقیماً در محیط ویرایش تنظیم کرد. توسط چند خط CSS یا از طریق هوکها میتوان لینکهای حساس را شناسایی و درباره افزودن یا حذف تگها تصمیمگیری کرد. در نتیجه، فرآیند اعمال تغییرات و بهینهسازی محتوا سریعتر و کامل تر انجام می شود؛ بدون آنکه نیاز به ابزارهای اضافی یا تغییرات سنگین در قالب وجود داشته باشد.
تصویر(1)
نحوه افزودن CSS به ویرایشگر وردپرس جهت مشخص کردن لینکهای اسپانسری
برای تمایز لینکها، لازم است مقداری CSS به ویرایشگر وردپرس اضافه شود. اگر با قالب کار میکنید، میتوانید بهسادگی یک فایل CSS سفارشی در ویرایشگر اضافه نمایید؛ در غیر این صورت، CSS را بهصورت درونخطی (inline) با استفاده از یک هوک (hook) درج کنید.
استفاده از یک فایل ویرایشگر CSS
کافی است یک فایل جدید با نام (style-editor.css) در قالب خود ایجاد کرده و کد زیر را اضافه کنید:
add_action( 'after_setup_theme', function() {
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
} );
وردپرس بهطور خودکار این فایل را هم در ویرایشگر کلاسیک (Classic Editor) و هم ویرایشگر بلوک (Block Editor) بارگذاری خواهد کرد.
افزودن CSS درونخطی (Inline CSS):
اگر از قالب استفاده نمیکنید، همچنان میتوانید CSS را بهصورت درونخطی در ویرایشگر اضافه کنید. برای این کار باید به هوک (enqueue_block_editor_assets) متصل شوید:
/**
* Hooks into "enqueue_block_editor_assets" to add inline styles to the Gutenberg Editor.
*/
add_action( 'enqueue_block_editor_assets', function() {
wp_register_style( 'wpexplorer-editor-styles', false );
$css = 'YOUR CSS HERE';
wp_add_inline_style( 'wpexplorer-editor-styles', $css );
wp_enqueue_style( 'wpexplorer-editor-styles' );
} );
نحوه مشخص کردن لینکهای اسپانسری یا Nofollow با CSS
مشخص کردن لینکها بر اساس ویژگی rel بسیار ساده خواهد بود. کافی است از انتخابگر ویژگی (~=) در CSS استفاده کنید. اگر با انتخابگرهای ویژگی (attribute selectors) آشنایی ندارید، توصیه میشود به وبسایت W3Schools مراجعه نمایید.
در ادامه نمونهای از این نوع CSS آورده شده است:
[rel~=sponsored], a[rel~=nofollow] {
background: #FFFF00;
color: #000;
}
این CSS باعث میشود هر لینکی که دارای ویژگی (rel="sponsored") یا (rel="nofollow") است، به شکل زیر نمایش داده شود:
Affiliate Link
از آنجا که با ویرایشگر وردپرس کار میکنید، بهتر است کلاس (classname) با نام .editor-styles-wrapper را هدف قرار دهیم.
اگر از روش editor-styles و بارگذاری فایل CSS از طریق قالب فرزند یا زمانی که از ویرایشگر کلاسیک استفاده میکنید نیازی به استفاده از عنصر .editor-styles-wrapper نیست. با این حال، اضافه کردن آن هم مشکلی ایجاد نمیکند.
کد CSS بروزشده به شکل زیر خواهد بود:
editor-styles-wrapper a:is([rel~=sponsored],[rel~=nofollow]) {
background: #FFFF00;
color: #000;
}
اگر از فایل (editor-style.css) استفاده میکنید، کافی است این کد را به آن اضافه و ذخیره کنید. در غیر این صورت، میتوانید از تابع زیر برای درج کد بهصورت درونخطی استفاده نمایید:
/**
* Adds inline CSS to the block editor.
*/
add_action( 'enqueue_block_editor_assets', function() {
wp_register_style( 'wpexplorer-editor-highlight-rel-sponsored-nofollow', false );
wp_add_inline_style(
'wpexplorer-editor-highlight-rel-sponsored-nofollow',
'.editor-styles-wrapper a:is([rel~=sponsored],[rel~=nofollow]){background:#FFFF00;color: #000;}'
);
wp_enqueue_style( 'wpexplorer-editor-highlight-rel-sponsored-nofollow' );
} );
با افزودن این کد، لینکهای nofollow و sponsored در هر پستی که ویرایش میکنید متمایز خواهند شد و میتوانید بهراحتی آنها را پیدا نمایید.
تصویر(2)
بدین ترتیب میتوان هر پست را بهسرعت بررسی کرد تا لینکهای nofollow و sponsored مشخص شوند. البته این ویژگی میتواند برای اهداف دیگر نیز مورد استفاده قرار گیرد.
نتیجهگیری
مدیریت صحیح لینکهای همکاری در فروش و استفاده درست از ویژگی rel نهتنها برای رعایت اصول سئو و جلب اعتماد کاربران اهمیت دارد بلکه فرآیند بروزرسانی محتوای قدیمی و بهینهسازی ساختار لینکسازی را سادهتر میکند. با بهکارگیری چند خط کد CSS در ویرایشگر وردپرس، میتوان لینکهای حساس را بهطور بصری متمایز کرد و در زمان ویرایش، تصمیمگیری درباره افزودن یا اصلاح برچسبهای sponsored و nofollow را تسهیل نمود. این روش سبک، عملی و بدون تغییرات اساسی در قالب، به مدیران وبسایت کمک میکند تا هم الزامات شفافیت را رعایت کنند و هم محتوایی استاندارد و سازگار با الگوریتمهای موتورهای جستجو ارائه دهند.