SEO Improvements; Support <noscript> tag (#1927)

src/components/auth/Auth.scss

@@ -34,7 +34,7 @@
     background-size: 100%;
   }
 
-  h2 {
+  h1 {
     font-size: 1.25rem;
     line-height: 1;
 
@@ -82,7 +82,7 @@
 
 #auth-code-form,
 #auth-password-form {
-  h2 {
+  h1 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -159,8 +159,9 @@
     overflow: hidden;
   }
 
-  h3 {
+  h1 {
     margin: 1.5rem 0 1rem 0;
+    font-size: 1.25rem;
   }
 
   ol {

src/components/auth/AuthCode.tsx

@@ -91,7 +91,7 @@ const AuthCode: FC<StateProps> = ({
           isTracking={isTracking}
           trackingDirection={trackingDirection}
         />
-        <h2>
+        <h1>
           {authPhoneNumber}
           <div
             className="auth-number-edit"
@@ -102,7 +102,7 @@ const AuthCode: FC<StateProps> = ({
           >
             <i className="icon-edit" />
           </div>
-        </h2>
+        </h1>
         <p className="note">
           {renderText(lang(authIsCodeViaApp ? 'SentAppCode' : 'Login.JustSentSms'), ['simple_markdown'])}
         </p>

src/components/auth/AuthPassword.tsx

@@ -32,7 +32,7 @@ const AuthPassword: FC<StateProps> = ({
     <div id="auth-password-form" className="custom-scroll">
       <div className="auth-form">
         <MonkeyPassword isPasswordVisible={showPassword} />
-        <h2>{lang('Login.Header.Password')}</h2>
+        <h1>{lang('Login.Header.Password')}</h1>
         <p className="note">{lang('Login.EnterPasswordDescription')}</p>
         <PasswordForm
           clearError={clearAuthError}

src/components/auth/AuthPhoneNumber.tsx

@@ -209,7 +209,7 @@ const AuthPhoneNumber: FC<StateProps> = ({
     <div id="auth-phone-number-form" className="custom-scroll">
       <div className="auth-form">
         <div id="logo" />
-        <h2>Telegram</h2>
+        <h1>Telegram</h1>
         <p className="note">{lang('StartText')}</p>
         <form action="" onSubmit={handleSubmit}>
           <CountryCodeInput

src/components/auth/AuthQrCode.tsx

@@ -142,7 +142,7 @@ const AuthCode: FC<StateProps> = ({
           </div>
           {!isQrMounted && <div className="qr-loading"><Loading /></div>}
         </div>
-        <h3>{lang('Login.QR.Title')}</h3>
+        <h1>{lang('Login.QR.Title')}</h1>
         <ol>
           <li><span>{lang('Login.QR.Help1')}</span></li>
           <li><span>{renderText(lang('Login.QR2.Help2'), ['simple_markdown'])}</span></li>

src/index.html

@@ -24,25 +24,30 @@
   <meta property="og:url" content="https://web.telegram.org/z/">
   <meta property="og:title" content="<%= htmlWebpackPlugin.options.appName %>">
   <meta property="og:description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
-  <meta property="og:image" content="./icon-192x192.png">
+  <meta property="og:image" content="./<%= htmlWebpackPlugin.options.mainIcon %>.png">
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://web.telegram.org/z/">
   <meta property="twitter:title" content="<%= htmlWebpackPlugin.options.appName %>">
   <meta property="twitter:description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
-  <meta property="twitter:image" content="./icon-192x192.png">
+  <meta property="twitter:image" content="./<%= htmlWebpackPlugin.options.mainIcon %>.png">
 
   <link rel="apple-touch-icon" sizes="180x180" href="./<%= htmlWebpackPlugin.options.appleIcon %>.png">
   <link rel="icon" href="./favicon.svg" type="image/svg+xml">
   <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
   <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="192x192" href="./icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="./<%= htmlWebpackPlugin.options.mainIcon %>.png">
   <link rel="alternate icon" href="./favicon.ico" type="image/x-icon">
   <link rel="manifest" id="the-manifest-placeholder" />
 </head>
 
 <body>
+  <noscript>
+    <video src="./nojs.mp4" class="nojs-video" muted loop autoplay playsinline></video>
+    <h1>Telegram Web</h1>
+    <p>Please, enable JavaScript to open the app.</p>
+  </noscript>
   <div id="root"></div>
   <div id="portals"></div>
 </body>

src/styles/index.scss

@@ -34,6 +34,20 @@ body {
   }
 }
 
+noscript {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  align-content: center;
+  justify-items: center;
+  .nojs-video {
+    pointer-events: none;
+    &::-webkit-media-controls {
+      display: none;
+    }
+  }
+}
+
 body.is-ios,
 body.is-macos {
   --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;

webpack.config.js

@@ -131,7 +131,8 @@ module.exports = (env = {}, argv = {}) => {
       )] : []),
       new HtmlWebpackPlugin({
         appName: process.env.APP_ENV === 'production' ? 'Telegram Web' : 'Telegram Web Beta',
-        appleIcon: process.env.APP_ENV === 'production' ? 'apple-touch-icon' : './apple-touch-icon-dev',
+        appleIcon: process.env.APP_ENV === 'production' ? 'apple-touch-icon' : 'apple-touch-icon-dev',
+        mainIcon: process.env.APP_ENV === 'production' ? 'icon-192x192' : 'icon-dev-192x192',
         template: 'src/index.html',
       }),
       new MiniCssExtractPlugin({