为什么使用 nextjs 查看源代码不对齐，就像在 wordpress 中一样

Question

我是 NextJS 的新手，我想学习它，因为我想构建可以被 google 搜索引擎识别的网站，从而获得良好的 SEO。 Wordpress 在这方面做得很好，因为在 view source 中输出 html for website.

我查看了 NextJS 项目的源代码，看起来像这样：

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

然后我记得在 wordpress 网站中，视图源代码对齐得很好：

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

我的问题是：如果查看源代码很乱，比如在NextJS项目中，这不会让google搜索引擎机器人感到困惑吗？那么这不会对SEO造成不良影响吗？

Answer 1

下一个输出的源代码被缩小了（=需要更少的字节来下载）。

Google 机器人和其他机器人不会像人类一样读取源代码，而是将其解析为易于遍历的内容 (AST)。

如果输出是 VALID html，解析器将能够毫无问题地解析它。

Answer 2

不用担心源代码的对齐问题。 NextJs网页源码精简（即全部源码一行显示）

压缩后的源代码很容易被 SEO 机器人抓取。

为什么使用 nextjs 查看源代码不对齐，就像在 wordpress 中一样

Why with nextjs view source is not aligned, like in wordpress

wordpress

next.js