برای اینکه سایتتان را سئو کنید، باید تگ های مهم متا (مثلا description و …) را برای هر صفحه مشخص کنید. (از این لینک برای آشنایی با قوانین سئو استفاده کنید.)

اگر می خواهید بصورت static این تگ ها را مشخص کنید، باید آن ها را داخل فایل index.js قرار دهید، اما اگر می خواهید بصورت dynamic و حرفه ای تر سئو کنید، می توانید از کتابخانه های react که برای سئو توسعه داده شده اند استفاده کنید.

کتابخانه های زیادی برای این کار موجودند که یکی از مهم ترین آن ها react-helmet است. با دستور زیر نصبش کنید:

npm install react-helmet --force

سپس بصورت زیر ایمپورتش کنید:

import { Helmet } from "react-helmet";

و حالا داخل تابع return هر کامپوننت بصورت زیر از آن استفاده کنید:

 return(

    <div>
.
.
.
      <Helmet>
  	<title>my title</title>
	 <meta name="description" content={this.state.meta_description}/>
      </Helmet>

.
.
.
</div>
);

* حالا اگر پروژه تان را ران کنید و inspect element را بزنید، کد های متا و title را داخل تگ head می بینید. اگر با زدن view page source تگ ها را ندیدید، به خاطر اینست که view page source کد های سمت سرور را نمایش می دهد و inspect element کدهای سمت client را و چون react هم سمت client است، ممکن است سمت view page source نمایش داده نشود. اما نگران نباشید، کاربر های جدید و ربات های گوگل کدهای جدید شما را می بینند.