diff --git a/packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts b/packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts
index dc4837f84..e9230eb17 100644
--- a/packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts
+++ b/packages/frontend/core/src/components/page-list/use-block-suite-page-preview.ts
@@ -23,6 +23,11 @@ export const getPagePreviewText = (page: Page) => {
       console.error('Unexpected empty block');
       break;
     }
+    if (block.flavour === 'affine:surface') {
+      // The surface block is a special block that contains canvas data,
+      // it should not be included in the preview.
+      continue;
+    }
     if (block.children) {
       queue.unshift(...block.children);
     }
@@ -30,6 +35,7 @@ export const getPagePreviewText = (page: Page) => {
       continue;
     }
     if (block.text) {
+      // Text block e.g. paragraph/heading/list/code
       const text = block.text.toString();
       if (!text.length) {
         continue;
@@ -37,13 +43,15 @@ export const getPagePreviewText = (page: Page) => {
       previewLenNeeded -= text.length;
       preview.push(text);
     } else {
-      // image/attachment/bookmark
+      // Other block e.g. image/attachment/bookmark
       const type = block.flavour.split('affine:')[1] ?? null;
-      previewLenNeeded -= type.length + 2;
-      type && preview.push(`[${type}]`);
+      if (type) {
+        previewLenNeeded -= type.length + 2;
+        preview.push(`[${type}]`);
+      }
     }
   }
-  return preview.join(' ');
+  return preview.join(' ').slice(0, MAX_PREVIEW_LENGTH);
 };
 
 const emptyAtom = atom<string>('');