Discrete Area for SEO Copy

[emalineg]

I have copy for SEO purposes written and need an area for it. Ideally, copy would be on home page, but looking for a way to implement this without taking away from the aesthetics of the app.

This could be a toggle that makes content visible that was by default not visible, a second page that can be linked to, or some other creative solution. If adding a second page, isBackground & settings should be passed through props (and then back again) so users can easily return to their dashboard without having to set it back up.

DM Emzra#3910 with questions.

[royanger]

I'm thinking of two options for this:

1. An About page with a link side-by-side with the with the Donate button in the bottom right, which could open a new page. The draw back to a new page is that we would need to add routing of some sort. If we went that way I would suggest something lightweight like wouter instead of react-router or react-location. If using a router we shouldn't need to pass stuff through props (I haven't explicitly looked at that part to be clear), as we should be able to access the store from any page in the SPA.
2. As About modal with a button to open the modal side-by-side with the Donate button. We can display with a modal (or maybe a clever tab option that create one tab for the main dashboard and a second for the SEO data).

I would lean to the second option. I think that works fine with this situation. Thoughts @Melkeydev?

[emalineg]

@royanger The first option would be preferable SEO-wise.

[royanger]

Any particular reasons? I've seen stuff from Googlers confirming the indexer looks at hidden content, so it should be indexed as a hidden modal. Though maybe that is out of date? Or is there a benefit from having a second page?

[emalineg]

Google can access content that is hidden, but it does not like when core content (that should affect SEO) is hidden, and will weigh it less (possibly negatively) than if it were visible on a second page.

Scenarios ranked for seo

1. content on homepage - could be done similar to pomofocus.io / pomofocus.io/app
2. content on a second page - immediately visible
3. content hidden on first page, but broken up into multiple modals
4. content hidden on first page, but in 1 modal

Note: It's unclear 3/4 will negatively affect SEO

[royanger]

I actually like what pomofocus.io did, including being able to include how to use, how to contribute, etc because it is a longer page/content area. I'm not sure if we need the astrostation.me/app variant. I think we could achieve the same by doing the following:

• add the 'below fold' information, such as SEO copy, how to use, how to contribute, etc. This content is visible by default.
• add a new step to the end of the onboarding flow that says something to the effect of 'Hey, want to know more? See details'. The 'see details' is a button that is anchored to the top of the below fold section
• the below fold section has a 'hide' button that will update the store and then hide the below fold content
• add an option to see that content again (turn hide to false) either via an 'About' button beside Donate and/or an option in Settings.

Thoughts @emalineg and @Melkeydev?

[emalineg]

Sounds great, as long as it's visible by default, that's a great work around.

Just needs the @Melkeydev write off.

[Melkeydev]

I am not sure how i feel about the below fold for astrostation.me home page. I definitely do not want a /app page.

I would definitely love to see a PR for it. Not totally against the idea but if it is executed correctly than I am game.

[eraychumak]

If you guys are going to follow a similar layout to pomofocus, I suggest maybe adding some resistance to the scroll (snapping feature) to prevent accidental scroll-downs, which can impact the immersiveness of the app.

[emalineg]

Just an update:

• [x] add the 'below fold' information, such as SEO copy, how to use, how to contribute, etc. This content is visible by default.
• [x] add a new step to the end of the onboarding flow that says something to the effect of 'Hey, want to know more? See details'. The 'see details' is a button that is anchored to the top of the below fold section
• [x] the below fold section has a 'hide' button that will update the store and then hide the below fold content
• [x] add an option to see that content again (turn hide to false) either via an 'About' button beside Donate and/or an option in Settings.

Currently on my own fork of the project. Will implement the rest & PR tomorrow.

[emalineg]

@eraychumak It looks like scrollsnap doesn't work with the overflow css property. Do you happen to know of a work around or alternative implementation?

[eraychumak]

@emalineg I managed to make it work by giving the parent component containing Toaster, SideNav, Astrostation, InfoSection components in the App.tsx file a snap-y snap-mandatory, the Astrostation component a h-screen snap-center, and the InfoSection component a snap-center h-screen overflow-y-scroll.

However, it ends up with two scrollbars for the InfoSection part, which isn't really feasible I guess. I'll keep trying but hopefully maybe that gives you something to debug further with.