From 903e28ee6afcaa1b4fc1dc1ec0d9ac2f9c920b22 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Fri, 24 Aug 2018 06:15:33 +0100
Subject: [PATCH] feat(meta): Add article meta (#18044)

---
 news/routes/Featured/Featured.js |  1 +
 news/routes/Show/Show.js         | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/news/routes/Featured/Featured.js b/news/routes/Featured/Featured.js
index f5eb275bbe..ac5dd9d506 100644
--- a/news/routes/Featured/Featured.js
+++ b/news/routes/Featured/Featured.js
@@ -152,6 +152,7 @@ class Featured extends Component {
       <div>
         <Helmet>
           <style>{styles}</style>
+          <title>Featured | freeCodeCamp News</title>
         </Helmet>
         <ul className='featured-list'>{this.renderFeatured(featuredList)}</ul>
       </div>
diff --git a/news/routes/Show/Show.js b/news/routes/Show/Show.js
index 2598e119f9..6412583b09 100644
--- a/news/routes/Show/Show.js
+++ b/news/routes/Show/Show.js
@@ -177,10 +177,26 @@ class ShowArticle extends Component {
       return <h2>Oh noes!! Something went wrong!</h2>;
     }
 
+    // RegEx finds the first paragraph and groups the content
+    const description = renderableContent.match(/<p>(.*?)<\/p>/)[1];
+    const slug = this.props.location.pathname;
     return (
       <article className='show-article'>
         <Helmet>
           <style>{styles}</style>
+          <title>{`${title} | freeCodeCamp News`}</title>
+          <link
+            href={`https://www.freecodecamp.org/news${slug}`}
+            rel='canonical'
+          />
+          <meta
+            content={`https://www.freecodecamp.org/news${slug}`}
+            property='og:url'
+          />
+          <meta content={title} property='og:title' />
+          <meta content={description} property='og:description' />
+          <meta content={description} name='description' />
+          <meta content={featureImage.src} property='og:image' />
         </Helmet>
         <Author article={currentArticle} />
         <h2>{title}</h2>