Website: add support for description meta tags in markdown articles (#7887)

* add support for meta description tags on markdown articles * Add description meta tag section to article formatting guide
2022-09-21 17:14:58 -05:00
parent c299e9581c
commit a5d2d7e390
3 changed files with 15 additions and 1 deletions
@@ -36,6 +36,7 @@ These tags help pass information to the website about the article to display and
 <meta name="category" value="guides">
 <meta name="publishedOn" value="2021-11-21">
 <meta name="articleImageUrl" value="../website/assets/images/articles/deploying-fleet-on-render-cover-1600x900@2x.jpg">
+<meta name="description" value="Learn how to configure and deploy Fleet on Render in 30 minutes">
 ```

 ### `articleTitle`
@@ -66,6 +67,13 @@ The date that the article was published. Please follow the correct date format,
 ### `articleImageUrl`
 The relative url path for the article cover image. Article images are stored in `../website/assets/images/articles/` See [How to export images for the website](https://fleetdm.com/handbook/brand#how-to-export-images-for-the-website).

+### `description`
+The description meta-tag appears on social media posts when shared (e.g., on Twitter) and on browser results pages. It is also important for SEO purposes.
+
+The description should be between 50 - 150 characters and provide a summary of your article to give context or information to readers. Do not repeat the title for the description.
+
+> If you do not include a description, fleetdm.com will create a description using the articleTitle and the authorFullName meta tags
+
 ## Customizable CTA
 Use the following code snippet to include an inline CTA (call to action) in your article:

@@ -53,7 +53,9 @@ module.exports = {
      pageTitleForMeta = thisPage.meta.articleTitle + ' | Fleet for osquery';
    }//ﬁ
    let pageDescriptionForMeta;
-    if(thisPage.meta.articleTitle && thisPage.meta.authorFullName) {
+    if(thisPage.meta.description){
+      pageDescriptionForMeta = thisPage.meta.description;
+    } else if(thisPage.meta.articleTitle && thisPage.meta.authorFullName) {
      pageDescriptionForMeta = _.trimRight(thisPage.meta.articleTitle, '.') + ' by ' + thisPage.meta.authorFullName;
    }//ﬁ

@@ -460,6 +460,10 @@ module.exports = {
                    throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag (<meta name="articleImageUrl" value="${embeddedMetadata.articleImageUrl}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, change the value of the meta tag to be a URL or repo relative link to an image in the 'website/assets/images' folder`);
                  }
                }
+                if(embeddedMetadata.description && embeddedMetadata.description.length > 150) {
+                  // Throwing an error if the article's description meta tag value is over 150 characters long
+                  throw new Error(`Failed compiling markdown content: An article page has an invalid description meta tag (<meta name="description" value="${embeddedMetadata.description}">) at "${path.join(topLvlRepoPath, pageSourcePath)}".  To resolve, make sure the value of the meta description is less than 150 characters long.`);
+                }
                // For article pages, we'll attach the category to the `rootRelativeUrlPath`.
                // If the article is categorized as 'product' we'll replace the category with 'use-cases', or if it is categorized as 'success story' we'll replace it with 'device-management'
                rootRelativeUrlPath = (