نوشته های علیرضا شیراوند

معماری سیلو محتوا vs پیلار-کلاستر (مقایسه فنی و جزئی)

علیرضا شیراوند — Mon, 25 Oct 2021 00:27:31 +0330

سلام دوستان ، امروز مرخصی خدمت بودم و گفتم چه کنم؟ آفرین یه مقاله بنویسیم که ببینیم چی پیش میاد!! خب اگر اهل فن محتوا باشید با ساختار پیلار کلاستر و سیلو آشنا هستید. (اگر نیستین نگران نباشید در ادامه توضیحاتی میدم). حالا بریم یه مقایسه کنیم و ببینیم که چه زمانی از کدوم ساختار استفاده کنیم و مزیت و عیب های هر روش چه هست.معماری محتوا (وبسایت):به فرایندی گفته می شود که چطور محتوا را به کاربر نمایش (ارائه) می کنیم. این فرایند باید به راحت ترین روش برای کاربر و موتور جستجو پیاده سازی شود. اگر چنانچه پیچیدگی در معماری داشته باشیم در ادامه و با scale شدن وبسایت ، مشکلاتی نظیر: کانورت نشدن کاربران کراول باجتانتقال اعتبار از صفحات با priority بالا به صفحات دیگرخواهیم داشت. در ادامه دو معماری (استراتژی) معرفی می کنیم و با مقایسه آنها متوجه میشیم که چه زمانی از کدام روش استفاده خواهیم کرد.معماری سوله (silo architecture):بعضی از دوستان می گن که این ساختار 2 سال پیش جواب می داد و الان پیشرفته تر شده و ... ولی در واقع همون کار 2 سال پیش رو دارن همچنان می کنن :)))) الان دوتا کانسپت که در این روش هست رو سعی می کنم ساده سازی کنم.نسبیت (relativity):ساختار سیلو سعی داره محتواهایی که در رابطه با یک تاپیک هستند (با هم نسبت زیادی دارند - هم مفهوم هستند) در ساختارهای سایت (از سمت فرانت ، sitemap و گرایش محتوایی) با هم دسته بندی کند. چطور ممکنه؟اینطوری : در این ساختار سعی می کنیم هرتاپیک رو از پایه تا سقف متمایز کنیم. از اینفوگرافی ها گرفته تا حتی تجربه کاربری و صفحات informational. در این روش سعی می شه تجربه کاربری طبق اولویت های تاپیک اصلی پیش بره و تنها با کلیک های پشت هم فرایند train و educate کردن کاربر در اون تاپیک جلو بره.دو کانسپت مهم در معماری سیلو داریم :سیلو سئو محتوای مجازی (Virtual Content SEO Silosal )در این روش اکثرا سعی می شه که بار توسعه ای کمتری داشته باشیم و ساب تاپیک ها رو با استفاده از هایپرلینک به تاپیک اصلی و بالعکس متصل کنیم. این ارتباطات می تونه با استفاده از تگ ها ، کتگوری ها و کاستوم تکسونومی ها تقویت بشه . مهم این است که هر سیلو ارتباطات قوی داخلی داشته باشه . اگر می گم که از پایه تا سقف باید برای هر سیلو بررسی و تمایز ایجاد کنیم منظورم رو به صورت تصاویر زیر تکمیل می کنم:یک وبسایت که معماری مناسبی نداره شبیه تصویر زیره :یک وبسایت که ساختار خوبی ندارهحالا ما میایم سه رنگ فوق رو از هم جدا و در اصطلاح هر توپ را در سیلوی خودش قرار می دهیم.اگر هرکدوم از قوطی های فوق رو یک silo بدونیم کاملا واضحه که کاربر می دونه که در چه فضایی قرار داره و در ادامه ی تعامل با این بخش وبسایت ما با چه موضوعاتی مواجه می شه. پس در این روش نیازی نیست که کل وبسایت مجزا بشه و بارفنی زیادی داشته باشیم فقط باید مدیریت لینک های داخلی و به دقت رعایت کنیم و اشتباه نزنیم :)))سیلو سئو محتوای فیزیکی (Physical Content SEO Silos)این روش رو با یک مثال توضیح می دهم.مثال : کیورد آموزش کنکور هنر :در این روش باید بخش آموزش کنکور هنر کاملا مجزا بشه :abc.com/art-entrance-examاین تاپیک اصلی ماست و در این روش باید یک صفحه ی اصلی داشته باشیم و یک گایدلاین توسعه محتوایی برای نویسنده و کاربر جلوی آنها گذاشت. در این روش صفحه ی تاپیک اصلی به زیربخش هایی که طبق اولویت های کاربر و توسعه محتوایی چیده شده اند تشکیل شده است. بطور مثال اگر یک هدینگ در رابطه با تاریخچه کنکور هنر داشته باشیم یک توضیح کوتاه catchyطور در این صفحه قرار داده و لینک به صفحه اصلی این تاپیک قرار می دهیم که ساختار صفحه ی مد نظر به صورتabc.com/art-entrance-exam/historyخواهد بود.یعنی کاملا واضح است که سیلوی محتوایی با تاپیک کنکورهنر داریم. نکته خیلی مهم : همیشه تاپیک اصلی باید در directory parent قرار بگیره و ترکیب اولویت ها رعایت بشه. یعنی اگر یک ساب تاپیک خودش هم ساب تاپیک داشت باید به درستی مثال فوق پیاده سازی بشه.نکات مهم در سیلو :اگر وبسایتتان چند سیلوی محتوایی دارد می توانید برای هرکدام ساختار ux و حتی UI متفاوتی در نظر بگیرید . شاید دیده باشید که وقتی وارد یک وبسایت می شید و روی کتگوری ها مختلف (منظور همون سیلو تاپیک) می شید ظاهروبسایت هم تغییراتی داره.همیشه دقت کنید اگر از یک سیلو به سیلوی دیگه لینک می هید به صفحات parent لینک بدین. چون خود صفحات Parent باید بتونن به صورت دقیق انتقال اعتبار و تجربه کاربری رو برای شما فراهم کنند.ساختار Pillar-cluster : ساختار پیلار کلاستردر این ساختار mainKeyword ما که احتمالا پر رقابت ترین و monitized ترین کیورد ماست و خیلی دلمون می خاد روش رنک بگیریم :) پیلار ما هست .سه تا مفهوم وجود داره در این ساختار 1- صفحه پیلار : که در بالا توضیح دادم و به عنوان هاب محتوایی ما در وبسایت هست2- کلاستر ها : محتواهایی هستند که در رابطه با کیورد اصلی هاب (پیلار) شرح بیشتری می ده (معمولا Long tail keyword) ها هستند.3- لینک سازی تعاملی : لینک هایی که بین پیلار و کلاسترها و بین خود کلاسترها می تونه رد و بدل بشه.از نظر پیاده سازی چند قدم می شه برای پیاده سازی بهتر و بهینه تر در نظر گرفتالف ) کیورد ریسرچ و بررسی رقبا : به بیزینس و فروش اهمیت بدهید. کیوردهایی به درد ما می خورند که اول نیاز کاربر رو حل کنه (point of pain ) و در مرحله بعدی به فروش منجر بشه (MOFU و TOFU رو سرچ کنید.) . رقبا رو بررسی کنید که چه کلماتی رو تارگت کردند و گپ های محتوایی بهترین دوست شما هستند.ب ) از دید کاربر به ساختار وبسایت نگاه کنید. کاربر شما انتظار داره که بعد از انتقال به صفحات لندینگ شما با چه نوعی از محتوا و چه ارتباطی مواجه بشه. با این دید می تونید کلاسترهای اولتون رو انتخاب کنید و محتوا بنویسید براشون.ج ) حالا که پیلار هاتون رو نوشتید یک صفحه ی پیلار که هاب این محتواهاست ایجاد کنید. انتظار کاربر رو انتقال اعتبار رو در نظر داشته باشید. از CTA های جذاب برای انتقال کاربر به کلاسترها و مطالعه بیشتر بهره ببرید.د ) لینک سازی داخلی : اگر تا اینجای مقاله همراه من بودین احتمالا خوره ی این مبحث هستید. اینکه exact لینک بدین یا با وزن خاصی از related ها در بطن این مقاله نیست.حالا میرسیم به بخش جذاب مقاله :مزایای ساختار سیلو :یک روش بسیار robust برای ارائه مطلب به کاربر و موتور جستجو هست. چون کاربر اولویت های خودش رو می فهمه و چیزی که دریافت می کنه همه در رابطه با یک تاپیک هست.ابرمحتوایی دقیق تر و ساختار semantic بهترآنالیزهای دقیق : خب به خاطر وجود استراکچر در Url می تونید دقیق تر یک تاپیک و ترافیک هاش رو بررسی کنید.مناسب برای ساختارهای ecommerceمعایب:نیازمند پیاده سازی های فنی زیاد : اگر خیلی perfectionist باشید احتمالا چالش های جذابی خواهید داشت که من می خوام کاملا این تاپیک رابط کاربری ساده تری داشته باشه یا اینکه این فیچر رو برای این تاپیک فقط می خوام و ...لینک سازی فقط به همان تاپیک محدود میشه و خب نیازه که خیلی دقیق باشهخلاصش اینکه یکبار برای پلن و هزاران بار برای بازنگری باید یک حوزه رو بررسی کنیدساختار پیلار-کلاستر :مزایا : خیلی سریع محتواها از تنور میاد بیرون و پیلارکلاسترها ایجاد می شوند.اگر زیاد اهل برنامه ریزی نیستید خیلی سریع می تونید پیلارهاتون رو بازنگری و جدا کنید.در لینک سازی داخلی دستتون باز ترهمعایب در آنالیز بعضا به مشکل می خورید.در سایت هایی با scale بزرگ بعضی از محتواهاتون هرگز آپدیت نمی شوند.بعضی وقتا درگیر این خواهید شد که یک کلاستر رو به عنوان پیلار مجزا داشته باشیم یا نه.مرسی که با من تا اینجای مقاله بودین . نظراتتون رو می خونم و در جهت بهتر شدن این محتوا ازشون استفاده خواهم کرد. دمتون گرم

آپدیت و بازنویس تایتل توسط گوگل - بررسی چگونگی بازنویسی و چرایی آن

علیرضا شیراوند — Sun, 22 Aug 2021 16:33:49 +0430

از هر چه بگذریم صحبت در باره ی تغییرات الگوریتم موتور جستجو خوش تر است. چند روزی هست که در کامیونیتی سئو و شبکه های اجتماعی صحبت در رابطه با تغییرات تگ title یا عنوان صفحات بالا گرفته و من تقریبا این مشکل رو روی یه وبسایت خارجی از ۲ ماه پیش داشتم. تغییراتی مثل کوتاه تر شدن عنوان، اضافه کردن کیوردها و یا حذف اون در تایتل و ... با جلو رفتن و رخداد این نوع تغییرات در مقیاس بزرگتر ، نظراتی زیادی از دوستان و فعالین این حوزه مطرح شد، مثلباگآپدیت کورآپدیت جدیدمشکل از تکنیکال و ...طول تایتل هایی که در serp نمایش داده میشه پس از اپدیت کاهش داشته است. ولی این کاهش آنقدری چشم گیر نیست که بشه نتیجه گیری کرد برای کاهش طول تایتل ها این اتفاق افتاده است. در ادامه بررسی بیشتری می کنیم.در این نوشته قراره چندتا از وبسایت هایی که این تغییرات براشون رخ داده رو باهم مقایسه کنیم و به صورت کیس استادی یک سری نتیجه ها بگیریم. التبه این وبسایت ها خارجی هستن و هسته اصلی این نوشته از منابع انتها آورده شدند.مثل همه ی اپدیت های گوگل واقعا سخته که بگیم چه اتفاقی رخ داده و چه چیزی بیشترین تاثیر رو برای رشد یا کاهش ورودی ترافیک ما بعد از این اپدیت خواهند داشت.تایتل های من با چی جایگزین میشن؟تقریبا همه ی آیتم های زیر که با طنازی جذابی کنار هم آورده شدند، مذنون های اصلی این پرونده هستند.تایتل ها از کجاااا میان؟؟گوگل در حال اجرای A/B تست برای پیدا کردن بهترین تایتل برای صفحات است.تاریخچه ای در رابطه با آپدیت Snippet ها:پیکسل لیمیت : همیشه یادتون هست که در دوره های آموزش سئو می گفتن، طول تایتل باید اینقدر باشه و طول متادسکریپشن فلان قدر. خب می دیدیم که بعضا طول متا و تایتل ازین قانون پیروی نمی کرد.تغییرات به واسطه عبارت جستجو شده :همیشه سئوکارها دنبال این بودند که تایتل مناسب و بهینه ای برای صفحات بنویسند ولی وقتی روی عبارات نزدیک و relative به اون عبارت اصلی بررسی هایی انجام می دادیم، متوجه میشدیم که به طور مثال متادسکریپشن با عبارت جستجو شده جایگزین شده. (نکته این هست که باید اون عبارت جایگزین شده در متن می بود.)یک تحقیق جالب نشون می ده که هر چقدر حجم جستجوی عبارت تارگت شده توسط شما بیشتر باشه و در صفحه ی serp نشون داده بشید، شانس rewrite شدن متادسکریپشن شما کمتره.جایگزینی کامل : این حالت برای صفحاتی رخ می ده که معمولا یا متادسکریپشن درست و relative برای محتوای نوشته شده تولید نکردند، یا اینکه اصلا متادسکریپشن وجود نداشته برای این صفحه.بررسی سناریوهای مختلفتئوری اصلی : جایگزینی تگ title با H1 : خب تقریبا اکثر افرادی که با تغییرات تایتل درگیر هستند، عنوان کردند که تایتل با h1 و یا عبارت نزدیکی به h1 جایگزین شده، ولی فکر نمی کنم اینقدر سطحی باشه این مسئله. یکم بیشتر بررسی می کنیم.۱- همه گفتن پس تگ تایتل چی میشه؟؟؟ https://twitter.com/mramiri_com/status/1427992832803999748?s=20 طبق نمونه زیر قاعدتا یک فاکتور دلیل اصلی این تغییرات نیست و ممکنه یک آپدیت الگوریتمیک رو داشته باشیم. این اپدیت سعی در این داره که عناوین مناسب تری طبق intent کاربر و محتوایی که در اون صفحه هست نمایش بده.نهایتا هم مشاهده میشه که به خاطر پیکسل لیمیت هم که شده یکم طول تایتل کوتاه تر شده.عنوان سرپتگ تایتل در html و DOMتگ H1مشاهده میشه که طول تایتل قبلی بلندتر بوده ،‌ اسم چند شهر حذف شده و برند نیم اضافه شده.عبارتی که جستجو شده ، wooden furniture melbourne هستش . مشاهده می کنیم که به جای همه ی شهرهای ذکر شده در تایتل شهر ملبورن که در سرچ کوئری هست فقط مونده و اسم برند وبسایت هم به انتهای ریزالت اضافه شده. البته می دونیم که در این وبسایت از جداکننده ( vertical bar )استفاده شده که حتی اون هم رعایت نکرده الگوریتم.پس چیزی که نهایتا داریم میشه گفت : ترکیبی از h1 + کوئری جستجو شده + چیزی هست که خود گوگل تشخیص داده کم بکنه از تایتل .تئوری دوم : لینک سازی خارجی :اگر این صفحه رو بررسی کنیم هیچ جای این نوشته دقیقا عبارتی مثل این title ذکر نشده، اما با بررسی بک لینک هایی که به این صفحه اشاره می کنند ‌، میرسیم به لینک زیر : https://newsone.com/4183652/tim-scott-eyeing-run-for-president/ تئوری سوم : لینک سازی داخلی :نمونه هایی هم از لینک سازی داخلی گزارش شده که طبق وزنی که با anchor های مختلف به یک صفحه اشاره می کنند موتور جستجو عنوان اون صفحه رو بازنویسی می کنه.جمع بندی :گوگل در تاریخ ۱۷ تا ۱۸ ام آگوست ۲۰۲۱ این اپدیت رو پابلیش کرده و در حال تست و بازخورد گیری از اون هست.به صورت کلی طول عناوین نمایش داده شده تقریبا ۸٪ کاهش داشته .برای خیلی از وبسایت ها، این تغییر تایتل برای بهتر شدن تایتل و ارتباط موضوعی عنوان با محتوای اون صفحه رخ داده است. این تغییر می تونه از تگ تایتل ،‌لینک سازی خارجی و داخلی باشه.در بررسی کیس استادی های مختلف نشون داده شده که گوگل علاقمنده اسم برند وبسایت رو نمایش بده. از سبک و سیاق این تغییرات میشه ییان کرد که گوگل - رو به | برای جدا کردن اسم برند ترجیح داده.چه باید بکنیم ؟۱- محتوا رو برای رفع کردن نیاز کاربر بنویسید وبراش ارزش خلق کنید.۲- از کیورد استاف کردن بپرهیزید۳- لینک سازی داخلی و خارجی رو اصولی انجام بدهید.۴- هیچ کاری نکنید تا تثبیت رخ بده. منابع :https://www.portent.com/blog/seo/how-often-google-ignores-our-meta-descriptions.htmhttps://brodieclark.com/google-title-tag-update/https://www.searchenginejournal.com/google-is-rewriting-title-tags-in-serps/416793/

پسیج رنکینگ (passage ranking) - بازگشایی رمز و رازهای گوگل

علیرضا شیراوند — Sun, 21 Feb 2021 14:17:10 +0330

الگوریتم پسیج رنکینگ (passage ranking) - پسیج ایندکس (passage indexing)گوگل اعلام کرد که پسیج رنکینگ (passage ranking ) می تونه روی ۷٪ از کوئری های جستجو شده تاثیر گذار باشه . (زهی خیال باطل ) چرا؟ اگر یادتون باشه در سال ۲۰۱۹ الگوریتم BERT معرفی شد که به گفته گوگل قرار بود حدود ۱۰ درصد از کوئری ها رو در زبان انگلیسی تحت تاثیر قرار بده ، ولی الان تقریبا روی ۹۹٪ کوئری ها اثر گذاشته حتی در زبان فارسی !!!!پس متوجه میشیم که احتمالا تغییرات بزرگی در راهه ، مخصوصا برای سئوکارهای ایرانی که میخان پروژه های دلاری بگیرن و بعدها برای بقیه دوستان ، وقتی که زبان فارسی هم پشتیبانی بشه.اسم الگوریتم BERT اومد و فکر می کردیم که بزرگترین الگوریتمه و بعد ازین احتمالا به این زودیا اتفاق خاصی نخواهد افتاد ولی خب باز گوگل مارو غافل گیر کرد و در سال ۲۰۲۰ و الان در ۲۰۲۱ با core update ها به ما یاداوری می کنه که رییس کیه :)یکم راجع به BERT بخوانیم : https://www.searchenginejournal.com/bert-explained-what-you-need-to-know-about-googles-new-algorithm/337247/ الگوریتم پسیج رنکینگ چیست؟طبق الگوریتم های قبلی که کلی مطلب برای مطالعه راجع بهشون هست ، موتور جستجو متوجه می شد که کانسپت اصلی و محتوای یک صفحه راجع به چه موضوع (کلمه کلیدی !!!) هستش، بعد شروع می کرد به رنک دادن و رتبه بندی اونها. تا اینجا رو که قطعا هر SEO کاری می دونه . در پسیج رنکینگ موتور جستجو متوجه میشه که هر پاراگراف (قطعه محتوا) داره راجع به چه موضوعی صحبت می کنه و چه اطلاعاتی به خواننده ارائه می شه. چرا این تصمیم گرفته شده ؟ ۲ تا دلیل اصلی می تونه داشته باشه (اگه بعد از خوندن این مطلب دلیل دیگری پیدا کردید ، اطلاع بدین تا اضافه کنم.)۱- در مطلب های بلند ممکنه کاربر نتونه جواب سوالشو کامل پیدا کنه و در اصطلاح چیزی که دنبالشه لای خرواری از نوشته گم بشه.۲- یک سری از intent های کاربران ممکنه بسیار جزئی باشه و کاربر دقیقا دنبال یه سوال به خصوص باشه ، اینطوری موتور جستجو هم می تونه جواب دقیق تری بهش پیشنهاد بده و سایت هایی که دقیق تر جواب سوال کاربر رو دادند رو در رتبه بالاتر نشون بده.الان ممکنه سوال پیش بیاد که آیا به ایندکس مرتبطه این مسئله ؟‌ خیرچون اسپایدرمن رو دوست دارم :)گوگل با استفاده از الگوریتم های هوش مصنوعی (AI) یا دقیق تر بخوام بگم با استفاده از الگوریتم پردازش زبان طبیعی (NLP) داره درک خودش رو در محتواها عمیق تر می کنه و نهایتا به این سمت میریم که دیگه کاربر قرار نباشه روی لینک شما کلیک بکنه و همه چی رو توی صفحه خودش نشون بده . (در فاز اول اگر intent کاربر informational باشه.) نمونه ی زیر می تونه کمک کنه به درک این مسئله:سمت راست After سمت چپ Before :) حال کردید چقدر اطلاعات دادم گوگل در ابتدا عنوان کرد که اسم این آپدیتی که ارائه کردند passage indexing هستش ، بعدها عنوان شد که ربطی به indexing نداره و اسمشو گذاشتن passage Ranking که به نظر منطقی تره.تولیدکنندگان محتوا سئوکار ها باید چکار کنند؟گوگل به صورت رسمی اعلام کرده که passage index یا همین الگوریتمی که داریم راجع بهش صحبت می کنیم، جایگزین page indexing نخواهد شد و تنها می خاد که هر بخش از محتوا رو بهتر بفهمه (تضمینی نیست کلا ! شاید جایگزین کنه :| ) پس در کل اگه بخوام شفاف بگم ، هیچ کاری نیست که بکنیم .... ولی یه سری نکات خدمتتون می گم که احتمالا از خیلیا شنیدید ولی خب ...۱- اگر دارید راجع به مسئله ای صحبت می کنید لطفا دقیق و شفاف مسئله رو موشکافی کنین و برای تولید محتوا وقت بذارین ، اینطوری نباشه که خب skyscraper بنویسیم و آخرشم سرو ته مقاله بلاگیتون مشخص نباشه۲- ساختار سایتتون رو طبق best practice های گفته شده بهینه سازی کنیدخب اگر تصویر بالا رو یکبار دیگه نگاه کنید متوجه میشیم که عه !! چقدر شبیه featured snippet ها هستفیچر اسنیپت در مقابل passage ranking :خب این تنها یک نمایشی از جوابی هستش که گوگل به کوئری می ده ، طبق میزان قرابت معنایی و مفهومی که کاربر جستجو کرده و با featured snippet ها متفاوته. حتی ممکنه که موضوع اصلی صفحه مقداری با کوئری متفاوت باشه ولی توی اون پاراگراف نگارنده محتوا ، یک اسپین آف زده باشه و این کارش باعث شده باشه که شما به جواب سوالتون در این محتوا برسید.یک سوال جالبی که مطرح میشه اینه که ایا این نتیجه جواب در خود صفحه گوگل برای جستجوی صوتی (voice search ) هستن ؟ جوابی که دادند از نظر من منطقی نیست ولی خب چیزی که گفتند رو می گم.فرمایش کردند که featured snippet ها برای جستجوی صوتی هستند و passage ranking برای کاربردهای دیگره که اصلا identifier متفاوتی هست. https://twitter.com/dannysullivan/status/1319000322698694656?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1319000322698694656%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fwww.stanventures.com%2Fblog%2Fpassage-indexing-algorithm%2F ولی من می گم که قطعا برای جستجوی صوتی هست و بهینه سازی خواهد شد.پسیج رنکینگ چطور کار می کنه؟یک نکته ی جالب راجع به گوگل این بوده که هیچوقت دقیق نمی گه الگوریتم ها چطور کار می کنند و تنها چندتا نکته برای بهینه سازی طبق این الگوریتم ها ارائه می کنه. کلیت اینه که کرالرها صفحه رو ایندکس می کنند و گوگل الان متوجه میشه که هر پاراگراف یا قطعه محتوا راجع به چه چیزی و چه جزئیاتی داره صحبت می کنه. پس انتظار داریم محتواهای طولانی که محتوا رو به بخش های کوچک تر تقسیم بندی کردند واطلاعات مفیدی ارائه کردند ، ترافیک بیشتری دریافت کنند و تجربه دلپذیری از این الگوریتم داشته باشند.به نظر میرسه که passage indexing یک مرحله پا رو از RankBrain پیش تر گذاشته تا محتوا رو بتونه بهتر درک کنه. اسم RankBrain اومد و راجع بهش می خونیم : https://moz.com/learn/seo/google-rankbrain نمی خام زیاد راجع به یادگیری ماشین صحبت کنم ولی خب در رنک برین یه سری سیگنال از هر وبسایت دریافت می شد که بهش می گفتن ranking parameter و یک شبکه عصبی (سیستم خبره یا همون موتور جستجو) تصمیم میگرفت که کدوم سایت برای این کوئری مناسب تره. یعنی کوئری دریافت می شد، به بخش های مختلف شکسته می شد + intent شما می شد و نتایج رو برای شما نشون می داد. در این اپدیت مفهوم string به entity تغییر کرد یعنی دیگه واژه ها اهمیت نداشتن و اشیاع + intent کاربر مهم تر بودند.شما جستجو می کردی "خرید پیتزا" براتون از روی نقشه لیست رستوران ها رو میاورد در ذیل اون سایت هایی که خدمات سفارش پیتزا ارائه می کردند و ....الان چه اتفاقی افتاده ؟ یکم باید راجع به NLP توضیح بدم : https://cloud.google.com/natural-language این صفحه یک demo از اینکه چطور گوگل پاراگراف (نوشته) ها رو آنالیز می کنه داره. جمله زیر رو در نظر بگیرید:Google, headquartered in Mountain View (1600 Amphitheatre Pkwy, Mountain View, CA 940430), unveiled the new Android phone for $799 at the Consumer Electronic Show. Sundar Pichai said in his keynote that users love their new Android phones.جمله یا پاراگراف به زیر مفاهیمی که در NLP مورد استفاده قرار میگیره شکسته میشه مثل: (اشیا)EntitiesSentiment(احساسات)Syntax(نوشتار)Categories(دسته بندی)در بخش اشیا مشاهده می کنید که تونسته درک کنه هر عبارت به چه شیئی اشاره دارهدر بخش احساسات در این بخش الگوریتم سعی می کنه که بفهمه پاراگراف گفته شده جنبه مثبت بیشتری داره یا جنبه منفی ، همونطوری که از پاراگراف مشخصه این بنده خدا گفته که ملت گوشی های اندروید رو دوست دارن و امتیاز نوشته 0.5 شده و در ناحیه سبز قرار دارهدر بخش syntax الگوریتم داره تلاش می کنه که بفهمه هر بخش جمله در گراف جمله سازی چه نقشی داره و چقدر در معنای عبارت تغییر ایجاد می کنهمثال خرید بلیط هواپیما از تهران به مشهد :) پس قبلا هم این رو دیده بودید ولی ممکنه نمی دونستید از کجاس.کتگوری:همونطوری که واضحه داره می گه این پاراگراف راجع به چه حوزه ای داره صحبت می کنه که واضحا راجع به موبایل و اشیائ بی سیم هستشجمع بندی :در این مطلب سعی شد ریز و درشت الگوریتم و تئوری های مدنظر گفته بشه . اگر دوستش داشتید به اشتراک بذارید. نظراتتون رو می خونم و سعی می کنم جواب بدم.در مورد NLP در یه نوشته توضیحات تکمیلی رو میدم. ممنونم از همراهیتون

بررسی آپدیت سرچ کنسول با تمرکز بر crawl stats

علیرضا شیراوند — Wed, 25 Nov 2020 12:15:07 +0330

سلام دوستان امیدوارم روزگار خوبی رو سپری کنید گوگل دیروز یک آپدیت روی سرچ کنسول ارائه کرد که تمرکز اصلی این اپدیت روی گزارش وضعیت خزش (crawl sate) وبسایت است. در این مطلب یکم روی این گزارش عمیق می شیم و بررسی می کنیم که چه اطلاعاتی میشه از روی این گزارش بدست آورد.تصویر زیر گزارش crawl stats قدیمی سرچ کنسول هستشنمایی از گراش crawl satats سرچ کنسولمسیر crawl stats جدید :برای پیدا کردن وضعیت کرال در سرچ کنسول به بخش تنظیمات property مراجعه و بعد روی آیتم crawl stats کلیک کنید.هدف از بررسی این گزارش برای وبمستر ها و سئوکار ها بهینه سازی crawl budget اونهاست ، اینکه کرال باجت چی هست و چرا باید بهینه سازی بشه بحث تخصصی هست و در اسکوپ این مقاله نمی گنجه . اگر وبسایت کوچکی دارید احتمالا اونقدری درگیر این مسئله نمی شین ولی اگر روی یه وبسایت در اسکیل متوسط یا بزرگ کار میکنید ، خوبه که عمیق بشید در این زمینه و مقاله های زیر می تونه کمکتون بکنهکرال باجت چیست و چرا باید سئوکارها به آن اهمیت بدن؟ https://backlinko.com/hub/seo/crawl-budget خب بریم روی بحث اصلی مطلب:چه چیزی به گزارش جدید crawl stats اضافه شده؟هدف از این اپدیت این بوده که سئوکارها ، وبسمتر ها و توسعه دهنده ها ( اینها رول های متفاوتی هستن خدایی،گیر ندین ) مشکلات خزش وبسایت اشون رو بهتر بتونن متوجه بشن۱- دسته بندی تعداد ریکوئست ها بسته به ( کد ریسپانس ، نوع فایلی که کرال شده ، هدف از کرال و نوع ربات خزنده گوگل )۲- گزارشات تفصیلی از وضعیت هاست وبسایت۳ - مثال هایی از ادرس url که خزنده به اونها سر زده۴- گزارش های مقایسه ای برای وبسایت (وب سرویس) هایی که از چندتا هاست استفاده می کنندتصویر اول گزارش رو باهم بررسی می کنیمخب مشاهده می کنید که در بازه مشخص شده گوگل ۷۳۰ هزار ریکوئست ارسال کرده برای کرال صفحات وبسایت ۷.۹۸ بیلیون بایت (خیلی احمقانه است این مدل عددگذاری و باید یه فکری براش بکنه، خب بزن ۸ گیگا بایت) دانلود کردهمیانگین ریسپانس هم به ربات های خزنده حدود ۹۳۰ مگابایته (میدونم زیاده و تقریبا ۷ برابر چیزی هست که باید باشه)چطور گزارش crawl stas را تحلیل کنیم؟خب من چی می تونم بفهمم؟- وضعیت ریسپانس سرورم افتضاحه احتمالا کش سرور هام یا تنظیمات کش وضعیت خوبی نداره (بسته به ترافیک وبسایتم که حدود ۱۰ هزار بازدید روزانه است خیلی داره دانلود می کنه) گزارش وضعیت هاست :اگر روی هرکدوم از این لیست نمایش داده شده کلیک کنید نمودار وضعیت رو نمایش می ده که من برای یکی رو توضیح می دم۱- میگه که در ۹۰ روز گذشته مشکلی نبوده (خدا رو شکر) ۲- وضعیت DNS رزولوشن رو نمایش میده (چون دقیق نمی دونم چیه می تونم به فارسی سخت بگم چی هست که نمیگم و لینک میذارم) https://kb.webtrends.com/articles/Question/What-is-DNS-Resolution-1365448116431 ۳- وضعیت سرور رو نمایش میده که نرخ از دست رفتن ریکوئست های ربات گوگل چقدر بودهخب مشاهده می کنید در تاریخ ۱۱/۱۶/۲۰۲۰ من تقریبا ۰.۲ درصد از ریکوئست هام فیل شده که مایه بسی رنج و تاسف هستش - البته تا خط چین بالا که داره Acceptable fail rate رو نشون میده راه درازی هستیکی از نکاتی که باید رعایت کنید اینه که این همیشه نزدیک صفر باشه و هیچوقت فکر نزدیک شدن به اون خط چین رو نکنیدخب یکم اسکرول می کنیم پایین در این گزارش ریکوئست هایی که سمت سرور شما از طرف کرالر گوگل ارسال شده ، به صورت خیلی جذابی دسته بندی کردنطبق ریسپانس :اول باید بدونید که ریسپانس هدرهایی که سرور شما یا هر سرور دیگری روی این کره خاکی به هر ریکوئست برمیگردونه چی هست و داره چی میگه https://developer.mozilla.org/en-US/docs/Web/HTTP/Status روی هرکدوم از ایتم ها کلیک کنید گزارش مخصوص اون ریسپانس کد رو نمایش میده که تحلیلش مثل تحلیل جامع اول هستش (شبیه استاد کنکوریا شد) و در زیر اون هم لیست تعدادی از لینک هاییست که تحلیل کردهطبق نوع فایل :چه تعداد از ریکوئست هایی که ارسال شده برای کرال کردن فایل تایپ های مختلف بودهاحتمالا بخش عظیمی از ریکوئست ها برای کرال صفحات html هستن اگر وبسایت شما وردپرسی یا از CMS استفاده کرده باشیناگر Angular - vue - react استفاده کرده باشین و SSR فعال نباشه احتمالا وزن js و json فایل ها بیشتر از چیزی هستش که در تصویر این مطلب می بینید . طبق هدف (purpose ) : دیسکاوری :‌ این رو مطمئن نیستم در موردش ونیازمند این هست که گوگل یه داکیومنت بده ، ولی چیزی که من برداشت می کنم از مفهومش طبق بک لینک هایی که گرفتین میاد ببینه چی روی سایت شما منتشر شده و کرالش می کنه.خلاصه دنبال پیدا کردن چیزای جدید برای ایندکس هستشرفرش : از اسمش هم مشخص هست که برای بررسی و آپدیت صفحات قبلی شما کرالر درخواست داده و وضعیتش رو می تونید ببینیدطبق نوع ربات :خب همانطور که می دونید گوگل agent های مختلفی برای ربات هاش تعریف کرده که شما بتونید بهتر مدیریت کنید اونها رو اینکه چطوری مدیریتشون کنید هم بحثش در این اسکوپ نیست ولی حتما حتما حتما این لینک رو ببینید تا کاملا متوجه بشید https://developers.google.com/search/docs/advanced/crawling/overview-google-crawlers

پیاده سازی SSR (سرورساید رندرینگ)روی Vue و بررسی تاثیر بر SEO

علیرضا شیراوند — Wed, 30 Sep 2020 01:48:54 +0330

مطالبی که در این نوشته بررسی می کنیم :۱- چرا به SSR (server side rendering) نیاز داریم ؟۲- بررسی سئو و SSR (بخش مورد علاقم)۳- چه زمانی از SSR استفاده کنیم؟۴- تفاوت بین CSR (client side rendering ) و SSR چیست؟۵- در Vue چطور SSR را پیاده سازی کنیم؟کلاینت ساید رندرینگ (CSR) : کلاینت ساید رندرینگاگر بخوام ساده این بخش رو توضیح بدم ، به این صورت عمل می کنه که : وقتی شما درخواست باز شدن وب اپلیکیشن (SPA-PWA هم می تواند باشد ) را به سمت سرور ارسال می کنید ، سرور ابتدا یک صفحه ی ساده html رو به همراه فایل های css و js به شما برمیگردونه . حالا نوبت مرورگر شماست که این کدهای js را کامپایل بکنه و صفحات html رو به صورتی که شما طراحی کردین ، به کاربر نشون بده. همچنین تمامی ملحقات پروژه و ساختارها مثل router - stateManager و هرچیزی که در باندل پروژه شماست هم بایستی به صورت Up and Running روی مرورگر توانایی اجرا شدن داشته باشه.یعنی اینکه وب اپلیکیشن شما پس از پشت سر گذاشتن این مراحل قابل استفاده است.سرور ساید رندرینگ ( SSR ) چیست؟خب قبل از پیدا شدن سر و کله ی فریم های پیشرو (PWA ) و SPA (single page Application ) ها ما از این قابلیت استفاده می کردیم و چیز عجیبی نیست . چطوری ؟مثلا در نظر بگیرید که شما یک صفحه وب مثلا با PHP و جاوا اسکریپت در سمت کلاینت ، قبلا توسعه داده اید. نحوه عملکرد به این صورت بود که وقتی شما درخواست بازدید از یک صفحه رو داشتید ، سرور همه چیز رو برای شما کامپایل می کرد (پارامترها و داده های صفحه را جایگزاری میکرد) و صفحه HTML کامل رو برای کاربر به سمت مرورگرش پس می فرستاد ،اما وقتی شما روی route دیگری کلکی می کردید ، سرور مجبور بود باز همینکار رو برای شما انجام بده یعنی : فایل PHP رو بگیره ، کامپایل کنه ، به HTML برسونه و js و css ها در اون به اصطلاح populate بشن و باز برگردونه به سمت مرورگر شما - (وقت گیر بوده نه !!!)چه زمانی از ‌SSR استفاده کنیم؟دو دلیل خیلی خوب وجود داره برای اینکه از ‌SSR در پروژه هاتون استفاده کنید۱- وقتی به SEO نیاز دارید (یک وقتی هست دارید پنل توسعه می دین و SSR به کار نمیاد)۲- نمایش سریعتر محتوای قابل درک برای کاربر (reducing time to content) خب شاید سوال پیش بیاد که پیاده سازی SSR آیا معایبی هم داره ؟همیشه یک trade off بین چیزی که بدست میارید و چیزی که از دست می دین باید وجود داشته باشهبیاید بررسی کنیم :خب من یک محیط node.js باید روی سرور بالا بیارمبخاطر محاسبات اضافه ای که روی سرور ام تحمیل میشه ، مقداری منابع بیشتر باید مصرف کنمنیاز هست که کدهایی که قبلا سمت کلاینت زدم رو ریفکتور کنم و بهینه تر بنویسمباید با sysAdmin سر و کله بزنم و راضیش کنم که کارمو راه بندازه :)))ولی خب مهم نیست چون چیزی بدست میارم که از همه چی مهم تره : better SEOسئو و SSR - سرورساید رندرینگ :یک نکته ای رو باید خدمتتون در همین اواسط کار (شاید باید اولش می گفتم نمیدونم) عرض کنم که :آیا گوگل می تواند js را ایندکس کند ؟بحث در این خصوص در محافل SEO خیلی زیاد هستش و نظرات متفاوتی از دوستان متفاوتی شنیده میشه که قابل احترام هست و احتمالا حاصل تجربه این دوستان ،‌اما خب ما کاری به اینها نداریم و صحبت خودمونو می کنیم :)بله گوگل می تواند فایل های js را تفسیر و index کندولی تفسیر و ایندکس کردن این صفحات که توسط js تولید شده اند برای ربات ها زمان بر هستش. پس ربات گوگل یکبار به سایت شما مراجعه می کنه ، میبینه که اوه کلی فایل js اینجا ریخته و خب چون حوصله نداره چیزهایی که می تونه برمیداره و ایندکس می کنه و در مرحله دوم یا در اصطلاح second wave میاد محتوای شما را ایندکس می کنه . (این دیدگاه traditional در برخورد با js یا محتوای ویدئویی و متنی هستش که ما برای اثبات نیازمان به SSR به همین بسنده می کنیم - البته ۳ ماه پیش آقای مارتین اسپلیت (موقشنگ) مبحث two wave of indexing رو کلا زیرش کشید و گفت اون چیزی که شما فکر می کنید نیست... ).تصویر زیر هم قشنگه و کل چیزهایی که گفتم رو شامل میشهتجربه شخصی در پیاده سازی SSR و تاثیر بر SEOداده های زیر ، داده های یک وبسایت که به تازگی SSR روی اون انجام شده و ربات های گوگل در حال ایندکس کردن مطالب هستند و سایت هم کاملا نوپا است پیاده سازی SSR روی فریم ورک Vueاز متدهای مختلفی برای این روش استفاده میشه مثل موارد زیر :۱- اهل فن باشی و از Universal code خود Vue استفاده کنی :رفرنس : https://ssr.vuejs.org/guide/universal.html#data-reactivity-on-the-server ۲- استفاده از Nuxt.js۳- استفاده از Quasar Framework۴- استفاده از Express۵- استفاده از ves https://github.com/easy-team/ves پیاده سازی SSR با Expressبرای این بخش از پکیج vue-server-renderer استفاده می کنیم . برای استفاده و اضافه کردن این پکیج دستور زیر رو استفاده می کنیم :npm install vue vue-server-renderer express — saveعملکرد صحیح در نحوه رندرکردن صفحات در این پکیج برای ما حائز اهمیت است . vue instance ما در پروژه روی سرور به وسیله ی renderer function این پکیج اجرا میشه .بیاید یک فایل index.js بسازیم و توابع مورد نیازمون رو برای اجرا فراخوانی کنیمconst Vue = require('vue') const server = require('express') ()const renderer = require('vue-server-renderer').createRenderer()حالا در Express یک instance از vue ایجاد می کنیمserver.get('*', (req, res) => { const app = new Vue({ data: {}, template: `` })}) server.listen(8000)به همین راحتی ، حالا برای نمونه یک سمپل استادی رو باهم بررسی می کنیم:server.get('*', (req, res) => {const app = new Vue({data: {array: ['vue', 'java', 'python', 'javascript'],},template: `

`}) renderer.renderToString(app, (err, html) => {res.end(`Vue Js – SSR SAMPLE${html} `)})}) server.listen(8000)پیاده سازی SSR به وسیله Nuxt :احتمالا دوستانی که react کار کردند اسم فریم ورک next.js رو شنیده باشند . این دقیقا مشابه همان فریم ورک و کارکردی دقیقا مثل همان دارد.این فریم ورک به شما امکان ایجاد وب اپلیکیشن های پیشرو (progressive web application ) مبتنی بر vuejs می ده که از SSR و امکانات مختلفی مثل ,prerender,vuex,router , .... هم پشتیبانی می کنه.لینک فریم ورک : https://nuxtjs.org/ شکل زیر نشان دهنده ی فلوی عملکرد این فریم ورک هستش وقتی که شما یک درخواست به سمت سرور ارسال می کنید و یا به وسیله nuxt-link در اپلیکیشن navigate (از روتی به روت دیگه منتقل شدن ) می کنید.همونطور که گفته شد ساختار دقیقا مشابه با next.js هستش.هرفایل vue در زیرشاخه نشان دهنده یک route مجزا است . همچنین در اخرین آپدیت توانایی ایجاد فایل ها استاتیک و ذخیره و serve کردن اونها نیز به قابلیت های این فریم ورک اضافه شده .کافیه که کانفیگ زیر رو در فایل nuxt.config.js ذخیره کنید export default {target:'static'} از این رو می تونید وب اپلیکیشن هایی که کاملا دوستدار SEO هستند توسعه بدین.رفرنس : https://nuxtjs.org/guide/ نکته : اگر میخاین از این فریم ورک استفاده کنید ، بهتره که پروژه رو کلا در این فضا ایجاد کنید و از CLI اون هم استفاده کنید . همچنین میتونید به پروژه اضافه اش بکنید ، دست خودتونه و توضیحات بیشتر از این رو میسپارم به داکیومنت خود nuxt در ادرس زیر : https://nuxtjs.org/guide/installation جمع بندی در این نوشته باهم تفاوت های SSR و CSR رو باهم بررسی کردیم ، اینکه چطور یک پروژه vue رو برای بهینه سازی های SEO آماده کنیم هم راجع بهش صحبت کردیم. اگر نظری دارید خوشحال میشم کامنت کنید. ممنونم که تا اینجا همراهم بودین.

معرفی vue3 و مقایسه با vue2

علیرضا شیراوند — Thu, 24 Sep 2020 15:49:32 +0330

سلام دوستاناگر روی این مطلب کلیک کردین ، احتمالا توسعه دهنده ی فرانت اند یا علاقمند به این حوزه هستید و تاحدودی با این فریم ورک آشنایی دارین و راجع بهش شنیدین . خب اگر از این زاویه به موضوع نگاه کنیم زیاد لازم نیست که از پایه توضیح بدیم vuejs چطوری بوجود اومد ،‌ رشد کرد ،‌تبدیل شد به یکی از طرفدار ترین فریم ورک های JavaScript و .... حالا برای اینکه بازم یکم عمیق تر بشه آشناییتون با این فریم ورک می تونید یک نگاهی به سرفصل های لینک زیر بندازید https://www.peerbits.com/blog/vuejs-is-growing-international-development-community.html بریم سر اصل داستان :)معرفی vue نسخه سومنسخه سوم این فریم ورک محبوب در تاریخ ۱۸ سپتامبر ۲۰۲۰ بصورت رسمی با نام (Vue 3.0 یا "One Piece") منتشر شد. من سعی می کنم نکات مهمی راجع به این نسخه از فریم ورک رو خدمتتون ارائه کنم. و توضیحات بیشتر رو ارجاع میدم به مطالعه داکیومنت های خود vue .لینک یوتیوب زیر اعلامیه جهانی انتشار vue 3.0 هستش https://www.youtube.com/watch?v=Vp5ANvd88x0 خب در ادامه یک بررسی اجمالی دارم راجع به اینکه در نسخه سوم چه بهبود های چشم گیری ارائه شده و چطوری این بهبود ها می تونن توسعه دهنده ها رو قانع کنن که از vue نسخه ی سوم استفاده کنند.قطعا تغییرات بیشتری از چیزهایی که من اینجا میگم اعمال شده ولی در رفرنس ها این موارد رو بیشتر روش زوم کردن و منم همین موارد رو جمع آوری کردم.حجم باندل پکیج :اگر یک پروژه یکسان رو با استانداردها و API های استاندارد نسخه های ۲ و ۳ بصورت مجزا توسعه بدهید ، باندل پکیج نسخه ۳ به دلیل پشتیبانی بهتر از tree shaking و استفاده از global API ها , Vue helper های متنوع ، حجم کمتری خواهد داشت. اگر براتون سواله که tree shaking چیه یه توضیح مختصر می دم :فرایند tree shaking در جاوا اسکریپت: tree shaking اگر از vueCli برای توسعه ی وب اپلیکیشن های مبتنی بر این فریم ورک استفاده می کنید ، احتمالا با تنظیمات webPack برای گرفتن بیلدهای مختلف (develop,poroduction .... ) سر و کار داشتین ، هم چنین dependency هایی که در کامپوننت و یا هرکدوم از اجزای وب اپلیکیشن رو با دستور import به اون بخش اضافه کردید. فرایند tree shaking در webpack هنگام گرفتن بیلدهای مختلف تلاش می کنه با تنظیماتی که ما براش فراهم می کنیم ، بیلد بهینه تر و کوچکتری تولید کنه.برای توضیحات بیشتر می تونید این لینک رو مطالعه کنید https://webpack.js.org/guides/tree-shaking/ View declaration(ترجمه ای برای این پیدا نکردم)نسخه دوم vue از template ها هم به خوبی render function ها پشتیبانی می کرد . نسخه سوم هم به همین صورت پیاده سازی شده ، با این تفاوت که پرفورمنس و سرعت تولید خروجی هایی که توسط diff algorithm ها تولید می شن رو افزایش دادن. (نیازی نیست که توسعه دهنده بدونه که چه اتفاقاتی می افته که یک المان تولید می شه و الگوریتم های diff چطور کار می کنند ، اگر خوره این مطلب هستین به لینک انتهای این سرتیتر مراجعه کنید ) .render Function approachimport { defineComponent, h } from "vue" export default defineComponent({ name: "MyComponent", props: { someProp: { type: Boolean } }, render() { const { someProp } = this.$props const { default: defaultSlot, slotOne, slotTwo } = this.$slots const child = h("span", { class: "inner" }, defaultSlot) return h( "div", { class: { "static-class": true, "some-class": someProp } }, [slotOne && slotOne(), child, slotTwo && slotTwo()] ) } })template approach import { defineComponent } from "vue" export default defineComponent({ name: "MyComponent", props: { someProp: { type: Boolean } } }) نیازمندی های قبل از مطالعه لینک زیر برای کاهش سردرگمی :)۱- تسلط کامل به DOM۲- اشنایی با virtual Dom https://www.programmersought.com/article/3584116233/ واقعا سریعتر برای ایجاد سرعت بیشتر در compile و توسعه و پیاده سازی ، virtual DOM در این نسخه از پایه بازنویسی شده ، این بازنویسی باعث شده که فرایندهای mounting و patching با سرعت بیشتری صورت بگیره.فرایند های patch و mounting رو میشه یک زمان دیگری راجع بهش صحبت کرد ولی تنها بدونید که در اسکوپ lifecycle کامپوننت و اپلیکیشن هستش. یعنی اینکه از زمانی که js سعی می کنه virtualDOM رو بسازه یک سری state ها وجود دارن که بهشون می گن lifeCycle و توسط lifeCycle Hook ها به شما اجازه داده میشه که یک سری event یا فرایندهایی رو آغاز کنید یا پایان بدین. رفرنس رو در زیر قرار می دم: https://vuejs.org/v2/guide/instance#Lifecycle-Diagram علاوه بر بازنویسی virtualDom پارامترهای زیر رو هم در نسخه سوم بهبود بخشیدندOptimized Slots Generationوقتی یک کامپوننت پدر در نسخه ۲ ریرندر می شد، child ها هم محکوم به rerender بودند ، اما الان می تونن مجزا rerender بشنStatic Tree Hoistingالان در نسخه سوم vue می تونه تشخیص بده که کدوم المان ها static هستن و اونها رو hoist کنه .اینها باعث میشن کمتر rerenderingرخ بده و از patch شدن تمام element tree ها جلوگیری می کنه.Static Props Hoistingدقیقا مثل مثال قبلی برای node ها اعمال میشه.Proxy-based Observationاگر با reactivity سیستم نسخه دوم vue کار کرده باشید ، حتما از getter و setter که منطبق بر Object.defineProperty هستند ، بهره بردین . حالا در نسخه سوم از پراکسی های ٖES2015 برای مکانیسم observation خودش استفاده می کنه. این کار باعث شده که ۲ برابر سرعت اپلیکیشن بیشتر بشه و مصرف مموری هم نصف بشه (تااااادااااا)پرفورمنس خروجی نسخه سوم vue و مقایسه با vue 2.xالبته برای پشتیبانی از اینترنت اکسپلورر (خخ) همچنان شما می تونین از observation mechanism های نسخه ۲ در نسخه ۳ استفاده کنید.بهینه سازی در Composition API همونطوری که در تیتر قبلی گفته شد مکانیسم observation یا همون reactivity در نسخه ۲ توسط Object.defineProperty یا همون setter و getter پیاده سازی می شدن. این باعث میشد یک سری محدودیت ها به توسعه دهنده اعمال بشه (مثلا اینکه اگر یک آرایه رو طبق index اش می خاستین اپدیت کنید با روش های معمول نمیشد و باید از vue.use استفاده می کردین که مسخرس !!!).الان برای استفاده از reactivity API های جدید ،‌لازم نیست که یک Vue Instance داشته باشین . شما به وسیله فراخوانی این API ها به تنهایی می تونید ازشون برای ساختن ، مشاهده و یا نمایش تغییرات در state ها استفاده کنید (create, observe, and react).تنها کاری که می کنید اینه که ابتدا import { reactive } from 'vue'بعدش یک آبجکت بصورت زیر میسازید const state = reactive({ count: 0 })حالا به API های lifecycle در همان Vue Instance دسترسی دارید . فقط دقت کنید که در این نسخه API های lifeCycle در متد setup باید استفاده بشن .import { onMounted } from 'vue' export default { setup() { onMounted(() => { console.log('component is mounted.') }) } }پشتیبانی بهتر از Type Script هیچی دیگه خیلی بهتر می تونید از TypeScript مخصوصا به دلیل تغییراتی که در Compositon API ها بوجود اومده استفاده کنید . و هم چنین مزایای دیگه TypeScript نسبت به استفاده از ‌جاوا اسکریپت به روش سنتی و ....استفاده از Hook API در نسخه های قبلی Vue برای اینکه یک منطق بتونه توسط کامپوننت های مختلف مورد استفاده قرار بگیره از mixin استفاده می کردند. مدتی گذشت تا خانم Sarah Drasner اعلام کرد که اگر یک state در یک mixin درحال تغییر باشه و همچنین mixin دیگری هم اون رو بازنویسی کنه مشکل chaining of encapsulated logic پیش می یاد به همین دلیل در نسخه جدید از Hook APIاستفاده شده.در لینک زیر می تونید راجع به جریانات این بخش بیشتر بخونید : https://blog.logrocket.com/hooks-are-coming-to-vue/ جمع بندی :نسخه سوم این فریم ورک دوست داشتنی قابلیت های زیادی در دل خودش جا داده ، اما اگر علاقمند به یادگیری این فریم ورک هستین ، توصیه می شه که از نسخه ۲ شروع کنید ، چون هم داکیومنت های کامل تری داره و هم کامیونیتی اش اکثرا دارن از این نسخه استفاده می کنند و بهتر می تونن کمکتون کنن. نسخه سوم vue برای پروژه های بزرگ می تونه قابلیت های بیشتری داشته باشه. و بتونید از تمامی ظرفیت هاش استفاده کنید.بررسی پرفورمنسپرفورمنس خروجی vue3 روی مرورگرهای مختلفبرای مهاجرت از نسخه ۲ به ۳ هم احتمالا یک مقاله دیگه بذارم.(شایدم نذارم ،‌نمی دونم).ولی خب خود دوستان توسعه دهنده قول دادن که داکیومنت های نسخه ۳ رو کامل تر کنند و اگر چیز جالبی دیدم حتما به اشتراک می ذارم.

لیست کامل تگ و متاتگ های html برای بهینه سازی سئو وبسایت

علیرضا شیراوند — Mon, 07 Sep 2020 15:18:58 +0430

متاتگ htmlبا سلام خدمت شما دوستان و علاقمندان SEO و توسعه وبسایت ، خیلی از ما برای توسعه وبسایت هامون از CMS استفاده می کنیم .خب دوستانی که با وردپرس یا CMS های دیگر کار کارده اند متوجه این موضوع هستند که پلاگین هایی مانند yoast و ... این متاتگ ها را مطابق با فیلدهایی که ما روی هر صفحه /پست پر می کنیم ایجاد می کند.ولی بعضی وقتا بنا به نیاز مشتری (شرکتی که در آن مشغول هستیم) نیاز است که لندینگ پیج های مختلفی نیز پیاده سازی کنیم.یا اینکه وبسایت مشتری روی stack مشخصی مانند Angular ،React,Vuejs و ... می باشد که نیاز است این متاتگ ها را خودمان به صفحات اضافه کنیم.در این پست سعی شده است لیستی کامل از متاتگ های html برای بهینه سازی صفحات از نظر سئوتکنیکال خدت شما ارائه گردد.نکات بسیار مهم در استفاده از این لیست : ۱- قطعا همه ی این تگ ها برای شما کارساز نخواهد بود (نیازی نیست در لندینگ پیج هاتون همه ی این تگ هارو استفاده کنید)۲- این تگ ها برای مصارف خاصی الان تعریف شدند و طبق نیاز شما بایستی مقادیر رو تغییر بدید.۳- ممکن است تعدادی از این تگ ها منقضی شده باشند ،‌لطفا اگر نقصی بود یا نکته ای در کامنت اشاره کنید تا تصحیح بشه.۴- در انتهای نوشته برخی از تگ ها رو توضیح دادم و اگر راجع به تگ دیگری سوال داشتین بپرسید و حتما جوابشو پیدا می کنم و خدمتتون میگم.متاتگ های html پایه:متاتگ های OpenGraph برای شبکه های اجتماعی :متا تگ های اپل :متاتگ های اینترنت اکسپلورر تگ های لینک HTML :‌برای پیاده سازی انواع لینک دانستن این تگ ها کمک شایانی به شما می کندمتاتگ های توییتر برای این شبکه اجتماعی :متاتگ های کنترل خانواده(راستش معنی فارسیش سخته همون parental Control): نمونه ای از متاتگ کنترل cache :برای mobile First Indexing :حتما نیازه تگ های viewPort رو درست کانفیگ کنید مثل نمونه زیر:تگ های روبات گوگل :این تگ در لیست ابتدایی بود و نوع کانفیگ اش را باید مطابق با نیازتان تغییر دهید در زیر نمونه ای از این تگ ها با جزئیات بیشتر آورده ام.همانطور که مشاهده می کنید این ۳ کانفیگ ،‌هرکدام تاثیر متفاوتی دارند و نیاز است مطابق با داکیومنت منتشر شده خود گوگل ابتدا معانی noindex ,index , nofollow,follow را بدانید و بسته به نیازتان آنها را پیاده سازی کنید.لینک رفرنس:https://developers.google.com/search/reference/robots_meta_tagمتاتگ رفرش این تگ کاربردهای متفاوتی دارد مانند:بروزرسانی محتوای صفحه بعد از مدت زمانی مشخص (رفرش صفحه) :۵ ثانیه ریدایرکت به صفحه دیگر پس از بازه زمانی مشخص شده:۵ ثانیه ریدایرکت به لینک دیگر به صورت آنی