{"componentChunkName":"component---src-templates-post-template-js","path":"/note-use-twitter-card-en","result":{"data":{"markdownRemark":{"id":"d8698561-190c-5cc9-8c2c-0800167fe77b","html":"<blockquote>\n<p>This page has been machine-translated from the <a href=\"/note-use-twitter-card\">original page</a>.</p>\n</blockquote>\n<p>This time, I summarize how to change Gatsby settings so that when a blog URL is posted to Twitter, a large image link like Hatena Blog is displayed.</p>\n<p>When I posted an article from this blog to Twitter, the link used to be embedded in a way that displayed only a summary, as shown below.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 595px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/b408d7dda653301b4d0c15770bc6fa3f/3dd3e/image-20230122193818777.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 43.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsTAAALEwEAmpwYAAABZklEQVQoz42Su27CMBiFbedOQAgCiSn3W8KIOjB06bswsKJC+iBVH44HYIAFCRbElFPbCYl6kYqjo1jJ7++/HJPXl2dUq1U8tdvgvAXbtmGaFhjTQCkDIeQhUUqVyOfHBrMoRH8wQLfbheOU0Ov3MRyNMB5P4Lruw1Al0yaIoghxHGO9XiN+j7HdbtHpdATcEdWaeQWMMSVZ+X1ffKN3KMHbZoOfSyaR/zRNyw/93zZLgavVCpfLBfv9HsfjEbvdDovFQrU+GA7BWy0xjh7aYs5BEKBSqag35xy+7yvJbvIKZaty3W43JEmC0+mE+XyOWq0Oz2ugLAB1z0Oj2RQgLoxz1GzdclmBnFIJuq4XwOVyiUQ85/MZ1+sVh8MB0+lUBfxqtZjVn04roMwWhiFGwtmJAEWzGSzLzoGWZeVgZY6Yq9zrupFVRgtTqAjUsoBv2aRzmRmGYWT3MnVaxsu9hEmldzCN/wLQyvyBIgIe9AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/b408d7dda653301b4d0c15770bc6fa3f/8ac56/image-20230122193818777.webp 240w,\n/static/b408d7dda653301b4d0c15770bc6fa3f/d3be9/image-20230122193818777.webp 480w,\n/static/b408d7dda653301b4d0c15770bc6fa3f/536c8/image-20230122193818777.webp 595w\"\n              sizes=\"(max-width: 595px) 100vw, 595px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/b408d7dda653301b4d0c15770bc6fa3f/8ff5a/image-20230122193818777.png 240w,\n/static/b408d7dda653301b4d0c15770bc6fa3f/e85cb/image-20230122193818777.png 480w,\n/static/b408d7dda653301b4d0c15770bc6fa3f/3dd3e/image-20230122193818777.png 595w\"\n            sizes=\"(max-width: 595px) 100vw, 595px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/b408d7dda653301b4d0c15770bc6fa3f/3dd3e/image-20230122193818777.png\"\n            alt=\"image-20230122193818777\"\n            title=\"image-20230122193818777\"\n            loading=\"lazy\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>According to <a href=\"https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Getting Started with Cards | Docs</a>, this kind of display appears when the value of the <code class=\"language-text\">twitter:card</code> meta tag is <code class=\"language-text\">summary</code>.</p>\n<p>So I decided to change the value of <code class=\"language-text\">twitter:card</code> to <code class=\"language-text\">summary_large_image</code> in my Gatsby settings.</p>\n<p>In practice, I changed the <code class=\"language-text\">twitter:card</code> setting embedded in the header from <code class=\"language-text\">src\\components\\Layout\\Layout.js</code> as shown below.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 484px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/57dbf060214cf648098413f7711bc22a/ff42b/image-20230122194121540.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 58.333333333333336%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB60lEQVQoz42T55KcMBCE9zW8BKGAQIBETnvgtddV51B+/9dpj1hfcPaPLglV6ZueUXPinEMLjaYYkMkcIs2gsgJcpuBK06ogdIaYJYiiCHEc/1UnIQQSxpAah3xeUK0bTN0jLWtktkFe0XkzgAmF+A/AKHoFlAT0Gy4IOl2g2hllv8AVBkJIBHGC4HxGeH6DMDi/iL6jMPjuOnp2f5JS0oaBJwyq6JA2G5r9EdO0wlY12raHVgpp1UCT67SwyEqSbWkUBuyXlmmGT8DUTtDtBd3bRzTjgtkV2GqDqTIYuw5u3lFTMbO8R/3uC6SbabYMQXh36HVSWX4ABWfQ9Yqs3zF++Iph2XBpLPamPGSHFd3tM9y0o1+vcJcb7LTBFgWcluCHMd+yf8EDmCClih7YXR+x2hwP5HAoc4xlBtd06DeCtAOWhx3O1agIVJmcZKjD5OmVX1pW5QDdXO7AujyAszXHOtYWwzChnK8w20fSJ+TLDYYcy8KBUetHy/dHiQ/LZr8eyikuWgoYJZCTrG+JMqmrFjIvwXIHbnskRQPGfZzCn16ZDqSpUY4bMtcjYhxBEBzD9jqHdIEU+vjQeUSxiXxs/Ophz3mM7sFOKW9S0SwTcVz8199wF/ttuE9KcmTpHeSrxa+q/R/4R30Dj7haJANuMiIAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/57dbf060214cf648098413f7711bc22a/8ac56/image-20230122194121540.webp 240w,\n/static/57dbf060214cf648098413f7711bc22a/d3be9/image-20230122194121540.webp 480w,\n/static/57dbf060214cf648098413f7711bc22a/bdae1/image-20230122194121540.webp 484w\"\n              sizes=\"(max-width: 484px) 100vw, 484px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/57dbf060214cf648098413f7711bc22a/8ff5a/image-20230122194121540.png 240w,\n/static/57dbf060214cf648098413f7711bc22a/e85cb/image-20230122194121540.png 480w,\n/static/57dbf060214cf648098413f7711bc22a/ff42b/image-20230122194121540.png 484w\"\n            sizes=\"(max-width: 484px) 100vw, 484px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/57dbf060214cf648098413f7711bc22a/ff42b/image-20230122194121540.png\"\n            alt=\"image-20230122194121540\"\n            title=\"image-20230122194121540\"\n            loading=\"lazy\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>\n<p>Now a large card is displayed when the link is posted to Twitter.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 529px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/d1d973e22f63a2282214e67798223216/67d6a/image-20230122203231648.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 80%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACVUlEQVQ4y61Ty2paURQ9Xl8RjR2mPpIYYmo6TT9ASL8jxCel+QLNyHyCo1IfI6ME8hgIVmdOa3FQHUiRgiAamtiMtL519ezjo9cGCqE5sO7Za+9z1l3n7HvZscuFZDKJSCSCWCwmEKU5Hl+J5blYPLZcS4hEo0gkEnA6nWDZXA7PNUJnZ2CXl5eCdDod9Pt9DIdDDAYDAXn8KDdf2+Nzu90WGoFAAOzq+lqQbq+H8WT8ZFej0Qi/ul0RB4NBsOubG0HI3Xg8RqVSQaFQQLlcRqPRQLFYFDHlqNZqtVAqlZBOpwUXZhaCp6dyh11MJhM8PDzg9vYWtVoN2WwW5+fnCIfDiPKLz2QyyOfzuLu7E6K0bjqdrgouHA6HI+FQPmhDvV5HtVpFs9kUQvf394+OTNe1FExdJPGlmkP9x3eRpDcS/jWoTqfhgTDRkwt+jH/Ap2Icuc8pTLnBwXDWSXmH6X7/7jSB3PX6vdUuX1ylUPv5FfXWt///DkMhsMO3h/C/8+Po+Ag+nx8+vx9enw8ej2cGrxcutxtujpU8B3HKu/jf9v7kBAcHb8CUSiWMxhfY2HiJdaMReoMBjCmgkBSgGmMMer0eGo1GxArFLL+o6XS6ZU2ABGw2GxyOfWxv22C1WmEymWDd3IR97xWPzXDsv4bdvofNrS1YLBbYdnawu2sXJmgNcbPZApVKBUaPmSuuzt8uXEiScKJSqfksLWtK2jCv/3E52yPxnERcrVZDq9WKoorHxGmmTYsjLiDnsyMqHtXZ2poOhnUj1Pwe9HrDEtJc8Kn4De1/bdr01mSaAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/d1d973e22f63a2282214e67798223216/8ac56/image-20230122203231648.webp 240w,\n/static/d1d973e22f63a2282214e67798223216/d3be9/image-20230122203231648.webp 480w,\n/static/d1d973e22f63a2282214e67798223216/820bc/image-20230122203231648.webp 529w\"\n              sizes=\"(max-width: 529px) 100vw, 529px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/d1d973e22f63a2282214e67798223216/8ff5a/image-20230122203231648.png 240w,\n/static/d1d973e22f63a2282214e67798223216/e85cb/image-20230122203231648.png 480w,\n/static/d1d973e22f63a2282214e67798223216/67d6a/image-20230122203231648.png 529w\"\n            sizes=\"(max-width: 529px) 100vw, 529px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/d1d973e22f63a2282214e67798223216/67d6a/image-20230122203231648.png\"\n            alt=\"image-20230122203231648\"\n            title=\"image-20230122203231648\"\n            loading=\"lazy\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n  </a>\n    </span></p>","fields":{"slug":"/note-use-twitter-card-en","tagSlugs":["/tag/notes/","/tag/gatsby/","/tag/memo/","/tag/english/"]},"frontmatter":{"date":"2023-01-22","description":"How to display a large card when a blog URL is posted to Twitter","tags":["Notes","Gatsby","Memo","English"],"title":"Notes on Configuring Gatsby So Large Cards Are Displayed When Blog Links Are Posted to Twitter","socialImage":{"publicURL":"/static/9a76aa15e767aef0d727414632463685/note-use-twitter-card.png"}}}},"pageContext":{"slug":"/note-use-twitter-card-en"}},"staticQueryHashes":["251939775","401334301","825871152"]}