<p dir="auto">Hi,<br>
Hope everyone is ok</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">In Chrome V68, everything is ok but the problem is with the Chrome used by Google Bot.<br>
In fact, in my home page, after building the home page, the title is automatically replaced by ": An unexpected error has occured".<br>
You definetely need to go over "to reproduce and dem section"</p>
<h2 dir="auto">To Reproduce &amp; Dem</h2>
<p dir="auto">You need to go to <a href="https://www.browserling.com/browse/win/7/chrome/41/https://en.vetolib.vet" rel="nofollow">https://www.browserling.com/browse/win/7/chrome/41/https://en.vetolib.vet</a> and observe the title.<br>
The other page are totally OK.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>NextJs 6.1.1</li>
<li>Node.JS 8.11.1</li>
<li>Nginx AWS Server</li>
</ul>
<h2 dir="auto">My Code</h2>
<p dir="auto">document.js :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="     `&lt;html lang={process.env.LANGUAGECODE}&gt;
      &lt;Head&gt;
      {/*Meta tag for every page*/}
      {/* &lt;meta charSet=&quot;utf-8&quot; /&gt; */}

      {/* Use minimum-scale=1 to enable GPU rasterization */}
      &lt;meta name=&quot;viewport&quot; content={'user-scalable=0, initial-scale=1, ' + 'minimum-scale=1, width=device-width, height=device-height'}/&gt;

      {/* PWA primary color */}
      &lt;meta name=&quot;theme-color&quot; content={pageContext.theme.palette.primary.main} /&gt;

      {/* Links*/}
        &lt;link rel=&quot;stylesheet&quot; href=&quot;/_next/static/style.css&quot; /&gt;
        &lt;link rel=&quot;shortcut icon&quot; href=&quot;/static/favicon.ico&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css&quot; /&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; /&gt;
      {/* Comfortaa Logo Font */}  
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css?family=Comfortaa&quot; /&gt;
      {/* GOOGLE SEARCH CONSOLE */}
        &lt;meta name=&quot;google-site-verification&quot; content={process.env.GOOGLESEARCHCONSOLE} /&gt;

    &lt;/Head&gt;
    &lt;body&gt;
      &lt;Main /&gt;
      &lt;NextScript /&gt;
    &lt;/body&gt;
  &lt;/html&gt;`"><pre class="notranslate"><code class="notranslate">     `&lt;html lang={process.env.LANGUAGECODE}&gt;
      &lt;Head&gt;
      {/*Meta tag for every page*/}
      {/* &lt;meta charSet="utf-8" /&gt; */}

      {/* Use minimum-scale=1 to enable GPU rasterization */}
      &lt;meta name="viewport" content={'user-scalable=0, initial-scale=1, ' + 'minimum-scale=1, width=device-width, height=device-height'}/&gt;

      {/* PWA primary color */}
      &lt;meta name="theme-color" content={pageContext.theme.palette.primary.main} /&gt;

      {/* Links*/}
        &lt;link rel="stylesheet" href="/_next/static/style.css" /&gt;
        &lt;link rel="shortcut icon" href="/static/favicon.ico" /&gt;
        &lt;link rel="stylesheet" href="https://cdn.rawgit.com/h-ibaldo/Raleway_Fixed_Numerals/master/css/rawline.css" /&gt;
        &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /&gt;
      {/* Comfortaa Logo Font */}  
        &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Comfortaa" /&gt;
      {/* GOOGLE SEARCH CONSOLE */}
        &lt;meta name="google-site-verification" content={process.env.GOOGLESEARCHCONSOLE} /&gt;

    &lt;/Head&gt;
    &lt;body&gt;
      &lt;Main /&gt;
      &lt;NextScript /&gt;
    &lt;/body&gt;
  &lt;/html&gt;`
</code></pre></div>
<p dir="auto">landing.js (actually it's the home page)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import LandingMeta from 'landing/landingMeta';
  return (
    &lt;I18nextProvider i18n={Local(props.translations,props.language)}&gt;
      &lt;div&gt;
        &lt;LandingMeta/&gt;
        &lt;CookiesStateConnector/&gt;
        &lt;GlobalSnackbar/&gt;
        &lt;NavBar fixed/&gt;
        &lt;Opener/&gt;
        &lt;HowTo /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/I18nextProvider&gt;
  );"><pre class="notranslate"><code class="notranslate">import LandingMeta from 'landing/landingMeta';
  return (
    &lt;I18nextProvider i18n={Local(props.translations,props.language)}&gt;
      &lt;div&gt;
        &lt;LandingMeta/&gt;
        &lt;CookiesStateConnector/&gt;
        &lt;GlobalSnackbar/&gt;
        &lt;NavBar fixed/&gt;
        &lt;Opener/&gt;
        &lt;HowTo /&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    &lt;/I18nextProvider&gt;
  );
</code></pre></div>
<p dir="auto">And the famous LandingMeta.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    return (
    &lt;Head&gt;
        {/*Meta tag That  can change on some pages (use a key to avoid duplication)*/}
        &lt;title key=&quot;title&quot; &gt;Vetolib : Make An online appointment&lt;/title&gt;
          {/*A brief description of the page.*/}
          &lt;meta key=&quot;description&quot; name=&quot;description&quot; content={`${t('meta:metaOgTitle')} ${t('meta:metaOgDescription')}`}  /&gt;
          {/*A series of keywords you deem relevant to the page in question.*/}
          &lt;meta key=&quot;keywords&quot; name=&quot;keywords&quot; content={t('meta:metaKeyWords')} /&gt;
          {/*An indication to search engine crawlers (robots or &quot;bots&quot;) as to what they should do with the page.*/}
          &lt;meta key=&quot;robots&quot; name=&quot;robots&quot; content=&quot;index,follow&quot; /&gt;
&lt;/Head&gt;
);"><pre class="notranslate"><code class="notranslate">    return (
    &lt;Head&gt;
        {/*Meta tag That  can change on some pages (use a key to avoid duplication)*/}
        &lt;title key="title" &gt;Vetolib : Make An online appointment&lt;/title&gt;
          {/*A brief description of the page.*/}
          &lt;meta key="description" name="description" content={`${t('meta:metaOgTitle')} ${t('meta:metaOgDescription')}`}  /&gt;
          {/*A series of keywords you deem relevant to the page in question.*/}
          &lt;meta key="keywords" name="keywords" content={t('meta:metaKeyWords')} /&gt;
          {/*An indication to search engine crawlers (robots or "bots") as to what they should do with the page.*/}
          &lt;meta key="robots" name="robots" content="index,follow" /&gt;
&lt;/Head&gt;
);
</code></pre></div>
<p dir="auto">Thank you so much for your help</p>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">I have 3 different websites served by next.js and some random pages are being indexed on google with title as ": An unexpected error has occurred - My website name" but everything looks fine with the title tag when opening page's source</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Have no idea, since the error only appears when indexed by google, but you can see it wrong with these website:<br>
site:brasilmaplestory.com<br>
just google it ^</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">No error message at page's title</p>
<h2 dir="auto">Screenshots</h2>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>Version of Next.js: 6.1.1</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">How do I use the title tag:</p>
<h3 dir="auto">page.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;PageLayout title={`CashShop | ${websiteName`}&gt;
    .... Page content
  &lt;/PageLayout&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-v">PageLayout</span> <span class="pl-s1">title</span><span class="pl-c1">=</span><span class="pl-kos">{</span>`CashShop | ${<span class="pl-s1">websiteName</span>`<span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
    ...<span class="pl-kos">.</span> <span class="pl-c1">Page</span> <span class="pl-s1">content</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span>PageLayout&gt;</pre></div>
<h3 dir="auto">PageLayout.jsx</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const PageLayout = ({
  title,
 ...
}) =&gt; (
&lt;div&gt;
    &lt;Head&gt;
      &lt;meta charSet=&quot;UTF-8&quot; /&gt;
      &lt;title&gt;{title}&lt;/title&gt;
........
    &lt;/Head&gt;
  &lt;/div&gt;
);"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-v">PageLayout</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span>
  title<span class="pl-kos">,</span>
 ...
<span class="pl-kos">}</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">charSet</span><span class="pl-c1">=</span><span class="pl-s">"UTF-8"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">title</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">title</span><span class="pl-c1">&gt;</span>
........
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Head</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>