diff --git a/opensaas-sh/blog/src/content/docs/guides/seo.md b/opensaas-sh/blog/src/content/docs/guides/seo.md index a98270c..45e65c4 100644 --- a/opensaas-sh/blog/src/content/docs/guides/seo.md +++ b/opensaas-sh/blog/src/content/docs/guides/seo.md @@ -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 `` 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 `` via client-side JS after initial serve, meaning that web crawlers that don't evaluate JS won't pick up the modifications to the `` 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'; + +//Wrap the main App component +export default function App() { + return ( + + <> +
+ {isAdminDashboard ? ( + + ) : ( + {shouldDisplayAppNavBar && } +
+ +
+ )} +
+ + +
+ ); +} +``` + +Now, you can set page-specific meta tags in your React components. + +```jsx {6-33) +//... +import { Helmet } from 'react-helmet-async'; + +export function MyCustomPage() { + return ( +
+ + My Custom Page Title + + + + + + {/* Open Graph / Facebook */} + + + + + + + {/* Twitter */} + + + + + + +
+ ); +} + +``` + +:::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'; + +export function MyCustomPage() { + return ( +
+ + My Custom Page Title + + + //... + + + + + //... +``` + + +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! diff --git a/template/app/public/robots.txt b/template/app/public/robots.txt new file mode 100644 index 0000000..ef1378f --- /dev/null +++ b/template/app/public/robots.txt @@ -0,0 +1,6 @@ +User-agent: * +Allow: / + +Disallow: /admin/ +Disallow: /api/ +Disallow: /auth/ diff --git a/template/app/src/landing-page/components/Testimonials.tsx b/template/app/src/landing-page/components/Testimonials.tsx index 457e669..32516de 100644 --- a/template/app/src/landing-page/components/Testimonials.tsx +++ b/template/app/src/landing-page/components/Testimonials.tsx @@ -22,7 +22,11 @@ export default function Testimonials({ testimonials }: { testimonials: Testimoni
- + {`Profile
{testimonial.name}
{testimonial.role}