<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Display all meta tags in <code class="notranslate">&lt;Head&gt;</code> by using <code class="notranslate">next/head</code></p>


<h2 dir="auto">Current Behavior</h2>
<p dir="auto">I need to provide 6 meta tags with the same property <code class="notranslate">fb:pages</code> and only the last one is displayed in the source code. I guess this is to avoid duplicated meta tags with the same <code class="notranslate">property</code> or <code class="notranslate">name</code>.</p>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>Provide multiple meta tags with the same property or name in <code class="notranslate">&lt;Head&gt;</code></li>
<li>Check the source code</li>
</ol>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.2.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS Sierra 10.12.6</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Feature request</h1>
<p dir="auto">I want a more intuitive <code class="notranslate">Link</code> API which respects expectations we have around native <code class="notranslate">a</code> tags.</p>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">The current link API looks like the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Link href=&quot;/about&quot;&gt;
  &lt;a&gt;here&lt;/a&gt;
&lt;/Link&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>here<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">This is problematic for a few reasons:</p>
<ol dir="auto">
<li>It breaks intuition around a11y. When I see an <code class="notranslate">a</code> tag without an <code class="notranslate">href</code>, alarm bells go off, because that is a UX anti-pattern. In fact, this API makes it impossible to appease the <code class="notranslate">anchor-is-valid</code> eslint-plugin-jsx-a11y rule (see <a href="https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/402">https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/402</a>).</li>
<li>It requires a call to <code class="notranslate">cloneElement</code> which should be avoided as its behavior is confusing. (How would I know my <code class="notranslate">a</code> tag will be given an <code class="notranslate">href</code>? Nothing about this API suggests that.)</li>
</ol>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">I would like a solution which doesn't require you to type an <code class="notranslate">a</code> tag without an <code class="notranslate">href</code> and also doesn't require you to duplicate the <code class="notranslate">href</code> information.</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">There are a few good alternatives:</p>
<ol dir="auto">
<li>Default to <code class="notranslate">a</code> tag if no children are given:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Link href=&quot;/about&quot; /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">This is the approach <a href="https://reacttraining.com/react-router/web/api/Link" rel="nofollow">react-router</a> uses and it works quite well.</p>
<hr>
<ol start="2" dir="auto">
<li>Use a render prop:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Link href=&quot;/about&quot;&gt;
  {href =&gt; &lt;a href={href}&gt;here&lt;/a&gt;}
&lt;/Link&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">{</span><span class="pl-s1">href</span> <span class="pl-c1">=&gt;</span> <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">href</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>here<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">This method appeases the <code class="notranslate">anchor-is-valid</code> rule and doesn't require the user to duplicate href information since the build href is passed down to the component they are rendering.</p>
<hr>
<ol start="3" dir="auto">
<li>Component injection:</li>
</ol>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Link href=&quot;/about&quot; component={a} /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/about"</span> <span class="pl-c1">component</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">a</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<hr>
<p dir="auto">A combination of 1 and 2 would be powerful enough to cover all reasonable use cases.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto"><a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/vercel/next.js/commit/6431f5fce2593d8cadb81841eb0e717facbe4aa6/hovercard" href="https://github.com/vercel/next.js/commit/6431f5fce2593d8cadb81841eb0e717facbe4aa6"><tt>6431f5f</tt></a></p>