add Jekyll SEO tag plugin #11821

marcochavezf · 2022-10-13T19:28:07Z

Details

Add this Jekyll plugin to generate meta-description tags for the site and for each article. Also updated the article template and instructions to add the meta tags for each article.

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/233606

Tests

Run the Expensify Help site locally (SO)
Open the site (http://localhost:4000/main in dev, https://help.expensify.com/main in production)
Open the Chrome Dev tools > Elements tab and verify meta tags are added correctly
Navigate to the Smart Scan article (http://localhost:4000/articles/request-money/SmartScan in dev, https://help.expensify.com/articles/request-money/SmartScan in production) and verify the meta tags for title and description are different from /main/

Verify that no errors appear in the JS console

PR Review Checklist

PR Author Checklist

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

QA Steps

Same steps from Test section

Verify that no errors appear in the JS console

Screenshots

Added only a screenshot for web platform since we only want to corroborate that the meta tags are added.

Web

marcochavezf · 2022-10-13T19:46:00Z

@maddylewis @joaniew I added this tagline and description for the site meta tags (I copied them from the Community site, let me know what you think):

title: Expensify Help
tagline: Find all the answers to all your Expensify questions, as well as support for user and admin questions from the Expensify Community
description: The Community is a great place for Expensify users and experts to help one another, access training and implementation advice, discuss best practice approaches and contribute their feature and functionality ideas.

And this is for the Smart Scan article:

title: Smart Scan
description: SmartScan is the time-saving tool that every Expensify user needs. Using SmartScan, you can quickly upload receipts and walk away to take care of more important things.

Santhosh-Sellavel · 2022-10-13T21:13:41Z

@marcochavezf How to run this

Run the Expensify Help site locally (SO)

The link is inaccessible to me

marcochavezf · 2022-10-13T21:41:14Z

Oh sorry @Santhosh-Sellavel, these are the steps:

In order to run the site locally you would need ruby and bundler installed in your machine, more info here.

Then just execute the following commands in your command-line:
cd docs
bundle install
bundle exec jekyll serve

Santhosh-Sellavel · 2022-10-14T15:52:00Z

Tests well!

main/

/articles/request-money/SmartScan

Santhosh-Sellavel · 2022-10-14T15:57:10Z

@marcochavezf I'm not sure C+ Review is needed for this. But I did it anyway.
Seems this is applicable only to the web so added screenshots here

PR Reviewer Checklist

The reviewer will copy/paste it into a new comment and complete it after the author checklist is completed

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Santhosh-Sellavel

Looks good, tests well!

docs/README.md

docs/TEMPLATE.md

grgia

Tests pass in dev for me!

Requested changes addressed

marcochavezf · 2022-10-14T17:41:08Z

Thanks for the reviews! Updated with the requested changes, ready to be reviewed again.

roryabraham

Okay, reviewing some of these meta tags on the /main page:

A few of these stand out as questionable:

The description was taken straight from Community and so needs to be updated.
og:site_name seems wrong. It should probably just be Expensify Help, or maybe New Expensify. Definitely not App
twitter:card seems wrong too. :sadcat:

docs/_config.yml

marcochavezf · 2022-10-18T21:20:44Z

The description was taken straight from Community and so needs to be updated.

I asked for help in the #help-site-redux channel here

og:site_name seems wrong. It should probably just be Expensify Help, or maybe New Expensify. Definitely not App

This one is weird, there's no documentation about this tag. Also I looked at the plugin code, and seems it's set by site_title here, but site_title is set by site["name"] here, and I'm not sure where site["name"] is set or how it's set to App.

twitter:card seems wrong too. :sadcat:

Oh this is the default tag produced by the plugin, what should we set here?

roryabraham · 2022-10-18T23:49:15Z

Oh this is the default tag produced by the plugin, what should we set here?

I think I was wrong and twitter:card was correct as-is

roryabraham

James provided updated copy for tagline and description here.

Also, I figured out how to fix the og:site_name. Move all the things you added:

title
tagline
description
url
author
logo

Out of defaults[0].values and to the root of docs/_config.yml, like so:

title: Expensify Help
description: The Community is a great place for Expensify users and experts to help one another, access training and implementation advice, discuss best practice approaches and contribute their feature and functionality ideas.
tagline: Find all the answers to all your Expensify questions, or get expert help through Concierge.
url: help.expensify.com
author: Expensify
logo: /assets/images/expensify-help.svg

defaults:
  - scope:
      path: "" # an empty string here means all files in the project
    values:
      layout: "default"

exclude: [README.md, TEMPLATE.md]

plugins:
  - jekyll-seo-tag

marcochavezf · 2022-10-19T21:18:16Z

Thanks @roryabraham! Updated the _config.yml file and the og:site_name looks good 👍🏽 Also updated the tagline and description with what James updated here.

changes addressed

roryabraham

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

roryabraham

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product was added in all src/languages/* files
- I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

roryabraham · 2022-10-19T21:24:09Z

Checklist changed, not going to block merging on that. Going to merge since @Santhosh-Sellavel and @grgia have previously approved and this tests well now.

melvin-bot · 2022-10-19T21:24:18Z

@roryabraham looks like this was merged without passing tests. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

roryabraham · 2022-10-19T21:24:46Z

Not an emergency, checklist changed yesterday

OSBotify · 2022-10-19T21:27:57Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2022-10-25T00:14:29Z

🚀 Deployed to staging by @roryabraham in version: 1.2.19-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2022-10-26T22:33:53Z

🚀 Deployed to production by @chiragsalian in version: 1.2.19-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

marcochavezf added 6 commits October 13, 2022 13:25

install jekyll-seo-tag

4a66ae4

add SEO tags to head

d561a2b

add default metadescription values for all the site

a7f995c

add specific meta descriptions to smart scan article and hub pages

68fbb86

update template with meta description variables

162486f

update instructions to add meta descriptions to articles

b5724e2

marcochavezf self-assigned this Oct 13, 2022

marcochavezf changed the title ~~[WIP] add Jekyll SEO tag plugin~~ add Jekyll SEO tag plugin Oct 13, 2022

marcochavezf marked this pull request as ready for review October 13, 2022 19:46

marcochavezf requested a review from a team as a code owner October 13, 2022 19:46

melvin-bot bot requested review from grgia and Santhosh-Sellavel and removed request for a team October 13, 2022 19:46

Santhosh-Sellavel previously approved these changes Oct 14, 2022

View reviewed changes

roryabraham previously requested changes Oct 14, 2022

View reviewed changes

docs/README.md Show resolved Hide resolved

docs/TEMPLATE.md Outdated Show resolved Hide resolved

docs/TEMPLATE.md Outdated Show resolved Hide resolved

docs/TEMPLATE.md Outdated Show resolved Hide resolved

grgia reviewed Oct 14, 2022

View reviewed changes

marcochavezf added 3 commits October 14, 2022 12:30

add title to README

5c9073d

remove optional meta description variables from template

66f4157

mark some variables as optional in README

4fd63a3

marcochavezf dismissed Santhosh-Sellavel’s stale review via 4fd63a3 October 14, 2022 17:38

marcochavezf requested a review from roryabraham October 14, 2022 17:39

roryabraham requested changes Oct 14, 2022

View reviewed changes

docs/_config.yml Outdated Show resolved Hide resolved

docs/_config.yml Outdated Show resolved Hide resolved

docs/_config.yml Outdated Show resolved Hide resolved

update _config.yml

c495529

roryabraham previously requested changes Oct 19, 2022

View reviewed changes

move SEO variables, and update tagline and description

6e45fef

marcochavezf requested review from roryabraham, Santhosh-Sellavel and grgia October 19, 2022 21:18

roryabraham approved these changes Oct 19, 2022

View reviewed changes

roryabraham merged commit b1e0bd6 into main Oct 19, 2022

roryabraham deleted the marco-addJekyllSEOTagPlugin branch October 19, 2022 21:24

melvin-bot bot added the Emergency label Oct 19, 2022

roryabraham removed the Emergency label Oct 19, 2022

OSBotify mentioned this pull request Oct 24, 2022

Deploy Checklist: New Expensify 2022-10-24 #12108

Closed

45 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add Jekyll SEO tag plugin #11821

add Jekyll SEO tag plugin #11821

marcochavezf commented Oct 13, 2022 •

edited

Loading

marcochavezf commented Oct 13, 2022

Santhosh-Sellavel commented Oct 13, 2022

marcochavezf commented Oct 13, 2022

Santhosh-Sellavel commented Oct 14, 2022 •

edited

Loading

Santhosh-Sellavel commented Oct 14, 2022

PR Reviewer Checklist

Santhosh-Sellavel left a comment

grgia left a comment

marcochavezf commented Oct 14, 2022

roryabraham left a comment

marcochavezf commented Oct 18, 2022

roryabraham commented Oct 18, 2022

roryabraham left a comment

marcochavezf commented Oct 19, 2022

roryabraham left a comment

roryabraham left a comment

roryabraham commented Oct 19, 2022

melvin-bot bot commented Oct 19, 2022

roryabraham commented Oct 19, 2022

OSBotify commented Oct 19, 2022

OSBotify commented Oct 25, 2022

OSBotify commented Oct 26, 2022

add Jekyll SEO tag plugin #11821

add Jekyll SEO tag plugin #11821

Conversation

marcochavezf commented Oct 13, 2022 • edited Loading

Details

Fixed Issues

Tests

PR Review Checklist

PR Author Checklist

PR Reviewer Checklist

QA Steps

Screenshots

Web

marcochavezf commented Oct 13, 2022

Santhosh-Sellavel commented Oct 13, 2022

marcochavezf commented Oct 13, 2022

Santhosh-Sellavel commented Oct 14, 2022 • edited Loading

main/

/articles/request-money/SmartScan

Santhosh-Sellavel commented Oct 14, 2022

PR Reviewer Checklist

Santhosh-Sellavel left a comment

Choose a reason for hiding this comment

grgia left a comment

Choose a reason for hiding this comment

marcochavezf commented Oct 14, 2022

roryabraham left a comment

Choose a reason for hiding this comment

marcochavezf commented Oct 18, 2022

roryabraham commented Oct 18, 2022

roryabraham left a comment

Choose a reason for hiding this comment

marcochavezf commented Oct 19, 2022

roryabraham left a comment

Choose a reason for hiding this comment

roryabraham left a comment

Choose a reason for hiding this comment

roryabraham commented Oct 19, 2022

melvin-bot bot commented Oct 19, 2022

roryabraham commented Oct 19, 2022

OSBotify commented Oct 19, 2022

OSBotify commented Oct 25, 2022

OSBotify commented Oct 26, 2022

marcochavezf commented Oct 13, 2022 •

edited

Loading

Santhosh-Sellavel commented Oct 14, 2022 •

edited

Loading