SEO titles, h1's and p's and meta tags

[zoltanszogyenyi]

Is your feature request related to a problem? Please describe.

If we want this library to go mainstream we'll need to properly target some keywords in the right context.

Describe the solution you'd like

I suggest we target keywords like this:

"React Button - Flowbite" "React Modal - Flowbite" "React Navbar - Flowbite"

We also need a meta description of up to 160 characters, the <title> tag and <h1> with the same title (eg. React Modal - Flowbite), then a <p> tag describing the component and then just the documentation itself.

Example of such a page that we know worked for SEO:

https://flowbite.com/docs/components/buttons/

This should be applied to ALL of the component pages. Otherwise, other pages can be like: "Flowbite React- Quickstart"

Please do consider that I have searched for the amount of traffic driven by these keywords and if done right, we can get sustained traffic if we get to the first page on Google. This will help us drive even more traction for this library and develop it further.

Describe alternatives you've considered

Additional context

[rluders]

OK! We are going to use Hugo instead of creating our own documentation project.

Why HUGO?

• We can use the same Flowbite core library template;
• Saves a lot of time, once we don't need to recreate anything;
• Helps to solve the SEO questions;
• Documentation can use Markdown;
• #152 would be easier;
• We can embed the presentation of the component from the storybook to the documentation;

Once moving to Hugo we will need to create new tasks to also have examples/ folder that will store some project examples which is better than having the docs project as an example since we can have these projects not only as a reference but as start points to new projects.

[zoltanszogyenyi]

Hey @rluders,

Sounds good. Flowbite.com runs on Next.js and we still decided to keep the documentation via HUGO and we just upload it to the public folder. So we used the same approach in fact :)

[tulup-conner]

We can and should get this done for 1.0. This is a straightforward issue for anyone to tackle if the relevant copy is provided here by the core team.

[tulup-conner]

@zoltanszogyenyi Could you provide specific SEO guidelines for this issue? Regarding meta descriptions, titles, and h1 text content. Verbage someone can easily apply to all of the docs pages to get this issue done.

[zoltanszogyenyi]

Hey @tulup-conner,

I'll be glad to outline a couple of tasks and how the SEO strategy should be handled for Flowbite React.

1. We need to update our URL patterns from https://flowbite-react.com/avatar to https://flowbite-react.com/components/avatar or even https://flowbite-react.com/docs/components/avatar - this will not only make it easier for Google to make a distinction between component pages and regular pages, but it also gives us room for other documentation pages such as for "getting started", "theming", "dark mode", "changelog", and more.

Very important: if we are to make this change we need to set up some permanent redirects from the current pages to the new URLs so that we don't lose all the previous backlinks.

2. Every page needs a title, meta description, canonical, <h1>, and introduction <p> tag and also the social media meta tags would be nice addition as well. The best way to go on about it is to view the source code of one of the Flowbite's main library pages and replicate the same type of tags: https://flowbite.com/docs/components/skeleton/

3. A page needs a title and the titles should be in the following format:

• React Button Component - Flowbite
• React Carousel Component - Flowbite

So on and so forth - this will allow people searching for React related components to land on Flowbite.

4. A component page's structure should be the following:

• it needs a title
• it needs an introduction paragraph
• it needs a couple of paragraphs giving a description of the component
• every subsequent example should be h2 and have a description on usage
• specifically for Flowbite React we may need to add a section to each component to showcase examples on how to customise the component using the theming feature (there is confusion on how to customise stuff, even though the new theming page helps a lot)

5. I believe we do need a TOC on the right side of the page based on existing h2's

6. We should have a landing page for Flowbite React and separate the docs under the /docs/ folder - we can help with the design and even coding for the landing page

7. We should probably add a footer to the website too

There are just the main things that we need to work on ASAP to make sure that the docs will be SEO ready - I am available to help in this regard but we do need a proper documentation layout for which we can re-use and code the styles from the main library using Flowbite React components.

[tulup-conner]

@zoltanszogyenyi You and I can continue to finish this all the way and then we should resolve this issue. It might be helpful to create a checklist here of:

1. All the pages that still need titles and descriptions
2. Anything else we should do still, like add rel="canonical"s

We should also create an issue to audit SEO in our CI/CD, which we can do quite easily.

[rluders]

@zoltanszogyenyi @tulup-conner are we good with the SEO? Can we close this?

[tulup-conner]

@rluders We still need unique meta descriptions for some pages - I noticed Contributing, at least, and we also need to add rel="canonical" to every page, which is a change I'll be introducing this week. I can't write the meta descriptions, though. That will be @zoltanszogyenyi's fun!

[tulup-conner]

This was resolved by @SutuSebastian