I am new in NextJS and I want to learn it because I want to build websites to be recognized by google search engine, so to have a good SEO. WordPress is very good in this direction, because outputs in view source the html for website.
I looked on view source for NextJS project and looks like this:
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/><meta name="next-head-count" content="2"/><link rel="preload" href="/_next/static/development/pages/index.js?ts=1578323131691" as="script"/><link rel="preload" href="/_next/static/development/pages/_app.js?ts=1578323131691" as="script"/><link rel="preload" href="/_next/static/runtime/webpack.js?ts=1578323131691" as="script"/><link rel="preload" href="/_next/static/runtime/main.js?ts=1578323131691" as="script"/></head><body><div id="__next"><h1>Welcome to NextJS</h1></div><script src="/_next/static/development/dll/dll_d6a88dbe3071bd165157.js?ts=1578323131691"></script><script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script><script nomodule="" src="/_next/static/runtime/polyfills.js?ts=1578323131691"></script><script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1578323131691"></script><script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1578323131691"></script><script src="/_next/static/runtime/webpack.js?ts=1578323131691" async=""></script><script src="/_next/static/runtime/main.js?ts=1578323131691" async=""></script></body></html>
then I remembered that in the wordpress websites, the view source was nicely aligned:
<body
class="home page-template page-template-tpl-fullwidth page-template-tpl-fullwidth-php page page-id-7 page-parent mltlngg-ro_RO elementor-default">
<!-- **Wrapper** -->
<div class="wrapper">
<!-- **Inner Wrapper** -->
<div class="inner-wrapper">
<div id="bbar-wrapper" class="type1">
<div id="bbar-body">
<div class="container">
<div class="column dt-sc-one-half first">
<p class="bbar-text"></p>
</div>
<div class="column dt-sc-one-half alignright">
<div class="mltlngg_switcher">
<form name="mltlngg_change_language" method="post" action=""><button name="mltlngg_change_display_lang"
value="ro_RO">
<img src=""
alt="Română">
</button><button name="mltlngg_change_display_lang" value="en_GB">
<img src="g"
alt="English">
</button></form>
</div>
<div><span class="fa fa-phone-square"> </span> <a href="tel:" class="phone_call"></a><a href="mailto:" title="Trimite Email">
</a></div>
</div>
</div>
</div>
<span class="bbar-divider"></span>
</div>
<!-- Header Wrapper -->
<div id="header-wrapper">
<!-- **Header** -->
<header id="header" class="header1 gradient-bg">
<!-- **Header Container** -->
<div class="container">
<!-- **Logo - End** -->
<div id="logo">
My question is: if the view source code is a mess, like in the NextJS project, this will not make google search engine robots to be confused? So this will not have a bad impact on SEO?
2
Answers
The source code of next out is minified (= takes less bytes to download).
Google bot & other bots not reads that source code as humans, but parses it into something that will be easy to traversal (AST).
If the output is VALID html, the parser will be able to parse it without any problem.
Don’t worry with the alignment of the source code.
NextJs webpage has minified source code(i.e., the entire source code is displayed in one single line)
Minified source code is very easy for SEO bots to crawl.