From a5d2d7e3908d6a0c1e11b6164c871ad6c9f3b61c Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 21 Sep 2022 17:14:58 -0500 Subject: [PATCH] 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 --- handbook/digital-experience/article-formatting-guide.md | 8 ++++++++ website/api/controllers/articles/view-basic-article.js | 4 +++- website/scripts/build-static-content.js | 4 ++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/handbook/digital-experience/article-formatting-guide.md b/handbook/digital-experience/article-formatting-guide.md index 2b6282fa5e..b239544950 100644 --- a/handbook/digital-experience/article-formatting-guide.md +++ b/handbook/digital-experience/article-formatting-guide.md @@ -36,6 +36,7 @@ These tags help pass information to the website about the article to display and + ``` ### `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: diff --git a/website/api/controllers/articles/view-basic-article.js b/website/api/controllers/articles/view-basic-article.js index 2fdc749792..bd2b67f6ba 100644 --- a/website/api/controllers/articles/view-basic-article.js +++ b/website/api/controllers/articles/view-basic-article.js @@ -53,7 +53,9 @@ module.exports = { pageTitleForMeta = thisPage.meta.articleTitle + ' | Fleet for osquery'; }//fi 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; }//fi diff --git a/website/scripts/build-static-content.js b/website/scripts/build-static-content.js index ad2e102c14..503b15b955 100644 --- a/website/scripts/build-static-content.js +++ b/website/scripts/build-static-content.js @@ -460,6 +460,10 @@ module.exports = { throw new Error(`Failed compiling markdown content: An article page has an invalid a articleImageUrl meta tag () 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 () 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 = (