<h1>SEO optimization for the blog. Practical guide and use case</h1>
<h2>General aspects</h2>
First of all, for each of the page, there was a necessity to introduce the correct keywords/description/title.
In order to do that, previously was used <a href="https://github.com/nfl/react-helmet">React Helmet</a>, but due to the usage of React 18 and streaming,
there was a decision to re-organize the idea of metadata.
First of all, index.html for react application was constructed in such a way, that it&#39;s possible to substitute the necessary data.
For this case, following markup was prepared :
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;{lang}&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot; /&gt;
 {react-head}
 &lt;/head&gt;
 &lt;body&gt;
 &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
 &lt;div id=&quot;root&quot;&gt;{react-app}&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>On the backend, modify the router as following for being compatible with React 18:
<pre><code class="hljs language-javascript"> import express from &#x27;express&#x27;;
 import assets from &#x27;../build/assets-manifest.json&#x27;; // import assets to map the index.js/index.css, which will be served to the end user

 const app = express();
 const indexFile = path.resolve(&#x27;./build/index.html&#x27;);
 const data = fs.readFileSync(indexFile, {
 encoding: &#x27;utf-8&#x27;,
 flag: &#x27;r&#x27;,
 });
 const [head, tail] = data.split(&quot;{react-app}&quot;);

 const [preHead, afterHead] = head.split(&#x27;{react-head}&#x27;);

 app.get(&#x27;*&#x27;, (req, res) =&gt; {
 const userBrowserLang = req.acceptsLanguages(&#x27;en&#x27;, &#x27;ru&#x27;, &#x27;ua&#x27;) || &#x27;en&#x27;;

 let originalUrl = req.url
 .replace(/^\/(en|ru|ua)/, &#x27;&#x27;)

 if(originalUrl === &#x27;/&#x27;) originalUrl = &#x27;&#x27;;

 const { pipe } = renderToPipeableStream(
 &lt;AppRoutes /&gt; ,
 {
 bootstrapScripts: [`/static/${assets[&#x27;index.js&#x27;]}`],
 onShellReady() {
 res.status(context.status || 200); 
 res.write(preHead);
 res.write(afterHead);
 pipe(res);
 res.write(tail);
 },
 onShellError(error) {
 console.log(error);
 },
 onError(error) {
 console.log(error);
 }
 }
 );
 });
</code></pre><h2>Multiple languages for the SEO</h2>
Per the <a href="https://developers.google.com/search/docs/advanced/crawling/localized-versions">Google documentation</a>, Google is able
to distinguish the duplicates of your content for different languages. 
For the case with DeCODE, we decided to use &quot;hreflang&quot; variant, which can work perfectly with <a href="https://react.i18next.com/">React I18Next</a>
First of all, for the configuration of the frontend, react-i18next should check for the subpath in the URL. 
We have restructured React Router and I18Next as following:
<pre><code class="hljs language-jsx">import {
 Routes,
 Route,
} from &quot;react-router-dom&quot;;
import i18next from &#x27;i18next&#x27;;
import BrowserLanguageDetector from &#x27;i18next-browser-languagedetector&#x27;;
import { initReactI18next } from &quot;react-i18next&quot;;

i18next
 .use(BrowserLanguageDetector)
 .use(initReactI18next) // passes i18n down to react-i18next
 .init({
 detection: {
 order: [&#x27;path&#x27;, &#x27;cookie&#x27;, &#x27;header&#x27;],
 lookupCookie: &#x27;lang&#x27;,
 caches: [&#x27;cookie&#x27;],
 }
 });
const App = ({ context }) =&gt; {
 return (
 &lt;Routes&gt;
 &lt;Route path=&#x27;:lang/landing/spacechains&#x27; element={&lt;SpacechainsLanding /&gt;} /&gt;
 &lt;Route path=&#x27;/landing/spacechains&#x27; element={&lt;SpacechainsLanding /&gt;} /&gt;
 &lt;Route path=&#x27;:lang/&#x27; element={&lt;StartLanding context={context} /&gt;} /&gt;
 &lt;Route path=&#x27;/&#x27; element={&lt;StartLanding context={context} /&gt;} /&gt;
 {/* other routes */}
 &lt;/Routes&gt;
 );
</code></pre>Take a note, that we are using <code>:lang</code> here to be able to work with the links, such as <code>/en/landing/spacechains</code> and so on.
And for the I18Next to fetch it from the subpath, it uses parameter <code>detection</code>, where you need to specify what should be used to detect 
the user desired localization. Right now you need to duplicate the routes, if you are using React Router v6, because there 
is no possibility to mark url path as optional. 
<div class="info-notification-blog">
For DeCODE, it was also necessary to specify a set of supported languages 
for i18n. This action was needed for eliminating the difference from the 
browser/server, which have been serving different language string (en and en-US). 
You can do it by passing the supported languages in <code>supportedLangs</code>
field of i18next:
 <pre>
 <code class="lang-javascript">
i18next.init({ supportedLangs: [&#39;en&#39;, &#39;ru&#39;, &#39;ua&#39;] })
 </code>
 </pre>
</div>

On the backend side, place into the response tags, which are specific to your
localized pages. Due to the fact, that Google indexes both www and non-www pages,
it was necessary to specify the canonical tag. End result of this step looked 
as following:
<pre><code class="hljs language-javascript"> res.status(context.status || 200); 
 res.write(preHead.replace(&#x27;{lang}&#x27;, userBrowserLang)); // specify the language which will be served to the user
 // Specify translations for your page using the hreflang
 res.write(`
 &lt;link rel=&quot;canonical&quot; href=&quot;https://decodeapps.pp.ua${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;en&quot; href=&quot;https://decodeapps.pp.ua/en${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;ru&quot; href=&quot;https://decodeapps.pp.ua/ru${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;ua&quot; href=&quot;https://decodeapps.pp.ua/ua${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;x-default&quot; href=&quot;https://decodeapps.pp.ua${originalUrl}&quot; /&gt;
 `);
 res.write(afterHead);
</code></pre><h2>Tags optimization</h2>
On the website and blog, DeCODE is using a lot of images, therefore, it was necessary to define,
how should they be optimized for the end user and for the search engine. 
To achieve better performance, all <code>&lt;img /&gt;</code> tags were replaced with <code>&lt;picture /&gt;</code>,
which are allowing to specify multiple sources for the image.
<pre><code class="hljs language-javascript"> const AdaptiveImage = ({ jpg, webp, alt, ...imgProps }) =&gt; {
 return (
 &lt;picture&gt;
 {webp &amp;&amp; &lt;source srcSet={webp} type=&quot;image/webp&quot; /&gt;}
 {jpg &amp;&amp; &lt;source srcSet={jpg} type=&#x27;image/jpeg&#x27; /&gt;}
 &lt;img alt={alt} src={jpg} {...imgProps}/&gt;
 &lt;/picture&gt;
 );
 };

 export default AdaptiveImage;
</code></pre>