<a href="https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started">Start using your card - Twitter Developers</a>
<ul>
<li>How to combine with Open Graph tags is written at the end.
ts</li>
</ul>
<pre><code class="language-typescript">&lt;meta name=&quot;twitter:card&quot; content=&quot;summary&quot; /&gt;
&lt;meta name=&quot;twitter:creator&quot; content=&quot;@nishio&quot; /&gt;
&lt;meta property=&quot;og:url&quot; content=&quot;https://shinuwani.netlify.com/&quot; /&gt;
&lt;meta property=&quot;og:title&quot; content=&quot;You who will die in ___ years&quot; /&gt;
&lt;meta property=&quot;og:description&quot; content=&quot;I made this because I was watching the cartoon &quot;The Crocodile Who Dies in 100 Days&quot; and was wondering how long I would be dead.&quot; /&gt;
&lt;meta property=&quot;og:image&quot; content=&quot;https://shinuwani.netlify.com/shinuwani.jpg&quot; /&gt;
</code></pre>
<ul>
<li><a href="https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fshinuwani.netlify.com%2F">Share Debugger - Facebook for Developers</a>
</li>
<li><a href="https://cards-dev.twitter.com/validator">Card Validator | Twitter Developers</a>
</li>
<li>Twitter Preview
<ul>
<li><img src="https://gyazo.com/5b1094802c9149e4d37cf8cf46fc7552/thumb/1000" alt="image"></li>
</ul>
</li>
<li>Real
<ul>
<li><img src="https://gyazo.com/605989ee002c5ac2b889bbc79986f338/thumb/1000" alt="image"></li>
</ul>
</li>
<li>Facebook Preview
<ul>
<li><img src="https://gyazo.com/d4dd014e3710c224ce5c41dfaace9e1b/thumb/1000" alt="image"></li>
</ul>
</li>
<li>Real
<ul>
<li><img src="https://gyazo.com/a80db0cb4cc47f30c46d8a1c6ff4f85b/thumb/1000" alt="image"></li>
</ul>
</li>
</ul>
There was a suggestion to use <a href="/en/react-helmet">react-helmet</a>, but we decided it was better to modify the head directly since it is a single file for a single page.
<hr>
This page is auto-translated from <a href="https://scrapbox.io/nishio/Twitter%E3%82%AB%E3%83%BC%E3%83%89">/nishio/Twitterカード</a>. If you looks something interesting but the auto-translated English is not good enough to understand it, feel free to let me know at <a href="https://twitter.com/nishio_en">@nishio_en</a>. I&#39;m very happy to spread my thought to non-Japanese readers.

Twitter Cards