VUE动态设置og标签 领英分享不识别

Question

VUE组件里动态设置og标签

//设置OG标签
const title = '标题';
const description = '描述';
const image = 'https://cordx.com/logo.jpeg';
// Set OG tags
that.setOgTag('og:locale', 'en_US', 'locale');
that.setOgTag('og:title', title, 'title');
that.setOgTag('og:description', description, 'description');
that.setOgTag('og:image', image, 'image');
that.setOgTag('og:image:width', '1200', 'image');
that.setOgTag('og:image:height', '630', 'image');
that.setOgTag('og:image:type', 'jpeg', 'image');

//设置OG标签
setOgTag(property, content, name) {
    const meta = document.querySelector(`meta[property='${property}']`);
        if(meta) {
            meta.setAttribute('content', content);
            meta.setAttribute('name', name);
        } else {
            const newMeta = document.createElement('meta');
            newMeta.setAttribute('name', name);
            newMeta.setAttribute('property', property);
            newMeta.setAttribute('content', content);
            document.head.appendChild(newMeta);
        }
}

领英分享不识别标签
https://www.linkedin.com/post-inspector/inspect
用这个链接验证的

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您提问的目的

您提问的目的是解决在使用Vue.js框架动态设置Open Graph（OG）标签时，领英（LinkedIn）分享不识别这些标签的问题。

问题出现原因

1. 标签设置错误：代码中设置OG标签的方式可能存在错误，导致领英无法正确识别。
2. 领英缓存：领英可能缓存了旧的OG标签，需要刷新缓存。
3. 服务器配置问题：服务器可能没有正确配置，导致领英无法获取到最新的OG标签。
4. 网络问题：网络问题可能导致领英无法正确访问和读取OG标签。

问题解决方案

1. 确保OG标签正确设置：检查代码中设置OG标签的逻辑是否正确，特别是属性名和内容的设置。
2. 清除领英缓存：等待一段时间后再次尝试分享，或者尝试清除领英的缓存。
3. 检查服务器配置：确保服务器配置正确，允许领英爬虫访问OG标签。
4. 网络测试：确保网络连接稳定，领英能够访问到网页。

提供代码

以下是修改后的代码示例，确保OG标签正确设置：

// 设置OG标签
function setOgTag(property, content, name) {
    const meta = document.querySelector(`meta[property='${property}']`) || document.querySelector(`meta[name='${name}']`);
    if (meta) {
        meta.setAttribute('content', content);
    } else {
        const newMeta = document.createElement('meta');
        newMeta.setAttribute('property', property); // 注意这里应该是property，而不是name
        newMeta.setAttribute('content', content);
        document.head.appendChild(newMeta);
    }
}

// 使用示例
setOgTag('og:title', '标题', 'og:title');
setOgTag('og:description', '描述', 'og:description');
setOgTag('og:image', 'https://cordx.com/logo.jpeg', 'og:image');
// ... 其他标签设置

代码运行方式

• 确保您的Vue项目已经搭建好。
• 将上述代码片段添加到Vue组件的生命周期钩子中，例如mounted钩子。
• 确保服务器配置正确，允许领英爬虫访问OG标签。

代码预期运行结果

• 当您在领英上分享页面时，领英应该能够识别并显示正确的OG标签。

推荐相关链接

• Open Graph protocol - Open Graph协议官方文档。
• Vue.js Documentation - Vue.js官方文档。
• LinkedIn Sharing Guidelines - 领英分享指南。
• Debugging Open Graph issues - Facebook调试工具，也适用于领英分享的OG标签调试。

请注意，上述解决方案和代码示例需要根据实际情况进行调整和测试。