Skip to content

Latest commit

 

History

History
47 lines (29 loc) · 1.75 KB

SocialMediaCardsHTML.md

File metadata and controls

47 lines (29 loc) · 1.75 KB

Background

This will help you create a simple card for Twitter - this will also work for WhatsApp and other social media platforms.

image

Code

Place the following code inside the <head> element.

<link rel="canonical" href="{link}" />
<meta property="og:url" content="{link}" />

<meta property="og:site_name" content="{name}" />
<meta property="og:title" content="{name}" />

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="{@twitter_handle}" />
<meta name="twitter:creator" content="{@twitter_handle}" />

<meta property="description" content="{description}" />
<meta property="og:description" content="{description}" />

<meta property="og:image" content="{icon}"/>
<meta property="og:image:secure_url" content="{icon}"/>

Dynamic attributes

Replace {name} with the page name

image

Replace {description} with the short description you want to include for this page

image

Replace {link} with the link to the page/site

image

Replace {icon} with a link to the icon you would like to display (I recommend 256x256)

image

You can also replace {@twitter_handle} with the Twitter handle to the site creator and/or author of said page.

If you don't want this, just remove those two lines.