Merge pull request #2454 from sveltejs/gh-2448

Add Twitter metadata

site/src/routes/blog/[slug].svelte

@@ -11,6 +11,9 @@
 
 <svelte:head>
 	<title>{post.metadata.title}</title>
+
+	<meta name="twitter:title" content={post.metadata.title}>
+	<meta name="twitter:description" content={post.metadata.description}>
 </svelte:head>
 
 <article class='post linkify listify'>

site/src/routes/blog/index.svelte

@@ -10,8 +10,10 @@
 </script>
 
 <svelte:head>
-	<title>Svelte • The magical disappearing UI framework</title>
+	<title>Blog • Svelte</title>
 	<link rel="alternate" type="application/rss+xml" title="Svelte blog" href="blog/rss.xml">
+
+	<meta name='twitter:title' content='Svelte blog'>
 </svelte:head>
 
 <div class='posts stretch'>

site/src/routes/docs/index.svelte

@@ -360,6 +360,9 @@
 
 <svelte:head>
 	<title>API Docs • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte API docs'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
 </svelte:head>
 
 <div bind:this={container} class='content linkify listify'>

site/src/routes/examples/index.svelte

@@ -73,6 +73,13 @@
 	}
 </style>
 
+<svelte:head>
+	<title>Examples • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte examples'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
+</svelte:head>
+
 <div class="content">
 	<h1>Examples</h1>
 

site/src/routes/index.svelte

@@ -137,6 +137,9 @@
 
 <svelte:head>
 	<title>Svelte • Cybernetically enhanced web apps</title>
+
+	<meta name='twitter:title' content='Svelte'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
 </svelte:head>
 
 <svelte:window bind:scrollY={sy}/>

site/src/routes/repl/embed.svelte

@@ -30,6 +30,13 @@
 	}
 </style>
 
+<svelte:head>
+	<title>REPL • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte REPL'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
+</svelte:head>
+
 <div class="repl-outer">
 	{#if process.browser}
 		<ReplWidget {version} {gist} {example} embedded={true}/>

site/src/routes/repl/index.svelte

@@ -181,7 +181,10 @@
 </style>
 
 <svelte:head>
-	<title>Svelte REPL</title>
+	<title>REPL • Svelte</title>
+
+	<meta name='twitter:title' content='Svelte REPL'>
+	<meta name='twitter:description' content='Cybernetically enhanced web apps'>
 </svelte:head>
 
 <svelte:window bind:innerWidth={width}/>

site/src/routes/tutorial/[slug]/index.svelte

@@ -252,6 +252,9 @@
 
 <svelte:head>
 	<title>{selected.section.title} / {selected.chapter.title} • Svelte Tutorial</title>
+
+	<meta name='twitter:title' content='Svelte tutorial'>
+	<meta name='twitter:description' content="{selected.section.title} / {selected.chapter.title}">
 </svelte:head>
 
 <svelte:window bind:innerWidth={width}/>

site/src/template.html

@@ -12,6 +12,11 @@
 	<link rel='manifest' href='manifest.json'>
 	<link rel='icon' type='image/png' href='favicon.png'>
 
+	<meta name='twitter:card' content='summary_large_image'>
+	<meta name='twitter:site' content='@sveltejs'>
+	<meta name='twitter:creator' content='@sveltejs'>
+	<meta name='twitter:image' content='https://svelte.dev/images/twitter-card.png'>
+
 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
 	     lazily loaded when it precaches secondary pages -->