使用vue开发前端后如何再使用php做静态网页seo

已于 2024-03-29 09:22:20 修改
阅读量333 收藏 4
点赞数 8
分类专栏： 文件码生成器 文章标签： 前端 vue.js php 创业创新
于 2024-02-26 15:33:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44395171/article/details/136300387
版权

大家都知道vue开发后seo十分难做，基本一个月甚至几个月都没办法收录网站，这是我观察易易二维码（https://eema.cn），网站发现的一个方法。
本次开发使用tp8框架和uniapp开发。

1.首页我们都知道vue开发uniapp开发都有一共入口文件，默认为index.html,通过入口文件进行加载路由等文件。
这个是默认的入口文件，此时是没办法做任何seo的，因为百度没办法读取里面的路由数据。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>文件二维码生成器 - 文件在线生成二维码免费不限容量不限流量 - 文件在线预览 - 文件二维码制作不限数量 | 文件码</title>
		<meta charset="UTF-8" name="keywords" content="文件生成二维码,文件二维码,二维码生成器,文件在线预览,文件码,免费二维码,二维码制作" />
		<link rel="icon" type="image/png" href="/static/ico/logo.png" alt="文件码网站Logo">
		<meta name="description"
			content="文件码是一款可免费商用的文件二维码生成器，为您提供文件在线预览、文件转二维码等服务用于文件分享，支持 word、Excel、Pdf、PPT 等多种常见格式文件在线转码和在线浏览！免费不限账户容量，不限文件流量！">
		<link rel="icon" href="/static/ico/favicon.ico">
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
				CSS.supports('top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>

	</head>
	<body>
		<div id="app"><!--app-html--></div>
		<script type="module" src="/main.js"></script>
	</body>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			width: 100%;
		}
	</style>
</html>

2.这里是我使用tp框架把入口文件放入view进行模板渲染，再引入vue的路由的基础上，我们在body下面再使用tp的模板渲染，这样既可以使用vue的简单方法，也可以做静态网站的seo，使用这个方法提交收录后，几天就收录了官网。如果还是之前的纯vue的话基本收录无望。因为百度收录是按照你的文章质量、网站的质量等。纯vue百度无法读取vue里面的接口，vue都是动态渲染的。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>易易二维码 - 免费好用的文件二维码生成器</title>
    <meta name="keywords" content="文件生成二维码,文件二维码,二维码生成器,文件在线预览,文件码,免费二维码,二维码制作"/>
    <meta name="description"
          content="易易二维码是一款可免费商用的文件二维码生成器，为您提供文件在线预览、文件生成二维码等服务用于文件分享，支持 word（doc、dot、wps、docx）、Excel（xls、xlt、csv、xlsx）、Pdf、PPT 等多种常见格式文件在线转码和在线浏览！免费且不限账户容量，不限文件流量！">
    <link rel="icon" href="/assets/favicon-3efb78e6.ico">
    <link rel="stylesheet" href="/assets/uni.17e682f8.css">
    <link rel="icon" type="image/png" href="/assets/logo-b8e95bd0.png" alt="易易二维码网站Logo">
    <script>
        var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
            CSS.supports('top: constant(a)'))
        document.write(
            '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
            (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>

    <script type="module" crossorigin src="/assets/index-56098b2a.js"></script>
    <link rel="stylesheet" href="/assets/index-20439fd3.css">
</head>
<body>
<div id="app"><!--app-html--></div>
<div style="height: 50px;overflow: hidden;display: flex;position: fixed;top: 0px">
    <h1 >文件二维码生成器</h1>
    <div class="jiaocheng" >
        <div class="container">
            <div style="display: flex">
                {foreach $data as $key=>$vo }
                <div class="jc_liebiao" style="height: 200px">
                    <div class="jc_wenzhang">
                        <div class="jc_biaoti">
                            <a href="/index.php/neirong/{$vo.key}" title="{$vo.title}">
                                <span title="{$vo.title}">{$vo.title}</span>
                            </a>
                            <span>发布时间：{$vo.update_time}</span>
                        </div>
                        <div class="jc_jianjie text-over-twolineBody" style="width: 200px">
                            {$vo.description|raw}
                        </div>
                    </div>
                    <div class="jc_fenlei">
                        <div class="jc_fenleibiaoti">
                            <a href="/index.php/neirong/{$vo.key}" title="{$vo.sub_title}">
                                <span class="text-over-twolineBody" style="width: 200px">{$vo.sub_title}</span>
                            </a>
                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
            <div style="width: 100%;">
                <div style="width: 100%;display:flex;justify-content: center;margin-top: 20px">
                    <div style="width: 80%;border-radius: 2px;display: flex;justify-content: space-between;background: white">
                        <div style="width: 40%;padding: 10px">
                            <img style="width: 250px;height: 50px;"
                                 src="">
                            <div style="font-size: 12px;margin-top: 8px">
                                我们努力把文件码功能做得更加简单
                            </div>
                            <div style="font-size: 12px;margin-top: 5px">
                                让每个人和组织都可以轻松使用
                            </div>
                            <div style="display: flex;margin-top: 30px">
                                <div style="width: 80px">
                                    <img style="width: 80px;height: 80px;" alt="微信小程序"
                                         src="">
                                    <div style="font-size: 12px;display: flex;justify-content: center">微信小程序</div>
                                </div>
                                <div style="width: 80px;margin-left: 10px">
                                    <img style="width: 80px;height: 80px;" alt="微信公众号"
                                         src="">
                                    <div style="font-size: 12px;display: flex;justify-content: center">微信公众号</div>
                                </div>
                            </div>
                        </div>
                        <div style="width: 60%;padding: 10px">
                            <div style="font-size: 12px;font-weight: bold;display: flex;align-items: center">友情链接</div>
                            <div style="border-bottom: 1px solid #c8c9cc;width: 100%;margin-top: 5px;margin-bottom: 20px"></div>
                            <div style="display: flex">
                                {foreach $friendshipOnt as $key=>$vo }
                                {eq name="$vo.go_status" value="2"}
                                <a href="{$vo.url}" style="padding: 5px" title="{$vo.title}">
                                    <div style="margin-right: 10px;;display: flex;align-items: center">
                                        <span style="color: black;font-size: 12px">{$vo.title}</span>
                                    </div>
                                </a>
                                {else/}
                                <a href="{$vo.url}" style="padding: 5px" title="{$vo.title}" rel="nofollow">
                                    <div style="margin-right: 10px;;display: flex;align-items: center">
                                        <span style="color: black;font-size: 12px">{$vo.title}</span>
                                    </div>
                                </a>
                                {/eq}
                                {/foreach}
                            </div>
                            <div style="display: flex">
                                {foreach $friendshipTwo as $key=>$vo }
                                {eq name="$vo.go_status" value="2"}
                                <a href="{$vo.url}" style="padding: 5px" title="{$vo.title}">
                                    <div style="margin-right: 10px;;display: flex;align-items: center">
                                        <span style="color: black;font-size: 12px">{$vo.title}</span>
                                    </div>
                                </a>
                                {else/}
                                <a href="{$vo.url}" style="padding: 5px" title="{$vo.title}" rel="nofollow">
                                    <div style="margin-right: 10px;;display: flex;align-items: center">
                                        <span style="color: black;font-size: 12px">{$vo.title}</span>
                                    </div>
                                </a>
                                {/eq}

                                {/foreach}
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;display:flex;align-items: center;justify-content: center;margin-top: 50px;padding-bottom: 50px">
                    <div style="width: 80%;display: flex;justify-content: center">
                        <div style="display: flex">
                            {foreach $config.tool_icp_config as $key=>$vo }
                            <div style="display: flex;align-items: center;margin-right: 15px">
                                <div style="margin-left: 10px;font-size: 12px;color: #909399">
                                    <a href="{$vo.path}" rel="nofollow">
                                        {$vo.title}
                                    </a>
                                </div>
                            </div>
                            {/foreach}
                            <a href="" title="文件码sitemap">
                                <div style="display: flex;align-items: center;margin-right: 15px">
                                    <div style="margin-left: 10px;font-size: 12px;color: #909399">
                                        文件码Sitemap
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="background-color: white;position: absolute;top: 0px;width: 100%;height: 50px"></div>
</div>
</body>
<style>
    .text-over-twolineBody {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
    }
</style>
</html>

这样就可以兼容vue的开发便利，又可以进行vue的seo模板静态渲染。两全其美，唯一不足就需要vue和服务器端放在同一个服务器。无法做到前后端分离。

谷雨的汤姆猫
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端开发规范.pdf
10-29
Vue前端开发规范
Vue-cli3项目seo优化--静态化打包（动态改变页面Titl、keyWords、description）
m0_46387873的博客
08-30 1638
Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description） 文章目录Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）一 、首先需要两个插件，先安装下来 `prerender-spa-plugin` `vue-meta-info`二 、新建文件三 、给需要的页面添加自己的标题描述语 其实前端可以做的seo操作很少，作用也不大，Vue也有自己专门的一套针对可以seo的框架，这次我说的方法是在不改框架的
vue做seo优化
热门推荐
kang_k的博客
09-03 6万+
前言 先了解什么是seo？ 再了解搜索引擎蜘蛛的工作原理？ seo为啥对vue单页面不友好? vue项目怎么做seo优化？ prerender-spa-plugin怎么使用，以及它的工作原理 什么是seo？ SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码...
vue使用prerender预渲染配合vue-meta实现单页面实现SEO优化
weixin_42971933的博客
06-11 1709
公司项目在已在开发中的情况下通知需要做SEO优化。因为项目使用的是vue做的单页面，顿时人都不好了，只好网上搜罗出来一些配置（其实是另一个伙伴他做的，但是他要走了，工作交接给我， 我需要掌握，所以也算是偷来一门技艺吧）。 交代一下：选用的是prerender-spa-plugin插件配合vue-meta完成 ...
手把手教你做VUE单页应用SEO优化
qq_31565213的博客
04-07 2310
前言 最近写了个门户网站使用vue做的，不可避免的遇到了SEO方面相关的问题，下面将我采用的解决方案贴出来供大家参考 主流的方案 1.SSR服务器渲染； 2.静态化； 3.预渲染prerender-spa-plugin； 第一点推荐先去官网了解清楚一下，这里不是使用的这个方案。我的是已经完成的vue应用，再去采用SSR方案就有点不太现实了，如果非要使用SSR的话，建议在着手开发之前，就了解清楚。 第二点静态化，直接放弃。手写静态代码太难受了。 第三点prerender-spa-plugin...
vue配置页面预渲染（将页面静态化，便于seo读取）
weixin_43931617的博客
04-03 7897
在项目中安装prerender-spa-plugin$ npm install --save prerender-spa-plugin 找到bulid目录下的webpack.prod.conf.js文件，在其中写入以下内容： 在文件的上方写入：const PrerenderSpaPlugin = require('prerender-spa-plugin') 找到webpackConfig...
前端vue项目实现伪静态 vue SEO优化
baiyang_428的博客
08-12 1936
前端vue项目实现伪静态 vue SEO关键词优化
什么是seo、vue中如何优化seo ？
day day up
10-26 2263
SEO在国内主要运用于百度，在国内我们做seo也主要针对百度，我们的seo技术人员是通过一些手段将一些搜索量非常高的关键词优化到百度的快照位置，使得用户在百度上搜索这类关键词的时候，能快速有效的找到这类优质的网站。SEO简单的说就是通过一系列的手段，使得网站的代码以及内容都符合相关搜索引擎的规则，让搜索引擎有效的抓取内容，使得网站的内容能够通过这些搜索引擎，展现到用户面前。这些搜索引擎都可以抓取网站的内容，而seo的作用就是让网站的内容能够被这些搜索引擎抓取并且被释放出来。
vue，生成静态页面 seo优化
qq_36249659的博客
07-01 4318
https://www.jb51.net/article/150473.htm
vue.js做seo的方法
11-28 1420
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。需要一个接口返回所有id，然后打包时遍历id，打包到本地，如果某个商品修改了或者下架了，又要重新打包，数量多的情况下打包也是非常慢的，非常不现实。如果构建大型网站，如商城类，别犹豫，直接上SSR服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
Vue.js - 基于 Vue SEO 四种方案
牧码的博客
10-19 1127
前言：众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，下面列出几种最近研究和使用过的SEO方案，SSR和静态化基于Nuxt.js来说。 1.SSR服务器渲染； 2.静态化； 3.预渲染prerender-spa-plugin； 4.使用Phantomjs针对爬虫做处理。 1、SSR服务器渲染 关于服务器渲染：Vue官网介绍，对Vue版本有要求，对服务...
使用Vue.js开发的前端项目实战案例分享
最新发布
01-20
使用Vue.js开发的前端项目实战案例分享使用Vue.js开发的前端项目实战案例分享使用Vue.js开发的前端项目实战案例分享使用Vue.js开发的前端项目实战案例分享使用Vue.js开发的前端项目实战案例分享使用Vue.js开发的前端...
vue:使用vue开发前端网站项目
05-17
Vue 第一步：git clone
大学生静态网页设计期末作业基于vue的静态博客网页源码（高分项目）.zip
06-18
大学生静态网页设计期末作业基于vue的静态博客网页源码（高分）。课程设计高分项目，亲测95分以上。期末大作业必备 项目特点 UI设计参考hexo-theme-butterfly，使用element-plus重构，美观简洁。 使用webpack5搭建...
Vue.js前端开发 PDF
05-30
前端三大框架之一：Vue.js前端开发 PDF格式，有需要的朋友可以自行下载
vue单页面通过prerender-spa-plugin插件进行SEO优化
ChpeShy的博客
08-07 1万+
prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化，如果是后台请求的数据需要做SSR处理，例如商品详情页，可使用Vue SSR，详细参考我的另一篇博客：VueSSR的一些理解和详细配置 一、前言 之前虽然一直有看过SEO相关的文章，但是一直没去实践过，然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址：火石创造官网 ...
Vue开发网站seo优化方法
龘
05-06 2759
因为用了vue等js的数据绑定机制来展示页面数据，爬虫获取到的html是模型页面而不是最终数据的渲染页面，搜索引擎是不回去执行请求到的js。vue的项目都是ajax请求数据，引擎爬虫进入页面获取不到文字内容，现在大多数解决方案是不采用ajax渲染数据，而是采用server端渲染，也就是所谓的SSR。 目前基于vue的方案是Nuxt.js，同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前，页面上是有数据可让爬虫进行爬取 方法一、利用prerender-spa-plugi.
vue开发项目使用seo
05-28
要实现 Vue 开发项目的 SEO，可以考虑以下几点： 1. 使用服务器端渲染（SSR）：这是最佳实践，因为它可以让搜索引擎爬虫直接获取到渲染后的 HTML 内容。 2. 使用预渲染（Prerendering）：这种方式可以在构建时生成静态 HTML 文件，然后将这些文件提供给搜索引擎爬虫。常见的预渲染工具有 Prerender SPA Plugin 和 Vue-CLI 的 Prerendering 插件。 3. 动态设置 meta 标签：在 Vue 组件中通过代码动态设置 meta 标签的内容，包括 title、description、keywords 等元数据，这样可以让搜索引擎更好地理解页面内容。 4. 合理使用路由：对于单页应用，路由是非常重要的一部分。合理设置路由可以让搜索引擎更好地抓取和理解页面内容。 5. 提供 sitemap.xml 文件：在 Vue 项目中提供 sitemap.xml 文件可以帮助搜索引擎更好地发现和抓取网站中的所有页面。 总之，要想让 Vue 开发的项目更好地支持 SEO，需要从多个角度进行考虑和实践。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值