{"id":446,"date":"2022-06-13T17:07:39","date_gmt":"2022-06-13T23:07:39","guid":{"rendered":"https:\/\/justinstolpe.com\/blog\/?p=446"},"modified":"2022-06-13T17:32:11","modified_gmt":"2022-06-13T23:32:11","slug":"html-meta-tags-you-need-for-twitter-card-generation","status":"publish","type":"post","link":"https:\/\/justinstolpe.com\/blog\/2022\/06\/13\/html-meta-tags-you-need-for-twitter-card-generation\/","title":{"rendered":"HTML Meta Tags You Need for Twitter Card Generation"},"content":{"rendered":"<p><center><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/68cEWmqTWgs\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/center><br \/>\nIn this post we look at the meta tags required for Twitter to generate a nice card for your website when you copy and paste a link to your website in a tweet. The image below is an example of a Twitter card. If you have the correct meta tags on your site and you paste a URL to your website in a tweet, Twitter will generate a card like the one below when your tweet is posted.<\/p>\n<figure id=\"attachment_463\" aria-describedby=\"caption-attachment-463\" style=\"width: 593px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2022\/06\/tcard.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-463\" src=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2022\/06\/tcard.png\" alt=\"Twitter Card Example\" width=\"593\" height=\"202\" srcset=\"https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2022\/06\/tcard.png 593w, https:\/\/justinstolpe.com\/blog\/wp-content\/uploads\/2022\/06\/tcard-300x102.png 300w\" sizes=\"auto, (max-width: 593px) 100vw, 593px\" \/><\/a><figcaption id=\"caption-attachment-463\" class=\"wp-caption-text\">Twitter Card Example<\/figcaption><\/figure>\n<h3><strong>Tag 1:\u00a0 Card Type<br \/>\n<\/strong><\/h3>\n<p>This is the meta tag where you define the card content such as an image or a video.<\/p>\n<pre>&lt;!-- required | default summary card --&gt;\r\n&lt;meta name=\"twitter:card\" content=\"summary\" \/&gt;\r\n\r\n&lt;!-- required | large summary card --&gt;\r\n&lt;meta name=\"twitter:card\" content=\"summary_large_image\" \/&gt;\r\n\r\n&lt;!-- required | video card --&gt;\r\n&lt;meta name=\"twitter:card\" content=\"player\" \/&gt;\r\n<\/pre>\n<h3><strong>Tag 2: User for the Card<\/strong><\/h3>\n<p>Tag the username for this card.<\/p>\n<pre>&lt;!-- required | The Twitter @username the card should be attributed to. --&gt;\r\n&lt;meta name=\"twitter:site\" content=\"@{twitter-username}\" \/&gt;\r\n<\/pre>\n<h3><strong>Tag 3: Title for the Card<\/strong><\/h3>\n<p>This is the title for the card.<\/p>\n<pre>&lt;!-- required | The title of your content as it should appear in the card. --&gt;\r\n&lt;meta name=\"twitter:title\" content=\"{card-title}\" \/&gt;\r\n<\/pre>\n<h3><strong>Tag 4: Video Meta Tag Settings Required for Videos<\/strong><\/h3>\n<p>Here we need the video iframe url, the width, and the height for the player.<\/p>\n<pre>&lt;!-- required | HTTPS URL to iFrame player. This must be a HTTPS URL which does not generate active mixed content warnings in a web browser. The audio or video player must not require plugins such as Adobe Flash. --&gt;\r\n&lt;meta name=\"twitter:player\" content=\"{video-iframe-url}\" \/&gt;\r\n\r\n&lt;!-- required | Width of iFrame specified in twitter:player in pixels. --&gt;\r\n&lt;meta name=\"twitter:player:width\" content=\"420\" \/&gt;\r\n\r\n&lt;!-- required | Height of iFrame specified in twitter:player in pixels. --&gt;\r\n&lt;meta name=\"twitter:player:height\" content=\"230\" \/&gt;<\/pre>\n<h3><strong>Tag 5: Description<\/strong><\/h3>\n<p>Add a description for the card.<\/p>\n<pre>&lt;!-- not required | A description that concisely summarizes the content as appropriate for presentation within a Tweet. --&gt;\r\n&lt;meta name=\"twitter:description\" content=\"{description}\" \/&gt;\r\n<\/pre>\n<h3><strong>Tag 6: Image<\/strong><\/h3>\n<p>This is the url to the thumbnail image for the card.<\/p>\n<pre>&lt;!-- not required | A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 1:1 with minimum dimensions of 144x144 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported. --&gt;\r\n&lt;meta name=\"twitter:image\" content=\"{url-to-image}\" \/&gt;\r\n<\/pre>\n<h3><strong>Tag 7: Image Alt Tag<\/strong><\/h3>\n<p>This is the alt tag image text for the card.<\/p>\n<pre>&lt;!-- not required | A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. --&gt;\r\n&lt;meta name=\"twitter:image:alt\" content=\"{image-alt-tag}\" \/&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>In this post we look at the meta tags required for Twitter to generate a nice card for your website when you copy and paste a link to your website in a tweet. The image below is an example of a Twitter card. If you have the correct meta tags on your site and you &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/justinstolpe.com\/blog\/2022\/06\/13\/html-meta-tags-you-need-for-twitter-card-generation\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;HTML Meta Tags You Need for Twitter Card Generation&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":466,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,10],"tags":[],"class_list":["post-446","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding","category-html"],"_links":{"self":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/comments?post=446"}],"version-history":[{"count":16,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/446\/revisions"}],"predecessor-version":[{"id":468,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/posts\/446\/revisions\/468"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media\/466"}],"wp:attachment":[{"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/media?parent=446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/categories?post=446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/justinstolpe.com\/blog\/wp-json\/wp\/v2\/tags?post=446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}