Add Twitter Card Meta Tags

Background

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. Simply add a few lines of markup to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers.

Prerequisite

You already have working Open Graph tags in your website.

See related Open Graph articles : https://www.moddiy.info/category/open-graph/

<meta property="og:type" content="website" />
<meta property="og:title" content="modDIY Home Page - PC Modding, Case Mods, Custom Cables" />
<meta property="og:description" content="Best selection of PC mod supplies offers custom pc cable, case mods, computer cooling systems, computer case mod DIY parts, wire management kits, custom pc mods" />
<meta property="og:image" content="https://www.moddiy.com/images/logo-1200x630.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="modDIY Home Page - PC Modding, Case Mods, Custom Cables" />
<meta property="og:url" content="https://www.moddiy.com" />
<meta property="og:site_name" content="modDIY.com" />

Implementation

Add below meta tags above the existing Open Graph tags

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@modDIYcom" />
<meta name="twitter:creator" content="@modDIYcom" /> 

Validate your Twitter Card tags at https://cards-dev.twitter.com/validator

Reference

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

Leave a Reply

Your email address will not be published. Required fields are marked *