diff --git a/app/charts/table/table.tsx b/app/charts/table/table.tsx
index 44942980b..9cf043967 100644
--- a/app/charts/table/table.tsx
+++ b/app/charts/table/table.tsx
@@ -25,6 +25,7 @@ import { TableChartState } from "@/charts/table/table-state";
 import Flex from "@/components/flex";
 import { Input, Switch } from "@/components/form";
 import { Observation } from "@/domain/data";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const MOBILE_VIEW_THRESHOLD = 384;
 
@@ -299,7 +300,10 @@ export const Table = () => {
   return (
     <>
       {showSearch && (
-        <Box sx={{ mb: 4, width: "min(100%, 300px)" }}>
+        <Box
+          sx={{ mb: 4, width: "min(100%, 300px)" }}
+          {...DISABLE_SCREENSHOT_ATTR}
+        >
           <Input
             type="text"
             name="search-input"
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
index 7976912d2..3b40fbfba 100644
--- a/app/components/chart-preview.tsx
+++ b/app/components/chart-preview.tsx
@@ -63,6 +63,7 @@ import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters";
 import { useTransitionStore } from "@/stores/transition";
 import { useTheme } from "@/themes";
 import { createSnapCornerToCursor } from "@/utils/dnd";
+import { DISABLE_SCREENSHOT_ATTR_KEY } from "@/utils/use-screenshot";
 
 export const ChartPreview = ({ dataSource }: { dataSource: DataSource }) => {
   const [state] = useConfiguratorState(hasChartConfigs);
@@ -474,6 +475,10 @@ const ChartPreviewInner = ({
                               })
                           : undefined
                       }
+                      {...{
+                        [DISABLE_SCREENSHOT_ATTR_KEY]:
+                          !chartConfig.meta.title[locale],
+                      }}
                     />
                   ) : (
                     // We need to have a span here to keep the space between the
@@ -507,6 +512,10 @@ const ChartPreviewInner = ({
                           }
                         : undefined
                     }
+                    {...{
+                      [DISABLE_SCREENSHOT_ATTR_KEY]:
+                        !chartConfig.meta.description[locale],
+                    }}
                   />
                 ) : (
                   // We need to have a span here to keep the space between the
diff --git a/app/components/chart-shared.tsx b/app/components/chart-shared.tsx
index 99ddfe753..b89c423fd 100644
--- a/app/components/chart-shared.tsx
+++ b/app/components/chart-shared.tsx
@@ -27,6 +27,7 @@ import { getChartIcon } from "@/icons";
 import SvgIcMore from "@/icons/components/IcMore";
 import { useLocale } from "@/src";
 import { createChartId } from "@/utils/create-chart-id";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 /** Generic styles shared between `ChartPreview` and `ChartPublished`. */
 export const useChartStyles = makeStyles<Theme, { disableBorder?: boolean }>(
@@ -136,6 +137,7 @@ export const ChartMoreButton = ({
         color="secondary"
         onClick={(ev) => setAnchor(ev.currentTarget)}
         sx={{ height: "fit-content" }}
+        {...DISABLE_SCREENSHOT_ATTR}
       >
         <SvgIcMore />
       </IconButton>
diff --git a/app/components/debug-panel/DebugPanel.tsx b/app/components/debug-panel/DebugPanel.tsx
index 164a294b8..779ed2dd4 100644
--- a/app/components/debug-panel/DebugPanel.tsx
+++ b/app/components/debug-panel/DebugPanel.tsx
@@ -27,6 +27,7 @@ import SvgIcChevronRight from "@/icons/components/IcChevronRight";
 import { useLocale } from "@/src";
 import { useInteractiveFiltersGetState } from "@/stores/interactive-filters";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const DebugInteractiveFilters = () => {
   const getInteractiveFiltersState = useInteractiveFiltersGetState();
@@ -200,7 +201,12 @@ const DebugPanel = (props: DebugPanelProps) => {
   const classes = useStyles();
 
   return (
-    <Accordion disableGutters className={classes.debugPanel} square>
+    <Accordion
+      disableGutters
+      className={classes.debugPanel}
+      square
+      {...DISABLE_SCREENSHOT_ATTR}
+    >
       <AccordionSummary
         expandIcon={
           <Box p={2}>
diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx
index a0fa0be3d..cd1800648 100644
--- a/app/components/metadata-panel.tsx
+++ b/app/components/metadata-panel.tsx
@@ -80,6 +80,7 @@ import { assert } from "@/utils/assert";
 import { useEventEmitter } from "@/utils/eventEmitter";
 import { makeDimensionValueSorters } from "@/utils/sorting-values";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 import Flex from "./flex";
 import { JoinByChip } from "./JoinByChip";
@@ -370,6 +371,7 @@ const ToggleButton = ({ onClick }: { onClick: () => void }) => {
       color="primary"
       size="small"
       onClick={onClick}
+      {...DISABLE_SCREENSHOT_ATTR}
     >
       <Typography variant="body2">
         <Trans id="controls.metadata-panel.metadata">Details</Trans>