vue前端项目分享facebook、twitter、linkedin

news2025/7/20 18:25:41

背景

如果你FaceBook和twitter的分享机制就知道,当你分享数据到他们的网站,会有爬虫机器人一直在读取并解析你的数据(meta里面的),所以怎么让你的meta数据被抓到?

问题

Vue的页面公用一个HTML,所以动态的meta标签就不行了,而且FaceBook官网已经声明,页面动态创建的meta是抓取不成功的 ,所以怎么动态生成数据,并让FaceBook或者Twitter抓到呢,这里给大家提供一种方法,并且实际项目中已经在跑了。

解决方式

独立生成静态页面的方式

具体实现

文章发布的时候,同时生成一个静态html页面

后台使用模板的方式实现

<!DOCTYPE html>
<html>
<head>
    <meta property="og:type" content="article" />
    <meta property="og:title" content="${title}"/>
    <meta property="og:image" content="${imagePath}"/>
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="628" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta property="og:description" content="${summary}"/>
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="${title}"/>
    <meta name="twitter:site" content="website" />
    <meta name="twitter:description" content="${summary}"/>
    <meta name="twitter:image" content="${imagePath}"/>
</head>
<body>
<script type="text/javascript">
    window.location.href="${articleUrl}"
</script></body>
</html>
   @SneakyThrows
    public void  writeHtml(String imagePath, String title, String articleUrl, String summary,String articleId,String localPath){
        Template template = configurer.getConfiguration().getTemplate("articleDetail.ftl");
        Map<String,Object> model =new HashMap<>();
        model.put("articleUrl",articleUrl==null?"":articleUrl);
        model.put("title",title==null?"":title);
        model.put("imagePath",imagePath==null?"":imagePath);
        model.put("summary",summary==null?"":summary);
        String text = FreeMarkerTemplateUtils.processTemplateIntoString(template, model);
        //log.info("text::"+text);
        String htmlFilePath = localPath+articleId+".html";
        log.info("htmlFilePath::"+htmlFilePath);
        FileWriter writer =null;
        File file = new File(htmlFilePath);
        if (!file.getParentFile().exists()) {
            file.getParentFile().mkdirs();
        }
        if (!file.exists()) {
            writer = new
                    FileWriter(htmlFilePath);
        }else{
            file.delete();
            writer = new
                    FileWriter(htmlFilePath);
        }
        writer.write(text);
        writer.flush();
        writer.close();
    }

nginx配置转发路径   服务器存放html页面的路径

  location /share/article {
	alias /data/share;
  }

新的问题

1、个别图片不能正常显示

解决:Linedin对图片大小做了一些规定

 参考网站

linkedin

Make your website shareable on LinkedIn | LinkedIn Help

Post Inspector

 2、分享链接有缓存

解决:在url后 添加 时间戳参数

 

参考文章

vue.js - facebook twitter 领英 在web中 分享 - 个人文章 - SegmentFault 思否

The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media | CSS-Tricks - CSS-Tricks


 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/368704.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Golang学习Day2

Go语言中的函数go语言中函数特性go语言有三种函数&#xff1a;普通函数、匿名函数&#xff08;没有名称的函数&#xff09;方法&#xff08;定义在struct上的函数&#xff09;。receivergo语言中不运算函数重载&#xff08;overload&#xff09;&#xff0c;也就是说不允许函数…

Vulnhub靶场----7、DC-7

文章目录一、环境搭建二、渗透流程三、思路总结一、环境搭建 DC-7下载地址&#xff1a;https://download.vulnhub.com/dc/DC-7.zip kali&#xff1a;192.168.144.148 DC-7&#xff1a;192.168.144.155 二、渗透流程 nmap -T5 -A -p- -sV -sT 192.168.144.155思路&#xff1a; …

【Opencv项目实战】目标检测:自动检测出现的所有动态目标

文章目录一、项目思路二、算法详解2.1、计算两个数组或数组与标量之间的每个元素的绝对差。2.2、轮廓检测 绘制物体轮廓 绘制矩阵轮廓2.3、连续窗口显示2.4、读取视频&#xff0c;显示视频&#xff0c;保存视频三、项目实战&#xff1a;实时动态目标检测实时动态目标检测一、…

[蓝桥杯 2018 省 A] 付账问题 贪心题

几个人一起出去吃饭是常有的事。但在结帐的时候&#xff0c;常常会出现一些争执。现在有 n 个人出去吃饭&#xff0c;他们总共消费了 S 元。其中第 i 个人带了 ai 元。幸运的是&#xff0c;所有人带的钱的总数是足够付账的&#xff0c;但现在问题来了&#xff1a;每个人分别要出…

Joomla未授权访问漏洞(CVE-2023-23752)

漏洞简介 ​ 在 Joomla! 版本为4.0.0 到 4.2.7中发现了一个漏洞&#xff0c;在Joomla受影响的版本中由于对Web服务端点的访问限制不当&#xff0c;远程攻击者可以绕过安全限制获得Web应用程序敏感信息。 影响版本 4.0.0 < Joomla < 4.2.7 环境搭建 文件下载地址 ht…

Python 函数式编程

函数式编程&#xff1a;允许把函数本身作为参数传入另一个函数&#xff0c;还允许返回一个函数&#xff01; 1.高阶函数 一个函数可以接收另一个函数作为参数&#xff0c;这种函数称之为高阶函数 abs(-10) 是函数调用 abs是函数本身 abs函数名其实是一个变量名 变量可以…

C++基础入门丨8. 结构体——还需要知道这些

Author&#xff1a;AXYZdong 硕士在读 工科男 有一点思考&#xff0c;有一点想法&#xff0c;有一点理性&#xff01; 定个小小目标&#xff0c;努力成为习惯&#xff01;在最美的年华遇见更好的自己&#xff01; CSDNAXYZdong&#xff0c;CSDN首发&#xff0c;AXYZdong原创 唯…

SpringCloud - Nacos注册发现

目录 服务注册到Nacos 服务分级存储模型 NacosRule负载均衡 服务实例的权重设置 环境隔离 Nacos与Eureka的对比 添加Nacos配置 微服务配置拉取 配置热更新 多环境配置共享 服务注册到Nacos 1.在父工程引入SpringCloudAlibaba的依赖 2.注释掉order-service和user-ser…

Web前端学习:一

编辑器的基础使用 编辑器推荐使用&#xff1a; HBuilderx&#xff08;免费中文&#xff09;&#xff08;建议使用&#xff09; Sublime&#xff08;免费英文&#xff09; Sublime中文设置方法&#xff0c;下载语言插件&#xff1a; 1、进入Sublime后&#xff0c;ShiftCtrlP…

流程图培训

工具 wps 目前咱们在新建里面&#xff0c;可以新建流程图 构成流程图的图形符号及其作用 常用的流程图介绍 flowchart 和 BPMN 两种 flowchart: 最开始的全名是”Process Flow Charts”&#xff0c;即处理流程图表。 BPMN&#xff1a; 定义了业务流程图&#xff0c;其基…

最新版本vue3+vite重构尚品汇(解决接口问题)第1-20集

本来想弄微信小程序的&#xff0c;但是注册小程序要花300块钱&#xff0c;我自学编程这么久&#xff0c;还没赚到1分钱呢。所以还是白嫖起手&#xff0c;从尚品汇弄起&#xff0c;弄完自己做一个实际的电商平台项目&#xff0c;把所有流程走一遍&#xff0c;到时候拿着自己的项…

JavaEE简单实例——MyBatis的一对一映射的嵌套查询的简单介绍和基础配置

简单介绍&#xff1a; 在前一章我们介绍了关于MyBatis的多表查询的时候的对应关系&#xff0c;其中有三种对应关系&#xff0c;分别是一对一&#xff0c;一对多&#xff0c;多对多的关系。如果忘记了这三种方式的对应形式可以去前面看看&#xff0c;一定要记住这三种映射关系的…

微服务架构下路由、多活、灰度、限流的探索与挑战

导语 2022腾讯全球数字生态大会已圆满落幕&#xff0c;大会以“数实创新、产业共进”为主题&#xff0c;聚焦数实融合&#xff0c;探索以全真互联的数字技术助力实体经济高质量发展。大会设有29个产品技术主题专场、18个行业主题专场和6个生态主题专场&#xff0c;各业务负责人…

Linux基础命令-locate快速查找文件

文章​​​​​​​目录 locate 命令介绍 语法格式 基本参数 参考实例 1&#xff09;查找1.txt相关的文件 2&#xff09;查找包含pass和txt都有的文件 3&#xff09;只匹配文件名&#xff0c;有路径的情况下不进行匹配 4&#xff09;匹配不区分大小写的文件 5&#…

Java多线程(四)---并发编程容器

1.经常使用什么并发容器&#xff0c;为什么&#xff1f;答&#xff1a;Vector、ConcurrentHashMap、HasTable一般软件开发中容器用的最多的就是HashMap、ArrayList&#xff0c;LinkedList &#xff0c;等等但是在多线程开发中就不能乱用容器&#xff0c;如果使用了未加锁&#…

Java EE|TCP/IP协议栈之TCP协议工作机制上

文章目录前言一、确认应答二、超时重传三、连接管理三次握手四次挥手前言 前边&#xff0c;我们已经大概交代了TCP的报文结构。但是仍有一些字段我们不确定到底怎么理解&#xff0c;这里就分析TCP的内部工作机制了。 TCP的内部很复杂&#xff0c;有很多机制&#xff0c;这里我们…

Super intelligent port AI smart port termial, CIMCAI top port AI

中国上海人工智能企业CIMCAI&#xff0c;全球港航人工智能领军者企业&#xff0c;顶尖AI科技及工业级成熟人工智能产品&#xff0c;打造高效能智能化港口数字化航运码头数字化。Ceaspectus™领跑全球港口人工智能&#xff0c;建设新一代高效能先进港口码头。Ceaspectus™先进方…

通过操作Cortex-A7核,串口输入相应的命令,控制LED灯进行工作

1.通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作 例如在串口输入led1on,开饭led1灯点亮 2.例如在串口输入led1off,开饭led1灯熄灭 3.例如在串口输入led2on,开饭led2灯点亮 4.例如在串口输入led2off,开饭led2灯熄灭 5.例如在串口输入led…

苹果电容笔和普通电容笔区别是什么?开学好用电容笔推荐

苹果的电容笔与一般的电容笔有何不同呢&#xff1f;两者的差距并不是很大。不过这款原装的苹果电容笔&#xff0c;重量要普通的电容笔重得多&#xff0c;而且笔尖还有一个特殊的重力感应装置&#xff0c;在其他方面两者并没有太大的差异。但是&#xff0c;由于苹果电容笔的售价…

QT自绘标题和边框

在QT中如果想要自绘标题和边框&#xff0c;一般步骤是&#xff1a; 1&#xff09; 在创建窗口前设置Qt::FramelessWindowHint标志&#xff0c;设置该标志后会创建一个无标题、无边框的窗口。 2&#xff09;在客户区域的顶部创建一个自绘标题栏。 3&#xff09;给窗口绘制一个背…