Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved seo docs page #297

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Improved seo docs page #297

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5d22ee7
Update seo.md
NeroxTGC Oct 20, 2024
3c0883b
Update seo.md
NeroxTGC Oct 20, 2024
2505189
Update seo.md
NeroxTGC Oct 20, 2024
5a801b4
Merge pull request #1 from NeroxTGC/NeroxTGC-patch-1
NeroxTGC Oct 20, 2024
28227e1
Added Robots.txt & missing Alt attributes
NeroxTGC Nov 22, 2024
e16eeee
Update seo.md
NeroxTGC Nov 22, 2024
56ec506
Merge branch '100-Seo-Landing-Page'
NeroxTGC Nov 22, 2024
27cba84
Update opensaas-sh/blog/src/content/docs/guides/seo.md
NeroxTGC Nov 28, 2024
c984a06
Update opensaas-sh/blog/src/content/docs/guides/seo.md
NeroxTGC Nov 28, 2024
4ed41ac
updated Seo guide
NeroxTGC Dec 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 143 additions & 1 deletion opensaas-sh/blog/src/content/docs/guides/seo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,149 @@ app SaaSTemplate {

Change the above highlighted meta tags to match your app. Wasp will inject these tags into the HTML of your `index.html` file, which is the Landing Page (`app/src/client/landing-page/LandingPage.tsx`), in this case.

This means you **do not** need to rely on a separate app or framework to serve your landing page for SEO purposes.
## Other Pages Meta Tags

React Helmet Async is a React library that allows you to modify `<head>` directly from your React component, in a dynamic fashion. Therefore, it can also be used to set meta tags.

:::note
Since Wasp is SPA, React Helmet Async updates `<head>` via client-side JS after initial serve, meaning that web crawlers that don't evaluate JS won't pick up the modifications to the `<head>` you did.
:::


The first step is to install it:

```bash
# Using npm
npm install react-helmet-async
```

Next, you need to wrap your main App component (`app/src/client/App.tsx`) with `HelmetProvider`:

```jsx
//Add the react-helmet-async import
import {HelmetProvider } from 'react-helmet-async';
NeroxTGC marked this conversation as resolved.
Show resolved Hide resolved

//Wrap the main App component
export default function App() {
return (
<HelmetProvider>
<>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<> is not needeed anymore, since we wrapped it into HelmetProvider

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@NeroxTGC what about this one?

<div className='min-h-screen dark:text-white dark:bg-boxdark-2'>
{isAdminDashboard ? (
<Outlet />
) : (
{shouldDisplayAppNavBar && <AppNavBar />}
<div className='mx-auto max-w-7xl sm:px-6 lg:px-8'>
<Outlet />
</div>
)}
</div>
<CookieConsentBanner />
</>
</HelmetProvider>
);
}
```

Now, you can set page-specific meta tags in your React components.
NeroxTGC marked this conversation as resolved.
Show resolved Hide resolved

```jsx {6-33)
//...
import { Helmet } from 'react-helmet-async';

export function MyCustomPage() {
return (
<div>
<Helmet>
<title>My Custom Page Title</title>
<meta
name='description'
content='This is the meta description of my page.'
/>
<link rel='canonical' href='https://example.com/my-custom-page' />
<meta name="robots" content="noindex, nofollow" />


{/* Open Graph / Facebook */}
<meta property='og:type' content='website' />
<meta property='og:url' content='https://example.com/my-custom-page' />
<meta property='og:title' content='My Custom Page Title' />
<meta
property='og:description'
content='This is the Open Graph description of my page.'
/>
<meta property='og:image' content='https://example.com/my-custom-page-og-image.jpg' />

{/* Twitter */}
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:url' content='https://example.com/my-custom-page' />
<meta name='twitter:title' content='My Custom Page Title' />
<meta
name='twitter:description'
content='This is the Twitter description of my page.'
/>
<meta name='twitter:image' content='https://example.com/my-custom-page-twitter-image.jpg' />
</Helmet>
</div>
);
}

```

:::tip[Good SEO practice]
There are certain pages that it is good SEO practice not to index, for example:

- Pages that do not add value (login, signup, password reset, ....).
- Legal pages: Privacy Policy, Cookies Policy, Terms and Conditions.
- Situational pages (e.g. page made for a specific campaign).
:::

## Structured data and Schema markup

:::note[Tip]
Crawlers do all the work of analyzing and understanding the content of your pages, and they will thank you if you include structured data to help them understand what your content is about!🤗.
:::

You can add structured data for each page.

```jsx {14-22}
//...
import { Helmet, HelmetProvider } from 'react-helmet-async';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redundant import of helmet provider


export function MyCustomPage() {
return (
<div>
<Helmet>
<title>My Custom Page Title</title>
<meta
name='description'
content='This is the meta description of my page.'/>
<link rel='canonical' href='https://example.com/my-custom-page' />
//...

<script type='application/ld+json'>{`
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "title",
"url": "https://yoururl.com",
"description": "Description",
}
}
`} </script>

</Helmet>
//...
```


These resources provide the information needed to get the most out of structured data:
- [Introduction to structured data markup](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data)
- [General structured data guidelines](https://developers.google.com/search/docs/appearance/structured-data/sd-policies)

After you have a small notion about them, you can go deeper by adding custom functions depending on your app (FAQs, Rating, Review, Software Application...):
- [ALL structured data functions](https://developers.google.com/search/docs/appearance/structured-data/search-gallery)


:::tip[Star our Repo on GitHub! 🌟]
We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!
Expand Down
6 changes: 6 additions & 0 deletions template/app/public/robots.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
User-agent: *
Allow: /

Disallow: /admin/
Disallow: /api/
Disallow: /auth/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hm so api and auth here - do we need that? because those are parts of the server, and server is not hosted at the same url as client, at least not usually.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated, you are right.

6 changes: 5 additions & 1 deletion template/app/src/landing-page/components/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ export default function Testimonials({ testimonials }: { testimonials: Testimoni
</blockquote>
<figcaption className='mt-6 text-base text-white'>
<a href={testimonial.socialUrl} className='flex items-center gap-x-2'>
<img src={testimonial.avatarSrc} loading='lazy' className='h-12 w-12 rounded-full' />
<img
src={testimonial.avatarSrc}
alt={`Profile picture of ${testimonial.name}`}
className='h-12 w-12 rounded-full'
/>
<div>
<div className='font-semibold hover:underline'>{testimonial.name}</div>
<div className='mt-1'>{testimonial.role}</div>
Expand Down
Loading