diff --git a/app/layout.tsx b/app/layout.tsx
index 11ee832..b2219ff 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,11 +2,12 @@
 import './globals.css';
 import '@/iconfont/iconfont.css';
 import { createContext, useContext, useEffect, useState } from 'react';
+import { usePathname } from 'next/navigation';
 import { Providers } from '@/components/providers';
 import { ConfigProvider, theme } from 'antd';
 import CallbackModal from '@/components/common/CallbackModal';
 import { useAppStartupAnalytics } from '@/hooks/useAppStartupAnalytics';
-import { gaEnabled, gaMeasurementId } from '@/lib/env';
+import { gaEnabled, gaMeasurementId, baseUrl } from '@/lib/env';
 
 // 创建上下文来传递弹窗控制方法
 const CallbackModalContext = createContext<{
@@ -29,6 +30,8 @@ export default function RootLayout({
 }) {
   const [showCallbackModal, setShowCallbackModal] = useState(false)
   const [paymentType, setPaymentType] = useState<'subscription' | 'token'>('subscription')
+  const pathname = usePathname()
+  const canonicalHref = `https://movieflow.ai${pathname || ''}`
   
   // 应用启动时设置用户GA属性
   useAppStartupAnalytics();
@@ -53,7 +56,7 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
         <link rel="icon" type="image/x-icon" sizes="16x16" href="/favicon.ico?v=1" />
         <link rel="icon" type="image/x-icon" sizes="32x32" href="/favicon.ico?v=1" />
-        <link rel="canonical" href="https://movieflow.ai" />
+        <link rel="canonical" href={canonicalHref} />
         <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=1" />
         <link rel="apple-touch-icon" sizes="180x180" href="/favicon.ico?v=1" />
         {gaEnabled && (