|
| 1 | +--- |
| 2 | +title: SEO metadata |
| 3 | +comments: true |
| 4 | +last_checked_with_versions: |
| 5 | + Wasp: "0.21" |
| 6 | +--- |
| 7 | + |
| 8 | +# Adding SEO metadata to your Wasp app |
| 9 | + |
| 10 | +This guide shows you how to set up meta tags for your Wasp application to improve SEO and enable rich previews when your app is shared on platforms like Slack, X, or Discord. |
| 11 | + |
| 12 | +## How to add `<meta>` tags |
| 13 | + |
| 14 | +### Setting metadata for every page |
| 15 | + |
| 16 | +You can add meta tags to your application using the `head` property in your `app` declaration. These tags will be included in the `<head>` section of your HTML. |
| 17 | + |
| 18 | +```wasp title="main.wasp" |
| 19 | +app MyApp { |
| 20 | + wasp: { |
| 21 | + version: "^0.21.0" |
| 22 | + }, |
| 23 | + title: "My App", |
| 24 | + head: [ |
| 25 | + "<link rel='icon' href='/favicon.ico' />", |
| 26 | + "<meta name='description' content='Your apps main description and features.' />", |
| 27 | + "<meta name='author' content='Your (App) Name' />", |
| 28 | + "<meta name='keywords' content='saas, solution, product, app, service' />", |
| 29 | +
|
| 30 | + // Open Graph tags for social media previews |
| 31 | + "<meta property='og:type' content='website' />", |
| 32 | + "<meta property='og:title' content='Your App Name' />", |
| 33 | + "<meta property='og:site_name' content='Your App Name' />", |
| 34 | + "<meta property='og:url' content='https://your-app.com' />", |
| 35 | + "<meta property='og:description' content='Your apps main description and features.' />", |
| 36 | + "<meta property='og:image' content='https://your-app.com/public-banner.webp' />", |
| 37 | +
|
| 38 | + // Twitter Card tags |
| 39 | + "<meta name='twitter:image' content='https://your-app.com/public-banner.webp' />", |
| 40 | + "<meta name='twitter:image:width' content='800' />", |
| 41 | + "<meta name='twitter:image:height' content='400' />", |
| 42 | + "<meta name='twitter:card' content='summary_large_image' />", |
| 43 | + ], |
| 44 | +} |
| 45 | +``` |
| 46 | + |
| 47 | +### Setting metadata for a specific page |
| 48 | + |
| 49 | +You can use [React's support for `<meta>` tags](https://react.dev/reference/react-dom/components/meta) within components to set metadata for specific pages. This allows you to customize the metadata based on the content of each page. These tags will only be included in the page when the component is being shown, so it's better to add them to the top-most level if possible. |
| 50 | + |
| 51 | +```tsx title="src/pages/HomePage.tsx" |
| 52 | +export function HomePage() { |
| 53 | + return ( |
| 54 | + <> |
| 55 | + <head> |
| 56 | + <meta |
| 57 | + name="description" |
| 58 | + content="Home page description specific to this page." |
| 59 | + /> |
| 60 | + <meta property="og:title" content="Home Page - My App" /> |
| 61 | + <meta |
| 62 | + property="og:description" |
| 63 | + content="Description for the home page." |
| 64 | + /> |
| 65 | + <meta |
| 66 | + property="og:image" |
| 67 | + content="https://your-app.com/home-page-banner.webp" |
| 68 | + /> |
| 69 | + <meta name="twitter:card" content="summary_large_image" /> |
| 70 | + </head> |
| 71 | + <div> |
| 72 | + <h1>Welcome to the Home Page</h1> |
| 73 | + {/* The rest of the page content */} |
| 74 | + </div> |
| 75 | + </> |
| 76 | + ); |
| 77 | +} |
| 78 | +``` |
| 79 | + |
| 80 | +## Recommended `<meta>` Tags |
| 81 | + |
| 82 | +### Basic SEO tags |
| 83 | + |
| 84 | +- `description`: A brief description of your app (appears in search results) |
| 85 | +- `author`: The creator or company name |
| 86 | +- `keywords`: Relevant keywords for search engines |
| 87 | + |
| 88 | +### Open Graph tags |
| 89 | + |
| 90 | +This is the most common standard used by social media platforms (e.g. Facebook, LinkedIn, Slack, Discord, and more) to generate rich link previews. |
| 91 | + |
| 92 | +- `og:type`: Usually "website" for web apps |
| 93 | +- `og:title`: The title shown in previews |
| 94 | +- `og:site_name`: Your app/site name |
| 95 | +- `og:url`: The canonical URL |
| 96 | +- `og:description`: Description for the preview |
| 97 | +- `og:image`: Preview image URL |
| 98 | + |
| 99 | +You can check [Open Graph tag guidelines](https://ogp.me/) for more information on how this information is used. |
| 100 | + |
| 101 | +### X Card tags |
| 102 | + |
| 103 | +This is used by X (formerly Twitter) to create rich link previews. |
| 104 | + |
| 105 | +- `twitter:card`: Use "summary_large_image" for large image previews |
| 106 | +- `twitter:image`: Image URL for Twitter previews |
| 107 | +- `twitter:image:width`: Image width in pixels |
| 108 | +- `twitter:image:height`: Image height in pixels |
| 109 | + |
| 110 | +You can check [X's guidelines](https://developer.x.com/en/docs/x-for-websites/cards/overview/markup) for more information on how this information is used. |
| 111 | + |
| 112 | +## Best practices for images |
| 113 | + |
| 114 | +1. Use your client app's absolute URL (including `https://`) for your preview images. |
| 115 | +2. Check the recommended dimensions for each platform's images in their documentation. |
| 116 | +3. Keep important content centered (some platforms crop differently). |
| 117 | +4. Use WebP or PNG format for best quality. |
| 118 | +5. Place your image [in the `public/` folder](https://wasp.sh/docs/project/static-assets#the-public-directory). |
| 119 | + |
| 120 | +## Testing your metadata |
| 121 | + |
| 122 | +After deploying, you can verify your meta tags using these tools: |
| 123 | + |
| 124 | +- [Google Tag Assistant](https://tagassistant.google.com/) |
| 125 | +- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) |
| 126 | +- [X Card Validator](https://cards-dev.x.com/validator) |
| 127 | +- [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/) |
0 commit comments