<h1>How to generate sitemap for NodeJS blog</h1>
<h2>Extending the Poet functionality</h2>
Based on the existing blogging engine, named <a href="https://github.com/jsantell/poet">poet</a>, there was created a <a href="https://github.com/FallenAngel97/poet">fork</a>, and refactored to be
for the ES6+ syntax. Also, the project have been completely rewritten with TypeScript. This was done to be compatible with newer libraries and dependencies used in the solution. Also, <code>underscore</code> was replaced with native solutions, so that
poet doesn&#39;t pull additional dependencies. 
To keep poet simple, yet flexible, there was added an additional function, <code>getLinks</code>, which provides links to the tags, posts and categories in the blog. 
<pre><code class="hljs language-typescript"> getLinks(flatten: boolean) {
 const postCount = this.helpers.getPostCount();
 const posts = this.helpers.getPosts(0, postCount).map((post) =&gt; post.url);
 const tags = this.helpers.getTags().map((tag) =&gt; `/tag/${tag}`);
 const categories = this.helpers.getCategories().map((category) =&gt; `/category/${category}`);
 if(flatten) {
 return [
 ...posts,
 ...tags,
 ...categories
 ]
 }
 return { posts, tags, categories };
 }
</code></pre><h2>Creating a dynamic sitemap for the Express Blog</h2>
In your express application, add additional route, which is handling the sitemap 
generation. You need to set the header, which shows, that the output will be an xml and call a function
from poet, which will allow you to retrieve all the links in the blog.
<pre><code class="hljs language-javascript"> app.get(&#x27;/blog-sitemap.xml&#x27;, (req, res) =&gt; {
 res.setHeader(&#x27;Content-Type&#x27;, &#x27;application/xml&#x27;);
 res.render(&#x27;sitemap&#x27;, {
 baseUrl: &#x27;https://example.com&#x27;,
 posts: poet.getLinks(true),
 });
 });
</code></pre>Also, you will need some template, which will be used for the sitemap generation,
so you can fill it with something like this:
<pre><code class="hljs language-pug">doctype xml
urlset(xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;)
 each post in posts
 - var fullUrl = baseUrl + post
 url
 loc= fullUrl
</code></pre><h2>Changes for the index sitemap</h2>
According to <a href="https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps">Google guide</a>, you can combine multiple
sitemaps into a sitemap index. This is a perfect match for the case with auto-generation of sitemap, so you can structure it like so:
<pre><code class="hljs language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;sitemapindex xmlns=&quot;http://www.sitemaps.org/schemas/sitemap/0.9&quot;&gt;
 &lt;sitemap&gt;
 &lt;loc&gt;https://example.com/blog-sitemap.xml&lt;/loc&gt;
 &lt;/sitemap&gt;
 &lt;sitemap&gt;
 &lt;loc&gt;https://example.com/another-sitemap.xml&lt;/loc&gt;
 &lt;/sitemap&gt;
&lt;/sitemapindex&gt;
</code></pre>Photo by <a href="https://unsplash.com/@andrewtneel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Andrew Neel</a> on <a href="https://unsplash.com/s/photos/map?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

How to generate sitemap for NodeJS blog

<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>

SEO optimization for the blog

<h1>Start of the Blog</h1>
<h2>General idea for the blog</h2>
Since the creation of the projects on both Github and Google play, DeCODE has been 
publishing updates directly to social media. And all the content was carefully designed
and posted at the proper time. 
But due to the necessity of constantly updating the community with the process of DeCODE 
journey, I have decided to create a specific blog, where I can post updates.
<h2>How to set up the blog in NodeJS</h2>
Here we are using ExpressJS with the React router
For the blogging engine, I have decided to take Poet, as it can be easily integrated into the Express application
To start, first, you will need to install it and configure:
<pre><code class="hljs language-bash">yarn add poet
</code></pre><pre><code class="hljs language-javascript">import express from &#x27;express&#x27;;
import Poet from &#x27;poet&#x27;;

const app = express();
const poet = Poet(app);
const PORT = process.env.PORT || 3001;

app.get(&#x27;/blog&#x27;, (req, res) =&gt; {
 const lang = req.cookies.lang || &#x27;en-US&#x27;;
 res.render(&#x27;blog_index&#x27;, { 
 keywords: &#x27;keywords,example,fine&#x27;,
 description: &#x27;&#x27;
 });
});

app.listen(PORT, () =&gt; {
 console.log(`Server is listening on port ${PORT}`);
});
</code></pre>I am a huge fan of configuring the application through the environment variables, so I
like to provide the opportunity to override the <code>PORT</code> which the application is listening to
through the env variables.
Take note, that with express and React Router SSR you might have the following construction:
<pre><code class="hljs language-javascript"> app.get(&#x27;*&#x27;, (req, res) =&gt; {
 const context = { useragent: req.useragent };
 const metaTags = getMetaTagsbyUrl(req);

 const { pipe } = renderToPipeableStream(
 &lt;StaticRouter location={req.url} context={context}&gt;
 &lt;I18nextProvider i18n={req.i18n}&gt;
 &lt;AppRoutes /&gt;
 &lt;/I18nextProvider&gt;
 &lt;/StaticRouter&gt;,
 {
 bootstrapScripts: [`/static/${assets[&#x27;index.js&#x27;]}`],
 onShellReady() {
 res.status(context.status || 200); 
 res.write(preHead);
 res.write(metaTags);
 res.write(afterHead);
 pipe(res);
 res.write(tail);
 },
 onShellError(error) {
 console.log(error);
 },
 onError(error) {
 console.log(error);
 }
 }
 );
 });
</code></pre>If it is the case for you, you need to put the <code>/blog</code> URL above it, so it will not be picked up
by the wildcard (* symbol)
<h2>Pug syntax</h2>
Pug is templating language, which can produce HTML. DeCODE blog uses Pug for managing the content
Pug provides several utilities, some of them are blocks, which can define sections that should
be rendered through the inclusion of them with <code>block</code>. 
The syntax of pug uses indenting, like Python, to introduce nested tags. Be careful, when indenting
some wrappers, because you might accidentally change the template
In case it&#39;s necessary to debug some of the variables, you can use standard JS <code>console.log</code>
and check output in the shell.
This Poet blog used markdown, and you can pass additional arguments to the view like so:
<pre><code class="hljs language-javascript"> res.render(&#x27;blog_index&#x27;, { 
 keywords: &#x27;keywords,example,fine&#x27;,
 description: &#x27;&#x27;
 });
</code></pre>