پردازش پویا توسط رندرتون

بیشتر قالب‌های امروزی برای نمایش محتوا از جاوا اسکریپت استفاده می کنند. این بدین معناست که زمان بیشتری می برد تا گوگل محتوای شما را نمایش دهد یا آن را به روز کند که در نتیجه این امر به سئو سایت شما لطمه می زند.

راه حلی که امسال به آن رسیدیم استفاده از پردازش پویاست.

روش های زیادی برای اجرای این طرح وجود دارد.

این پست نمونه‌ای از پیاده سازی این روش با استفاده از رندرتون که راه حلی متن-باز در بستر کرومیوم هست(کرومیم، پروژه‌ای برای ساخت یک مرورگر وب متن باز است که گوگل کروم و چند مرورگر دیگر از جمله مرورگر اپرا بر پایه آن هستند) را نشان می دهد.

چه سایت هایی باید استفاده از این روش را مدنظر قرار دهند؟

همه موتورهای جستجوگر یا بات های شبکه های اجتماعی که از سایت شما بازدید می کنند قادر به اجرای جاوا اسکریپت نیستند. ممکن است زمان زیادی صرف شود تا ربات گوگل جاوا اسکریپت را اجرا کند همچنین یک سری محدودیت نیز دارد.

برای مثال:

پردازش پویا برای محتوایی که به طور مرتب تغییر می کند و برای اجرا به جاوا اسکریپت نیاز دارد مفید است. تجربه کاربری سایت شما (به خصوص در اولین نگاه) ممکن است بهبود پیدا کند اگر از پردازش ترکیبی استفاده کنید (مثل Angular Universal).

پردازش پویا چیست و چطور کار می کند؟

پردازش پویا به معنی تعویض بین پردازش از سمت کاربر و محتوای از پیش پردازش شده برای کاربران خاص است. شما به چیزی نیاز دارید که جاوا اسکریپت را اجرا کرده و HTML تولید کند.

رندرتون پروژه ای متن‌ باز است که از کرومیوم برای پردازش استفاده میکند.

برنامه های تک صفحه ای معمولا اطلاعات را در پس زمینه بارگیری میکنند یا این کار را به تعویق می اندازد تا محتوای آن ها را پردازش کند. رندرتون مکانیسم هایی دارد تا مشخص کند چه زمانی یک سایت کاملا اجرا شده. و این کار را تا جایی ادامه می دهد که تمام درخواست ها به اتمام برسد و کار خاص دیگری باقی نماند.

مطالب این پست:

• نگاهی به یک نمونه برنامه تحت وب
• راه اندازی یک سرور express.js کوچک در برنامه تحت وب
• نصب و تنظیم رندرتون به عنوان یک میان افزار برای پردازش پویا

نمونه برنامه تحت وب

صفحه Kitten Corner با استفاده از جاوا اسکریپت عکس های مختلفی از گربه ها به کمک یک API دریافت کرده آنها را در ردیف هایی نشان میدهد.

عکس های بامزه از گربه ها و کلیدی که عکس های بیشتری نمایش میدهد – این صحفه هرچی که لازمه داره!

متن جاوا اسکریپت:

const apiUrl = ‘https://api.thecatapi.com/v1/images/search?limit=50’;

const tpl = document.querySelector(‘template’).content;
const container = document.querySelector(‘ul’);

function init () {
fetch(apiUrl)
.then(response => response.json())
.then(cats => {
container.innerHTML = ”;
cats
.map(cat => {
const li = document.importNode(tpl, true);
li.querySelector(‘img’).src = cat.url;
return li;
}).forEach(li => container.appendChild(li));
})
}

init();

document.querySelector(‘button’).addEventListener(‘click’, init);

این صفحه از آخرین نسخه جاوا اسکریپت (ES6) استفاده میکند که گوگل‌بات هنوز از آن پشتیبانی نمیکند. میتوانیم نسخه مناسب گوشی را امتحان کنیم تا ببینیم ربات گوگل می تواند محتوا را نمایش دهد یا خیر?

این امتحان نشان میدهد که صفحه مورد نظر مناسب گوشی است ولی در تصویر گرفته شده خبری از عکس های گربه ها نیست. سرتیتر و دکمه وجود دارند ولی هیچکدام از عکس گربه ها نشان داده نشده است. در حالی که این مشکل قابل حل است تمرین خوبی است تا یاد بگیریم چطور از پردازش پویا استفاده کنیم.

پردازش پویا به گوگل‌بات کمک میکند که بدون تغییر در کدهای سایت عکس گربه ها نمایش داده شوند.

راه اندازی سرور

برای پیشتیبانی از این برنامه از express که یک کتابخانه node.js برای ساخت سرور است استفاده میکنیم. کد سرور را در پایین مشاهده میکنید (میتواند این کد را به صورت کامل در اینجا مشاهده کنید):

const express = require(‘express’);

const app = express();

const DIST_FOLDER = process.cwd() + ‘/docs’;
const PORT = process.env.PORT || 8080;

// Serve static assets (images, css, etc.)
app.get(‘*.*’, express.static(DIST_FOLDER));

// Point all other URLs to index.html for our single page app
app.get(‘*’, (req, res) => {
res.sendFile(DIST_FOLDER + ‘/index.html’);
});

// Start Express Server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT} from ${DIST_FOLDER}`);
});

سپس مرورگر خود را به http://localhost:8080/ ببرید. حالا وقت راه اندازی پردازش پویاست.

مثالی در استفاده از رندرتون

رندرتون سروری را به کار می اندازد که URL را گرفته کدهای HTML آن را در کرومیوم برمیگرداند. طبق توصیه های پروژه رندرتون پیش می رویم و از فضای ابری گوگل استفاده میکنیم.

شکل ساخت یک پروژه در فضای ابری گوگل

لطفا توجه داشته باشید که میتوانید از سطح رایگان استفاده کنید چرا برای استفاده از آن در تولید نیاز به پرداخت هزینه با توجه به قیمت های فضای ابری گوگل دارد.

• در محیط ابری گوگل یه پروژه جدید ایجاد کنید. Project ID درج شده در پایین ورودی را یادداشت کنید.
• SDK ابری گوگل را همانطور که در این اسناد توضیح داده شده نصب کنید و وارد شوید.
• مخازن رندرتون را از GitHub کپی کنید.

git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron

• دستور زیر را اجرا کنید تا توابع نصب شده و رندرتون بر روی کامپیوتر شما ساخته شود.

npm install && npm run build

• مخزن رندرتون را با ساختن فایلی جدید به نام config.json در مسیر رندرتون با استفاده از کد زیر ایجاد کنید.

{ “datastoreCache”: true }

• کد زیر را از مسیر رندرتون اجرا کنید.

به جای YOUR_PROJECT_ID آیدی پروژه خود را که در مرحله اول یادداشت کردید وارد کنید.

gcloud app deploy app.yaml –project

YOUR_PROJECT_ID

• منطقه را انتخاب کنید و منتظر بمانید تا عملیات به پایان برسد.
• URL سایت خود را به صورت YOUR_PROJECT_ID.appspot.com وارد کنید(به جای YOUR_PROJECT_ID نام پروژه خود را قرار دهید).

اکنون محیط رندرتون را با یک ورودی و چند کلید خواهید دید.

رابط کاربری رندرتون بعد از راه اندازی در فضای ابری گوگل

مشاهده این محیط به این معناست که شما با موفقیت رندرتون را راه اندازی کرده اید. URL سایت خود را یادداشت کنید زیرا در قسمت بعد به آن نیاز دارید.

رندرتون را به سرور اضافه کنید.

سرور از express.js استفاده میکند و رندرتون نیز یک میان افزار express.js دارد. دستور زیر را در محل فایل server.js اجرا کنید:

npm install –save rendertron-middleware

این دستور میان افزار رندرتون را از npm نصب میکند تا بتوانیم آن را به سرور اضافه کنیم:

const express = require(‘express’);

const app = express();

const rendertron = require(‘rendertron-middleware’);

تنظیم لیست بات

رندرتون از سر صفحه HTML استفاده میکند تا مشخض کند که درخواست از طرف بات است یا مرورگر کاربر. لیستی از بات های کاربر محور که به خوبی کار می کنند دارد تا با آن ها مقایسه کنید. به طور پیش فرض این لیست شامل گوگل بات نمی شود چون گوگل بات توانایی اجرای جاوا اسکریپت را دارد. برای آن که رندرتون بتواند گوگل بات را پردازش کند نیاز است تا آن را اضافه کنید.

برای اضافه کردن گوگل بات به این لیست:

const BOTS = rendertron.botUserAgents.concat(‘googlebot’);

const BOT_UA_PATTERN = new RegExp(BOTS.join(‘|’), ‘i’);

رندرتون سرصفحه کاربر محور را با این عبارت مقایسه میکند.

اضافه کردن میان افزار

برای ارسال درخواست های بات به نمونه ی رندرتون نیاز داریم تا میان افزار را به سرور express.js اضافه کنیم. میان افزار درخواست های کاربر را بررسی میکند و درخواست ها را به باتهای شناخته شده در مثال رندرتون انتقال می دهد.

کد زیر را به server.js اضافه کنید و فراموش نکنید YOUR_PROJECT_ID را با آیدی پروژه خود عوض کنید:

app.use(rendertron.makeMiddleware({

proxyUrl: ‘https://YOUR_PROJECT_ID.appspot.com/render’,

userAgentPattern: BOT_UA_PATTERN
}));

بات هایی که به سایت نمونه دسترسی پیدا میکنند HTML را از رندرتون دریافت میکنند. تا دیگر نیازی نباشد که بات ها برای نمایش محتوا جاوا اسکریپت اجرا کنند.

امتحان کردن این فرآیند

برای مطمئن شدن از نصب موفقیت آمیز رندرتون کافیست سایت را به شکل مناسب-گوشی اجرا کنید.

برخلاف دفعه قبل عکس گربه ها نمایش داده می شوند.

در تب HTML میتوانیم تمام HTML که جاوا اسکریپت آن را ساخته است ببینیم و اینکه رندرتون نیاز به جاوا اسکریپت برای نمایش محتوا ا از میان برده است.

جمع بندی

شما پردازش پویا را بدون ایجاد تغییر در کدهای وب راه اندازی کردید. با این تغییرها شما میتوانید یه HTML غیرمتحرک برای جستجوگرها پشتیبانی کنید.

تمرکز بر شیوه جدید جستجو

طی سال های گذشته شیوه جدید جستجو درحال پیشرفت بوده با هدف آسان تر کردن تمرکز بر وظاف مهم برای صاحبان سایت ها.

برای ما تمرکز به این معنی است که تمام تلاشمان را روی شیوه جستجو جدید بگذاریم، به کاربران متعهد باشیم و بعضی جنبه هایی که در حال حاضر پیشرفت کرده اند را از روش قبلی حذف کنیم. این به ما فضای کافی برای توسعه این شیوه و اضافه کردن قبلیت های جدید در طول زمان را میدهد.

اینجا یک سری از تغییرهای درحال آماده سازی برای شیوه جدید جستجو را مشاهده میکنید که تا اواخر مارچ ۲۰۱۹ به اتمام میرسند.

گزارش خطای جستجو در پوشش محتوا جدید

بخش قابل توجهی از بازخوردهایی که دریافت میکردیم این بود که لیست خطاهای جستجو در شیوه جدید جستجو با اولویت در تنظیمات عملی نبود.(عادی است که گوگل URL هایی را که وجود ندارند را نیز جستجو میکند و این چیزی نیست که نیاز به تغییر در وب سایت داشته باشد).

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

به بهبود چگونگی شناسایی ایرادات ادامه می دهیم، پس اگر چیزی هست که می تواند کمکتان کند لطفا در قسمت tools بازخورد خود را ثبت کنید. در کنار گزارش ایرادات جستجو API آن را نیز که بر پایه همان سیستم داخلی بود را هم حذف میکنیم. در حال حاضر جایگزینی برای آن نداریم.

این تغییر را به کاربران API مستقیما اطلاع خواهیم داد.

اطلاعات نقشه سایت در پوشش محتوا

همانطور که با سرچ کنسول جدید پیش می رویم در حال عوض کردن گزارش نقشه سایت قدیمی نیز هستیم. گزارش نقشه سایت جدید عملکرد بهتری نسبت به قبلی دارد و هدفمان این است که بقیه اطلاعات به ویژه عکس و فیلم رفته رفته به این نقشه اضافه شوند.

همچنین برای ردیابی URLهای ثبت شده در نقشه سایت با کمک گزارش پوشش محتوا و با استفاده از نقشه سایت میتوانید آن ها را انتخاب و دسته بندی کنید. این به شما کمک می کند تا بر روی URLهایی که بیشتر اهمیت می دهید متمرکز شوید.

استفاده از URL INSPECTION TOOL یا همان ابزار بازدید URL برای جمع آوری مثل گوگل

ابزار بازدید URL inspection tool جدید راه های بسیاری برای بررسی و بازنگری در URLهای سایت به شما ارائه می کند. هم نگاهی به محتوای حاضر دارد و هم آن هایی که به تازگی تغییر داده اید.

علاوه بر آن این ابزار اطلاعات بیشتری از URL در اختیار شما میگذارد مثل سرصفحه(هدر) HTML، سورس صفحه، اطلاعات مربوط به جاوا اسکریپت و تصویری از صفحه.

از طریق همان میتوانید صفحه ها را برای پردازش دوباره ثبت کنید تا در نتیجه جستجو ما به سرعت اضافه یا آپدیت شوند.

مدیریت کاربر اکنون در بخش تنظیمات قرار دارد.

ظاهر بخش مدیریت کاربران را بهبود داده ایم و از بهم ریختگی آن با ادغام این بخش و بخش تنظیمات کم کرده ایم.

این جایگزین قابلیت های مدیریت کاربر در پنل سرچ کنسول قبلی یا همان گوگل وبمسترتولز می باشد. اطلاعات داده های ساخت یافته Structured data منظم شده اند تا هر بخش گزارش اختصاصی داشته باشد.

برای کمک به پیاده سازی نتایج غنی(Structured data) برای سایت شما، سال گذشته ما چندین گزارش به پنل گوگل سرچ کنسول جدید اضافه کردیم. که شامل شغل‌ها دستورالعمل‌ها رویدادها و پرسش و پاسخ می شد.

و درحال اضافه کردن گزارش هایی مانند این به پنل سرچ کنسول هستیم. وقتی گوگل با مشکل تجزیه اطلاعات ساخت یافته(Structured data) مواجه شود این مشکل به طور کامل گزارش میشود تا مطمئن شویم شما چیز مهمی را از دست نمی دهید. 

نوع دیگری از اطلاعات ساخت یافته که توسط قابلیت های نتایج غنی(Rich Results) پشتیبانی نمیشوند دیگر در پنل جستجو گزارش نخواهند شد.

امیدواریم این تمرکز، شما را از مشکلات غیرضروری برداشته و کمک کند مشکلاتی را که در جستجو قابل مشاهده هستند را بر طرف کنید.

خلاص شدن از بعضی قابلیت های قبلی

با تمرکز بر قابلیت هایی که به نظرمان برای صاحبان سایت ها ضروری بود مجبور به تصمیم سختی شدیم که بعضی قابلیت های سرچ کنسول را کنار بگذاریم.

به خصوص:

پیشنهادات HTML

 پیدا کردن عناوین کوتاه و تکراری ممکن است برای صاحبان سایت مفید باشد ولی الگوریتم های گوگل در نشان دادن و بهتر کردن عناوین در طول سال ها پیشرفت کرده است.

ما معتقدیم این چیز مفیدی برای سایت هاست که به آن نگاهی بیاندازند. و همچنین چندین ابزار خوب وجود دارند که به شما در جستجو وب سایت و خارج کردن عنوان و توضیحات کمک می کنند.

Property Sets

با وجود این که بعضی صاحبان سایت این قابلیت را دوست دارند ولی تعداد کمی از کاربران نگهداری آن را بی دلیل می دانند. اگرچه متوجه شدیم که کاربران نیاز به یک دید همه جانبه نسبت به سایتشان دارند. بنابراین بزودی گزینه مدیریت حساب کنسول جستجو برای تمام دامین ها را اضافه خواهیم کرد.(بدون توجه به نوع الگو و ساب-دامین) منتظر باشید.

برنامه های اندروید

 بیشتر عملکردهای مرتبط در طول سال ها به پنل فایربیس منتقل شده اند.

منابع مسدود شده

 این قابلیت را سال های گذشته برای کمک به آزاد کردن فایل های CSS و جاوا اسکریپت برای نسخه های مناسب گوشی اضافه کردیم. در حال حاضر این مشکلات بسیار کمتر شده و استفاده از این ابزار به طور قابل ملاحظه ای کاهش یافته است. و شما میتوانید منابع مسدود شده را به طور مستقیم در ابزار بازدید URL inspection tool پیدا کنید.

لطفا نظرات خود را ارسال کنید!

در جریان هستیم که بعضی از این تغییرات روند کاری شما را تحت تاثیر قرار خواهد داد. بنابراین میخواهیم که هرچه سریعتر از آن ها آگاه شوید.

لطفا بازخوردهای خود را نسبت به پنل سرچ کنسول جدید گوگل ارسال کنید، اگر جنبه های ناواضحی وجود دارد یا آن هایی که نسبت به مورد استفاده شما متفاوت است.

برای بازخوردهای دقیق تر از انجمن ما با تصویر و ایده های جدید استفاده کنید. در طول این مسیر معتقدیم پنل جستجو جدید چیزهایی را ساده تر می کند. کمک میکند به مشکلاتی که سایت شما را تحت تاثیر قرار داده بپردازید و از امکانات سایت خود که به جستجو مربوط می شود استفاده کنید. به امید سالی هیجان انگیز!

آکادمی کسب و کار اینترنتی کلید موفقیت به عنوان بزرگترین مرجع آموزش کسب و کارهای اینترنتی در سراسر کشور آموزش سئو فوق حرفه ای محمد مرادی را به شما پیشنهاد می‌دهد، شما با یادگیری این آموزش می توانید به داشن سئویی خودتون اضافه کنین و از طریق وبسایت با کمک سئو به درآمد بسیار دست پیدا کنین.