tailwindlabs
diff --git a/‎src/img/twitter-card.jpg
21.6 KB b/‎src/img/twitter-card.jpg
21.6 KB
diff --git a/‎src/pages/index.js
Lines changed: 12 additions & 0 deletions b/‎src/pages/index.js
Lines changed: 12 additions & 0 deletions
@@ -2,13 +2,25 @@ import tinytime from 'tinytime'
 import Link from 'next/link'
 import Head from 'next/head'
 import getAllPostPreviews from '@/getAllPostPreviews'
+import twitterCard from '@/img/twitter-card.jpg'
 
 const posts = getAllPostPreviews()
 
 export default function Home() {
   return (
     <div className="divide-y divide-gray-200">
       <Head>
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@tailwindcss" />
+        <meta name="twitter:creator" content="@tailwindcss" />
+        <meta name="twitter:title" content="Blog – Tailwind CSS" />
+        <meta name="twitter:description" content="News content from the Tailwind CSS team." />
+        <meta name="twitter:image" content={`https://blog.tailwindcss.com${twitterCard}`} />
+        <meta property="og:url" content="https://blog.tailwindcss.com" />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content="Blog – Tailwind CSS" />
+        <meta property="og:description" content="News content from the Tailwind CSS team." />
+        <meta property="og:image" content={`https://blog.tailwindcss.com${twitterCard}`} />
         <title>Blog – Tailwind CSS</title>
       </Head>
       <div className="pt-6 pb-8 space-y-2 md:space-y-5">