fix: seo

public/index.html

@@ -84,6 +84,10 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="DeepPavlov demo analyzes text by using multilingual named-entity recognition, text classification, question answering, sentiment analysis and many other natural language processing models."
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user’s mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

robots.txt → public/robots.txt

@@ -1,3 +1,3 @@
 User-agent: *
-Disallow: /
+Disallow:
 

src/components/BaseSkill/BaseSkill.module.scss

@@ -23,6 +23,8 @@
     line-height: 110%;
     letter-spacing: -0.02em;
     color: rgba(0, 0, 0, 0.9);
+    margin-block-start: 1em;
+    margin-block-end: 1em;
   }
   .inputArea {
     margin-top: 20px;

src/components/BaseSkill/BaseSkill.tsx

@@ -292,7 +292,7 @@ class BaseSkill extends Component<Props, State> {
   renderTopic = (mes: Answer, i: number) => {
     const { colors } = this.props.renderAnswer!
     const answer = mes.answer[0].toString().toUpperCase()
-    
+
     return (
       <div className={s.basic} key={i}>
         <p>
@@ -515,7 +515,7 @@ class BaseSkill extends Component<Props, State> {
       <div className={s.container}>
         <Loader loading={loading} />
         <ErrorHandler error={error} onErrorClose={this.onErrorClose} />
-        <p className={s.title}>{title}</p>
+        <h4 className={s.title}>{title}</h4>
         {desc && <div>{desc}</div>}
         {isIntegration && <Integration snippets={snippets} />}
         {isExamples && (

src/components/Header/Header.tsx

@@ -11,7 +11,7 @@ export const Header: FC<HeaderProps> = () => {
     <div ref={ref} className="accentColor sticky">
       <Limiter>
         <div className={s.top}>
-          <p className={s.subtitle}>demo.deeppavlov.ai</p>
+          <h2 className={s.subtitle}>demo.deeppavlov.ai</h2>
           <Buttons reverse />
         </div>
       </Limiter>

src/components/Top/Top.module.scss

@@ -51,10 +51,15 @@
   margin: 0;
   font-family: "Montserrat";
   font-size: 72px;
-  line-height: 110%;
-  font-weight: 600;
   letter-spacing: -0.02em;
+}
+
+.header .title h1 {
   color: black;
+  margin: 0;
+  font-size: 72px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
 }
 
 .header .title a {
@@ -80,7 +85,7 @@
 }
 
 @media only screen and (max-width: 800px) {
-  .header .title {
+  .header .title h1 {
     font-size: 64px;
   }
 }
@@ -97,7 +102,7 @@
 }
 
 @media only screen and (max-width: 450px) {
-  .header .title {
+  .header .title h1 {
     font-size: 38px;
   }
   .header .middle .left .check {
@@ -109,7 +114,7 @@
 }
 
 @media only screen and (max-width: 320px) {
-  .header .title {
+  .header .title h1 {
     font-size: 30px;
   }
 }

src/components/Top/Top.tsx

@@ -17,7 +17,7 @@ export const Top: FC<TopProps> = (props) => {
                 <a href="https://deeppavlov.ai">
                   <span className={s.blue}>DeepPavlov</span>
                 </a>
-                <span>DeepPavlov</span>
+                <h1>DeepPavlov</h1>
               </p>
               <span className={s.check}>
                 Check and try our product's demo with us.