DEV Community

loading...
Cover image for How to make your website URL look professional when sharing on Twitter

How to make your website URL look professional when sharing on Twitter

Chris ☕️
Front end Web developer 💻 I love to solve problems, think creatively, write code, and learn new things.
Originally published at chrmc7.hashnode.dev ・2 min read

In this article, I am going to be covering something called Twitter Cards. This is a very simple way to improve engagement when sharing links to your website on Twitter.

Have you ever seen something like this when scrolling through Twitter?

Twitter Card Image

This is an example of a Summary Card with a Large Image. If you do not add a Twitter Card to your webpage, it will just appear as a basic clickable link when posting on Twitter.

The official documentation for Twitter Cards exists at https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards. I recommend checking it out.

For websites, we are likely interested in two different kinds of Twitter Cards.

  • Summary Card
  • Summary Card with Large Image

I am going to show you how to create a Summary Card with a Large Image. According to Twitter documentation, when a URL is posted on Twitter, their system will crawl the site and search for the Twitter Card data. In order for our Twitter Card to be detected by their system, we have to include some meta tags within the head section of our webpage.

Here are the meta tags that created the Twitter Card that I displayed above:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:description" content="Front-end web developer based in Colorado. Check out some of my projects!">
<meta name="twitter:title" content="Welcome to my web development portfolio">
<meta name="twitter:site" content="@chrmc7">
<meta name="twitter:image" content="https://mc-chris.me/images/twittercard.png">
<meta name="twitter:creator" content="@chrmc7">
Enter fullscreen mode Exit fullscreen mode

It's pretty straightforward, but let's break it down.

  1. twitter:card - Must be set to “summary_large_image”.

  2. twitter:description - This is where you summarize the content of your page.

  3. twitter: title - This is the title of your content.

  4. twitter:site - This is the Twitter @ username that the content should be attributed to.

  5. twitter: image - This is the image that is displayed within the Twitter Card. Minimum dimensions: 300x157 pixels. Maximum dimensions 4096x4096 pixels.

  6. twitter: creator - This is the Twitter @ username of the content creator.

After you have added the Twitter meta tags to your webpage, you can use the Twitter Card validator to make sure it's working correctly.

Congratulations, you should now be able to post your URL to Twitter and see the Twitter Card appear in the content. 🎉

Discussion (0)