壹起航：单页网站优化要如何做？

我们谈到单页网站优化（yiqihang.cn），我们需要首先了解什么是单页网站。单页网站，顾名思义，就是只有一个页面的网站。首页是内容页，在网站结构中不会有进一步的内容。对于很多浏览者来说，面对这样的网站，他们往往不知道从哪里开始，因为单页网站进行SEO优化的缺点是站内优化的可操作性接近于零。因此，对单页进行SEO也是非常重要的。然而，对于单页网站，SEOs有好有坏。作为SEO人员，你需要清楚地了解，这样你才能在优化过程中避免那些不好的事情。那么，如何优化一个单页网站的SEO呢?

1. 注意TDK的写作
由于页面是单一的，你需要更多的关注网站的标题，关键词和描述。在标题上，要简洁明了，包括主要关键词，整篇文章可以总结为一句话;在描述方面，用一句话或一小段文字就可以提炼出文章的精髓，内容比标题更详细;关键词与内容相关。单词，多个关键字用逗号分隔。

2. 多样化的外链锚文本
在外链建设中，避免单一内容，容易造成网站的过度优化，我们都知道网站的过度优化不利于网站优化。

3.网站标签的使用
合理使用网站标签可以使搜索引擎更好地了解网站的层次性内容，如h标签、强标签等。

4.代码优化
CSS和JS的网站优化尽量使用外部导入，使网页代码更加简洁。如果你可以使用CSS，尽量不要使用JS。毕竟，JS对搜索引擎并不友好。

5.合理设置锚点
有一些单一的页面为了展示很多产品功能，页面会被拉长很长，不利于用户浏览，用户体验也不好。如果在单页网站上设置了合理的锚点，用户只需点击即可快速到达所需的内容区域。

6.避免所有的照片
如果一个单页网站为了提高视觉效果而使用更多的图片，会导致网站上的文字内容太少，不利于搜索引擎对网站的抓取和索引。

7.内容为王
我们之前引用过百度百科全书的例子，作为一个单页网站，用户的所有需求都被尽可能完整的展示出来，解决用户的麻烦是单页网站的关键。

以上就是单页网站优化需要做的内容，希望对大家有所帮助。

PA依赖于HTML 5 History API。使用mPulse的SPA设置，我们可以跟踪软导航。软导航是指在浏览器上更改URL但实际上并未重新加载整个页面。我试图了解单页应用程序的工作原理，并通过CSS-Tricks使用HTML5 History API。在本文中，解释了HTML5 History API的概念。

通常，当您从一个URL导航到另一个URL时，浏览器会重新加载整个页面。但是，您可能希望只更改页面的某些部分。这可以通过使用AJAX请求来完成。但是，如果只使用AJAX，则页面的URL会保持不变。因此，如果需要共享此特定视图，则无法执行此操作。这就是History API的用武之地。

了解 History API

History API能够操纵URL而不强制浏览器加载整个页面。它提供了两个主要功能：history.replaceState和history.pushState。

history.replaceState：这会更改URL，也会更改浏览器中的导航流。因此，用户点击后退按钮将不会返回到此SPA页面的原始视图，而是被重定向到它们来自的页面。
history.pushState：此方法将替换URL并记录当前视图信息。因此，用户点击后退按钮将返回到SPA页面的原始视图。

SPA对性能测试提出了挑战。在常规网页上，浏览器基于NavTiming API收集大量与性能相关的信息。但是，当SPA导航发生时，页面不会真正重新加载，这导致浏览器不会重建DOM。因此，它无法报告与导航相关的性能。

要解决这个问题，像mPulse这样的Real User Monitoring（RUM）解决方案依赖于历史API。通过观察对此插件的更改，它能够检测导航，然后测量时序信息。

测试SPA页面

使用CSS-Tricks网站上的Ghostbusters SPA代码创建了一个虚拟网站。在他们的例子中，有以下内容：

主页：https：//css-tricks.com/examples/State/
SPA导航：

https://test-woocommerce.akshayranganath.com/peter.php
https://test-woocommerce.akshayranganath.com/ray.php
https://test-woocommerce.akshayranganath.com/egon.php
https://test-woocommerce.akshayranganath.com/winston.php

实际上，当用户首次登陆主页时，它具有常规的导航布局。这在mPulse中称为SPA Hard。本网站子部分中的所有其他导航称为SPA软导航。如果用户直接使用URL，则会导致浏览器正常加载页面并将其作为SPA硬导航事件进行检测。

检测结果

当我设置测试时，基于8个视图，中间页面加载时间显示为15秒。这包括SPA（SPA-Soft）和非SPA（SPA-Hard）定时信息。

当我看一下硬导航的性能时，4个视图的页面加载时间现在跳到17.4秒。

如果我现在只过滤软导航，4个视图的页面加载时间下降到129毫秒。

如果我们从未使用过软导航，则可能会错误地将网站性能误解为超过17秒。实际上，这个时间包含了加载SPA框架的时间。如果没有软导航调用的信息，您可能会误解网站上的访问量。在这种情况下，用户可以加载主页并访问其他四个子页面。如果没有SPA跟踪，RUM分析可能会向用户显示只访问过一个页面。

总结

如果您拥有基于SPA的网站，可能会丢失关键性能信息或数据。如果您已将页面设计为使用SPA框架，请启用SPA跟踪。混合SPA和非SPA导航可能会产生没有作用的信息。另一方面，缺少SPA导航会降低参与度和转化率指标。因此，需要仔细检测其测量结果以获得整体图像。

.什么是puppeteer？

Puppeteer是一个Node库，它提供了一个高级API来通过DevTools协议控制Chromium或Chrome。可以使用Puppeteer来自动化完成浏览器的操作，官方给出的一些使用场景如下：

生成页面PDF
抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））
自动提交表单，进行 UI 测试，键盘输入等
创建一个时时更新的自动化测试环境，使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中执行测试
捕获网站的timeline trace，用来帮助分析性能问题
测试浏览器扩展

与Selenium比较

说起浏览器自动化操作，很容易联想到另一个自动化框架：Selenium。但是Puppeteer与Selenium使用的协议却不一样！ Puppeteer使用DevTools协议与Chome（或Chromium）进行交互，而Selenium却使用WebDriver协议与浏览器进行交互。另外，他们各自的API在使用风格上也相差很多。

2.代码工程

实验目的：

实现html生成图片

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>springboot-demo</artifactId>
        <groupId>com.et</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>Puppeteer</artifactId>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-autoconfigure</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

    </dependencies>
</project>

controller

package com.et.puppeteer.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

@Controller
public class HelloWorldController  {

   @RequestMapping(value="/ftest")
   public String test(Model model) {
      model.addAttribute("msg", "use freemarker/  puppeteer to implement html generate image");
      model.addAttribute("img", "https://img1.baidu.com/it/u=3764156347,3722190225&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=419");
      return "f01";
   }


}

模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>freemarker</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
</head>
<body style="font-size: 20px;">
<div style="display: flex;
        align-items: flex-start;
        border: 1px solid darkred;
        box-shadow: 1px 2px 1px 5px #cccccc;"
>
    <div style="display:flex;flex-shrink: 0;width:100px;">words:</div> <h1>${msg}</h1>
</div>
<div style="display: flex;align-items: center;margin: 10px 0px;">
    <div>image: </div><img style="width: 150px;height: 150px;" src="${img}" />
</div>
<#--<div style="display: flex;align-items: flex-end;">-->
barcode: <svg id="barcode"></svg>
<#--</div>-->
</body>
<#--load js-->
<script>
    let e=document.getElementById("barcode");
    JsBarcode(e, "Hi world!");
</script>
</html>

html转图片

安装puppeteer

npm i puppeteer

获取html并生成图片

// index.js
const puppeteer=require('puppeteer');
async function test () {
    const browser=await puppeteer.launch();
    const page=await browser.newPage();
    await page.setViewport({
        width: 960,
        height: 760,
        deviceScaleFactor: 1,
    });

    // await page.setContent(imgHTML);

    await page.goto('http://localhost:8088/ftest');

    await page.evaluate(()=> {
        let e=document.getElementById("barcode");
        JsBarcode(e, "Hi world!");
    });

    await page.screenshot({path: "./example.png"});
    await browser.close();
}
test()

To capture a full page, we need to add a fullPage:true option for page.screenshot()

  await page.screenshot({
    path: 'example.png',
    fullPage: true
  });

3.测试

启动Spring Boot程序
执行node index.js

4.引用

https://dev.to/makepad/take-a-screenshot-with-puppeteer-mo
http://www.liuhaihua.cn/archives/711156.html
https://pptr.dev/

在线咨询

上一篇：国内就能买到，全世界最红的9个家居好店
下一篇：个人有这些情形，将被责令退回医保基金、暂停医疗费用联

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商