SEO برای جاوا اسکریپت واکنشی با استفاده از React یا Vue با NodeJS و سایر پشته های باطن

thumbnail

در طول بحث زنده ما در مورد چگونگی با استفاده از HTML5 ، CSS3 و Javascript ، علامت گذاری مناسب برای جستجوگرها را انجام دهید در اوایل سال جاری ، زمان زیادی را صرف صحبت در مورد React کردیم. من قصد دارم تفاوت های لازم برای React را جستجو کنم که برای سئو باید در ذهن داشته باشید. ما از کدی برای تجزیه و تحلیل توسط Russ Jeffrey ، مدیر ادغام های استراتژیک در Duda ، که در بحث شرکت کرده است ، استفاده خواهیم کرد.

واکنش نشان دادن ، یا واکنش ندادن؟

یک چارچوب واکنش می تواند باعث شود صفحات وب سایت (برنامه) احساس کنند که در زیر آنها جادو شده است ، زیرا جزئیات داشبورد با جامعه ای از کاربران پر جنب و جوش هماهنگ می شود ، مانند تجربه ای که از فیس بوک و توییتر انتظار دارید

با این وجود الزامات تجاری باید تعیین کنند که شما در نهایت از چه فناوری در یک پروژه استفاده می کنید. اگر در حال نوشتن برنامه ای هستید که به نوع پویایی فیس بوک نیاز دارد ، می خواهید در ایجاد یک چارچوب واکنش پذیر برای ارائه آن سرمایه گذاری کنید. با این حال ، در واقع ، تعداد بسیار کمی از سایت ها از این نوع نیازها برخوردار هستند. در بیشتر موارد ، به دلایل اساسی عملکرد ، بهتر است با jQuery یا JavaScript وانیلی همراه باشید.

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

استراتژی های رندر برای سئو

قطعاً باید در مورد نحوه و زمان ارائه برنامه وب محتوای مهم برای سئو متفاوت فکر کنید. این همان یادگیری است که راس در نیمه دوم بحث ما به ارمغان آورد. او مثالهایی را برای چگونگی ساخت سمت سرور و ارسال پوسته برنامه بهینه شده در کنار JavaScript نشان می دهد تا خزنده ها بتوانند آنچه برای SEO لازم است را بدست آورند و باقیمانده با استفاده از “هیدراتاسیون” در سمت مشتری ارائه شود.

بحث کامل را اینجا ببینید.

چارچوب ها

برنامه نویسی کاربردی در این زمینه معمولاً بیش از کتابخانه frontend است. یک قرارداد برای طراحی طرح پیکربندی فایل با اسکریپت های مفید می تواند آنچه را که به عنوان چارچوبی برای React یا Vue نامیده می شود ، تشکیل دهد. Next و Nuxt به ترتیب چارچوب های React و Vue مبتنی بر NodeJS هستند.

مطالب مرتبط  آیا اپل در مورد جستجو واقعی است و قصد دارد Google را به کار بگیرد؟

چارچوب ها با توجه به مشخصات مرسوم و بهترین روش ها ، پرونده ها و خدمات پروژه داربست را ساده می کنند. Russ پیوندهایی به پروژه های GitHub در اختیار ما قرار داد که نشانگر نحوه ادغام React و Vue با چندین زبان برنامه نویسی معروف backend است. اگر می خواهید فرایند اجرای متفاوتی نسبت به NodeJS در باطن داشته باشید ، آنها را بررسی کنید.

  • واکنش پایتون / Python Vue
  • PHP React / PHP Vue
  • Ruby React / Ruby Vue
  • Java React / Java Vue

قطعه کد سئو با NodeJS

هنگامی که به سطح سطح شرکتی یا راه اندازی می رسید ، توافق نامه سطح خدمات با یک چارچوب ممکن است امکان پذیر نباشد. Russ ما را در ابتدای کار با قطعه کد SEO که فقط براساس NodeJS (با Express) کار می کند ، راه می برد.

سه پرونده اصلی در هر دو نمونه پروژه React و Vue دارای کد لازم برای تجزیه و تحلیل ما هستند:

  • app.js پرونده حاوی پوسته برنامه “وبلاگ” است.
  • server.js فایل در کتابخانه Express کشیده می شود ، آن را برای رسیدگی به درخواست از جمله روش های ارائه برای SSR پیکربندی می کند.
  • پرونده index.js به عنوان نقطه ورود به روند اجرا NodeJS عمل می کند.

React دوستانه سئو

App.js مثالی برای React مسیرهای دوستانه سئو به URL هایی را نشان می دهد که برای قطعات SPA به قطعات متکی نیستند صفحه مجازی نماها که در server.js یک شی data داده ای “متن” حاوی جزئیات منبع برای تماس است ReactDOMServer.renderToString() برای ارائه پوسته برنامه ما با متن بر اساس URL و معیارهای بالقوه دیگر.

server.js پرونده برای اصلاحات بیشتر دارای هدف زمینه داده است. Russ پیش از ارسال نهایی آن به مرورگر ، جایگزینی عنوان و سایر داده های متا را برای تکمیل SEO برای پوسته برنامه ساخته شده نشان می دهد.

در آخر، index.js به عنوان نقطه شروع فرآیند NodeJS و ReactDOM.hydrate() بعد از بارگیری پوسته ، برای استفاده از برنامه ما با محتوای کمکی کم اهمیت استفاده می شود.

فهرست “ساخت” شامل index.html به عنوان یک فایل هدف برای ساخت الگوی SSR. دو فایل دیگر ، اجزا خانه و نوشته ها، با استفاده از a ذخیره می شوند .js پسوند ، که ضمنی ضمنی آن است و بنابراین نیازی به ذکر صریح آن در بیانیه های واردات ندارد. ما به سرعت می خواهیم از تجزیه و تحلیل پرونده های م componentلفه صرف نظر کنیم ، جز این که بگوییم یافتن مجدد پرونده های م componentلفه به صورت دوباره جزءزیر شاخه.

در مثال های Russ ، همه پرونده ها ، از جمله پرونده های جز component ، در فهرست پایه پروژه قرار دارند. این همان چیزی است که درخت فهرست پرونده های React به نظر می رسد:
├── App.js
├── Home.js
├── Posts.js
├── ساختن
│ └── index.html
├── index.js
└── server.js

اگر با نحو JSX آشنایی ندارید ، این یک برنامه افزودنی زبان JavaScript است که برای رمزگذاری م Reلفه React با XML در نظر گرفته شده است تا پرونده های الگو بتوانند JavaScript را شامل شوند. اجزای کودک وارد می شوند و بعداً طبق قرارداد به آنها ارجاع می شود (نقشه Home.js و Posts.js به و به ترتیب) در بلوک الگوی XML.

راس استفاده می کند واکنش-مسیریاب-دامنه کتابخانه ها (که ممکن است لازم باشد از طریق NPM نصب کنید): Router و StaticRouter ، Switch و NavLink. این کتابخانه ها برای سهولت در انجام وظایف مشترک ، مانند استفاده از راهنما NavLink “to” برای تولید پیوندهای HTML به مسیر یا منبع url ، که تا حدودی مشابه راهنمای Rail_ Link_to است ، راهنمای آماده را برای راحتی فراهم می کنند.

از طریق سوییچ و روتر در App.js Russ نحو مطابقت با مسیرهای url را نشان می دهد. به عبارت کلیدی “دقیق” برای عبارت path index توجه کنید. لازم است فقط دقیقاً “/” مطابقت داشته باشد یا در غیر این صورت با هر مسیر برنامه مطابقت دارد! استفاده از کلمه کلیدی “دقیق” معیارهای پیش فرض را از مطابقت حریصانه متناسب با “/ پست ها” و همچنین “/ پست ها / سلام جهان” و غیره تغییر می دهد.

که در server.js Russ از یک چارچوب خارجی مشترک به نام Express استفاده می کند تا برنامه ما را با شنونده درگاه مورد نیاز و روش های پاسخ مورد نیاز برای سرویس برنامه ما در شبکه تنظیم کند. اگر به صورت محلی کار می کنید ، می خواهید یک متغیر محلی PORT برای ایجاد مطابقت با درگاهی باز که قصد دارید از طریق درخواست localhost با آن کار کنید ، ایجاد کنید. در تولید ، معمولاً باید روی پورت 80 تنظیم شود.

چارچوب Vue

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

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

پست SEO برای جاوا اسکریپت واکنشی با استفاده از React یا Vue با NodeJS و سایر پشته های backend اولین بار در Search Engine Land ظاهر شد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Back To Top