qnc-webview-v3/src/composables/useSEO.js

import { ref, watch } from "vue";
import { useRoute } from "vue-router";

export function useSEO() {
    const route = useRoute();

    // 默认SEO信息
    const defaultSEO = {
        title: "全能查官网_综合风险排查工具_个人与企业背景核验平台",
        description:
            "全能查是您的掌上风控工具箱｡平台基于合规数据,提供个人风险预警､职场入职自查及黑名单筛查服务｡无需繁琐流程,客观中立,一键生成报告,助您快速识别生活中的潜在隐患｡",
        keywords:
            "大数据风险报告查询、大数据风险评估、大数据分析报告、个人大数据风险查询、小微企业风险、贷前风险背调、代理管理平台、免费开通代理、风险管控平台、信用风险分析、企业风险报告、贷前信用审核、失信人名单查询、被执行人信息、信用黑名单查询",
        url: "https://www.zhinengcha.cn",
    };

    // 页面SEO配置
    const pageSEO = ref({
        title: "",
        description: "",
        keywords: "",
        url: "",
    });

    // 更新页面SEO信息
    const updateSEO = (seoConfig) => {
        const config = { ...defaultSEO, ...seoConfig };

        // 更新页面标题
        document.title = config.title;

        // 更新meta描述
        let metaDescription = document.querySelector(
            'meta[name="description"]'
        );
        if (!metaDescription) {
            metaDescription = document.createElement("meta");
            metaDescription.name = "description";
            document.head.appendChild(metaDescription);
        }
        metaDescription.content = config.description;

        // 更新meta关键词
        let metaKeywords = document.querySelector('meta[name="keywords"]');
        if (!metaKeywords) {
            metaKeywords = document.createElement("meta");
            metaKeywords.name = "keywords";
            document.head.appendChild(metaKeywords);
        }
        metaKeywords.content = config.keywords;

        // 更新Open Graph标签
        updateOpenGraph(config);

        // 更新Twitter Cards
        updateTwitterCards(config);

        // 更新canonical URL
        updateCanonicalURL(config.url);

        // 更新结构化数据
        updateStructuredData(config);
    };

    // 更新Open Graph标签
    const updateOpenGraph = (config) => {
        const ogTags = {
            "og:title": config.title,
            "og:description": config.description,
            "og:url": config.url,
            "og:type": "website",
            "og:site_name": "全能查",
            "og:locale": "zh_CN",
        };

        Object.entries(ogTags).forEach(([property, content]) => {
            let meta = document.querySelector(`meta[property="${property}"]`);
            if (!meta) {
                meta = document.createElement("meta");
                meta.setAttribute("property", property);
                document.head.appendChild(meta);
            }
            meta.content = content;
        });
    };

    // 更新Twitter Cards
    const updateTwitterCards = (config) => {
        const twitterTags = {
            "twitter:card": "summary",
            "twitter:title": config.title,
            "twitter:description": config.description,
            "twitter:url": config.url,
        };

        Object.entries(twitterTags).forEach(([name, content]) => {
            let meta = document.querySelector(`meta[name="${name}"]`);
            if (!meta) {
                meta = document.createElement("meta");
                meta.name = name;
                document.head.appendChild(meta);
            }
            meta.content = content;
        });
    };

    // 更新canonical URL
    const updateCanonicalURL = (url) => {
        let canonical = document.querySelector('link[rel="canonical"]');
        if (!canonical) {
            canonical = document.createElement("link");
            canonical.rel = "canonical";
            document.head.appendChild(canonical);
        }
        canonical.href = url;
    };

    // 更新结构化数据
    const updateStructuredData = (config) => {
        // 移除现有的结构化数据
        const existingScripts = document.querySelectorAll(
            'script[type="application/ld+json"]'
        );
        existingScripts.forEach((script) => {
            if (script.textContent.includes('"@type":"WebPage"')) {
                script.remove();
            }
        });

        // 添加新的结构化数据
        const structuredData = {
            "@context": "https://schema.org",
            "@type": "WebPage",
            name: config.title,
            description: config.description,
            url: config.url,
            mainEntity: {
                "@type": "Organization",
                name: "全能查",
                url: "https://www.zhinengcha.cn/",
                description:
                    "专业大数据风险报告查询与代理平台，支持个人和企业多场景风控应用",
            },
        };

        const script = document.createElement("script");
        script.type = "application/ld+json";
        script.textContent = JSON.stringify(structuredData);
        document.head.appendChild(script);
    };

    // 根据路由自动更新SEO
    const updateSEOByRoute = () => {
        const routeConfigs = {
            "/": {
                title: "全能查官网_综合风险排查工具_个人与企业背景核验平台",
                description:
                    "全能查是您的掌上风控工具箱｡平台基于合规数据,提供个人风险预警､职场入职自查及黑名单筛查服务｡无需繁琐流程,客观中立,一键生成报告,助您快速识别生活中的潜在隐患｡",
                keywords:
                    "大数据风险报告查询、大数据风险评估、大数据分析报告、个人大数据风险查询、小微企业风险、贷前风险背调、代理管理平台、免费开通代理、风险管控平台、信用风险分析、企业风险报告、贷前信用审核、失信人名单查询、被执行人信息、信用黑名单查询",
            },
            "/agent": {
                title: "全能查代理 - 免费开通代理权限 | 大数据风险报告代理",
                description:
                    "全能查代理平台，免费开通代理权限，享受大数据风险报告查询服务代理收益。专业的大数据风险报告、婚姻查询、个人信用评估等服务的代理合作。",
                keywords:
                    "全能查代理, 免费代理, 大数据风险报告代理, 代理权限, 代理收益",
            },
            "/help": {
                title: "帮助中心 - 全能查使用指南 | 常见问题解答",
                description:
                    "全能查帮助中心，提供详细的使用指南、常见问题解答、操作教程等，帮助用户更好地使用大数据风险报告查询服务。",
                keywords: "全能查帮助, 使用指南, 常见问题, 操作教程, 客服支持",
            },
            "/help/guide": {
                title: "使用指南 - 全能查操作教程 | 功能说明",
                description:
                    "全能查详细使用指南，包含各功能模块的操作教程、功能说明、注意事项等，让用户快速上手使用。",
                keywords: "使用指南, 操作教程, 功能说明, 快速上手, 全能查教程",
            },
            "/example": {
                title: "示例报告 - 全能查报告展示 | 大数据风险报告样例",
                description:
                    "全能查示例报告展示，包含大数据风险报告、婚姻状况查询、个人信用评估等服务的报告样例，让用户了解报告内容和格式。",
                keywords:
                    "示例报告, 报告展示, 报告样例, 大数据风险报告, 婚姻查询报告",
            },
            "/service": {
                title: "客服中心 - 全能查在线客服 | 技术支持",
                description:
                    "全能查客服中心，提供在线客服支持、技术咨询、问题反馈等服务，确保用户获得及时有效的帮助。",
                keywords: "客服中心, 在线客服, 技术支持, 问题反馈, 全能查客服",
            },
        };

        const currentPath = route?.path || "/";
        const config = routeConfigs[currentPath] || defaultSEO;

        updateSEO({
            ...config,
            url: `https://www.zhinengcha.cn${currentPath}`,
        });
    };

    // 监听路由变化
    watch(() => route?.path, updateSEOByRoute, { immediate: true });

    return {
        updateSEO,
        updateSEOByRoute,
        pageSEO,
    };
}