✨ Add "Allow search engines to index" option (baptisteArno#2163)

defsanmith · web-flow · commit ac510abf763d · 2025-05-16T08:36:33.000+02:00
# Configure the robots meta tag to allow search and link crawlers ## Description Closes baptisteArno#1123 This PR adds the "Allow indexing" metadata option. This feature allows users to control whether search engines like Google and LinkedIn can index their Typebot content by removing the `noindex` meta tag when enabled. ## Changes - Updated `MetadataForm.tsx` to include a new switch toggle to allow indexing - Updated `Seo.tsx` to remove the `noindex` tag when indexing is enabled - Made the appropriate changes for the typebot settings schema to include the allow indexing option - Added translations for the following keys to `en.json`, `fr.json`, `pt-BR.json`, `pt.json` language files: - `settings.sideMenu.metadata.allowIndexing.label`: "Allow search engines to index" - `settings.sideMenu.metadata.allowIndexing.tooltip`: "When enabled, the noindex meta tag will be removed, allowing search engines like Google and LinkedIn to index your typebot." ## Screenshots ![Capture-2025-05-10-114206](https://github.com/user-attachments/assets/7cbc32bf-8fe1-49d6-8db0-abd508b3e69f)
diff --git a/apps/builder/src/features/settings/components/MetadataForm.tsx b/apps/builder/src/features/settings/components/MetadataForm.tsx
@@ -2,6 +2,7 @@ import { ImageUploadContent } from "@/components/ImageUploadContent";
 import { MoreInfoTooltip } from "@/components/MoreInfoTooltip";
 import { TextInput, Textarea } from "@/components/inputs";
 import { CodeEditor } from "@/components/inputs/CodeEditor";
+import { SwitchWithLabel } from "@/components/inputs/SwitchWithLabel";
 import {
   FormLabel,
   HStack,
@@ -46,6 +47,8 @@ export const MetadataForm = ({
     onMetadataChange({ ...metadata, googleTagManagerId });
   const handleHeadCodeChange = (customHeadCode: string) =>
     onMetadataChange({ ...metadata, customHeadCode });
+  const handleAllowIndexingChange = (allowIndexing: boolean) =>
+    onMetadataChange({ ...metadata, allowIndexing });
 
   const favIconUrl =
     metadata?.favIconUrl ??
@@ -155,6 +158,12 @@ export const MetadataForm = ({
           withVariableButton={false}
         />
       </Stack>
+      <SwitchWithLabel
+        label={t("settings.sideMenu.metadata.allowIndexing.label")}
+        initialValue={metadata?.allowIndexing}
+        onCheckChange={handleAllowIndexingChange}
+        moreInfoContent={t("settings.sideMenu.metadata.allowIndexing.tooltip")}
+      />
     </Stack>
   );
 };
diff --git a/apps/builder/src/i18n/en.json b/apps/builder/src/i18n/en.json
@@ -474,6 +474,8 @@
   "settings.sideMenu.metadata.icon.label": "Icon:",
   "settings.sideMenu.metadata.image.label": "Image:",
   "settings.sideMenu.metadata.title.label": "Title:",
+  "settings.sideMenu.metadata.allowIndexing.label": "Allow search engines to index",
+  "settings.sideMenu.metadata.allowIndexing.tooltip": "When enabled, the noindex meta tag will be removed, allowing search engines like Google to index your typebot.",
   "settings.sideMenu.security": "Security",
   "settings.sideMenu.security.allowedOrigins": "Allowed origins",
   "settings.sideMenu.security.allowedOrigins.tooltip": "Restrict the execution of your typebot to specific website origins. By default your bot can be executed on any website.",
diff --git a/apps/viewer/src/components/Seo.tsx b/apps/viewer/src/components/Seo.tsx
@@ -24,12 +24,15 @@ export const SEO = ({
     favIconUrl,
     imageUrl,
     googleTagManagerId,
+    allowIndexing,
   } = {},
 }: SEOProps) => (
   <>
     <Head key="seo">
       <title>{title ?? typebotName}</title>
-      {isMatchingViewerUrl ? <meta name="robots" content="noindex" /> : null}
+      {isMatchingViewerUrl && allowIndexing !== true ? (
+        <meta name="robots" content="noindex" />
+      ) : null}
       <link
         rel="icon"
         type={favIconUrl ? "image/png" : "images/svg+xml"}
diff --git a/packages/settings/src/schemas.ts b/packages/settings/src/schemas.ts
@@ -49,6 +49,7 @@ const metadataSchema = z.object({
   favIconUrl: z.string().optional(),
   customHeadCode: z.string().optional(),
   googleTagManagerId: z.string().optional(),
+  allowIndexing: z.boolean().optional(),
 });
 
 const startConditionSchema = z.object({
