SEO之框计算和One-box

DTcode7

于 2024-08-21 02:26:17 发布

阅读量168

点赞数 2

分类专栏： HTML网站开发文章标签： HTML 前端 web seo 网页开发

本文链接：https://blog.csdn.net/black_cat7/article/details/141371988

版权

HTML网站开发专栏收录该内容

408 篇文章 4 订阅

订阅专栏

在搜索引擎优化（SEO）领域，框计算和One-box是两个重要的概念。框计算是指搜索引擎在搜索结果页面上直接呈现某些类型的查询答案，而One-box则是指在搜索结果顶部或特别位置展示的答案或信息块。这两种技术不仅影响着网站的可见性，还对用户体验有着直接的影响。本文将深入探讨框计算和One-box的概念，解释其工作原理，并提供实际的例子和代码示例来帮助前端开发者更好地理解并优化自己的网站以适应这些特性。

基本概念和作用

什么是框计算？

框计算是搜索引擎的一项技术，它可以识别用户的查询意图，并直接在搜索结果页面上呈现答案。这意味着用户不需要点击进入网站就可以得到他们想要的信息。框计算通常应用于天气、时间、计算器、货币转换等常见查询场景。

什么是One-box？

One-box是指搜索引擎在搜索结果页面的顶部或特别位置展示的答案或信息块。这些信息块通常是与用户的查询高度相关的内容，如新闻、视频、地图等。One-box的目的是为了提供即时的信息，减少用户寻找答案的时间。

框计算和One-box的作用

提升用户体验：用户可以直接在搜索结果页面获取答案，无需点击进入网站。
优化搜索结果：搜索引擎可以更加精准地满足用户的需求。
影响网站流量：如果网站内容被框计算或One-box引用，可能会减少点击量。

如何优化网站以适应框计算和One-box

示例一: 提供结构化数据

结构化数据是搜索引擎理解网页内容的关键。通过使用Schema.org标记，可以向搜索引擎提供更丰富的信息，从而增加被框计算或One-box引用的机会。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Website</title>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Organization",
      "name": "Example Corporation",
      "url": "https://www.example.com",
      "logo": "https://www.example.com/logo.png",
      "sameAs": [
        "https://www.facebook.com/example",
        "https://twitter.com/example"
      ]
    }
    </script>
</head>
<body>
    <h1>Welcome to Example Website</h1>
    <p>This is some content that could be marked up with structured data.</p>
</body>
</html>

示例二: 提供准确的元数据

元数据（如标题、描述和关键词）对于搜索引擎来说非常重要。确保这些元数据准确无误，可以帮助搜索引擎更好地理解网页内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Website | Learn About Weather</title>
    <meta name="description" content="Find the latest weather updates and forecasts for your area.">
    <meta name="keywords" content="weather, forecast, updates">
</head>
<body>
    <h1>Today's Weather Forecast</h1>
    <p>Here you can find the latest weather information for your city.</p>
</body>
</html>

示例三: 使用Open Graph协议

Open Graph协议可以帮助搜索引擎更好地呈现网页的预览图。这对于社交媒体分享和One-box的展示尤为重要。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Website</title>
    <meta property="og:title" content="Example Website">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.example.com">
    <meta property="og:image" content="https://www.example.com/image.jpg">
    <meta property="og:description" content="A website about various topics including technology and science.">
</head>
<body>
    <h1>Welcome to Example Website</h1>
    <p>This is some content that could be shared on social media.</p>
</body>
</html>

示例四: 使用Twitter Cards

Twitter Cards是另一种帮助搜索引擎和社交媒体平台更好地展示网页信息的方法。通过添加适当的元数据，可以确保卡片在Twitter上正确显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example Website</title>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@example">
    <meta name="twitter:title" content="Example Website">
    <meta name="twitter:description" content="A website about various topics including technology and science.">
    <meta name="twitter:image" content="https://www.example.com/image.jpg">
</head>
<body>
    <h1>Welcome to Example Website</h1>
    <p>This is some content that could be shared on Twitter.</p>
</body>
</html>

示例五: 使用AMP (Accelerated Mobile Pages)

AMP是一种开放源代码框架，旨在提供快速加载的移动页面。对于搜索引擎而言，AMP页面通常更容易被One-box引用。

<!DOCTYPE html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <title>Example AMP Page</title>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <style amp-custom>
    body {
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333;
    }
    p {
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <h1>Welcome to Example AMP Page</h1>
  <p>This is an example of an AMP page. It loads very quickly and is optimized for mobile devices.</p>
</body>
</html>

不同角度的功能使用思路

示例六: 利用地理定位信息

搜索引擎可能会使用用户的地理位置信息来提供更相关的结果。确保你的网站能够提供基于位置的服务，可以增加被框计算引用的机会。

// JavaScript示例：检测用户位置并显示相关信息
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function showPosition(position) {
  const lat = position.coords.latitude;
  const lng = position.coords.longitude;
  // 使用API获取当前位置的天气信息
  fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${lat},${lng}`)
    .then(response => response.json())
    .then(data => {
      console.log(data.current.condition.text);
      // 显示天气信息
      document.getElementById("weather").innerHTML = data.current.condition.text;
    })
    .catch(error => {
      console.error('Error fetching weather data:', error);
    });
}

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}

示例七: 利用实时数据

搜索引擎可能会优先展示具有实时数据的内容。确保你的网站能够提供最新的信息，可以增加被One-box引用的机会。

// JavaScript示例：获取实时股票价格
function fetchStockPrice(stockSymbol) {
  fetch(`https://api.example.com/stock-price/${stockSymbol}`)
    .then(response => response.json())
    .then(data => {
      console.log(data.price);
      // 显示股票价格
      document.getElementById("stock-price").innerHTML = data.price;
    })
    .catch(error => {
      console.error('Error fetching stock price:', error);
    });
}

实际工作中的技巧分析

技巧一: 关注搜索引擎的更新

搜索引擎的算法经常更新，因此需要时刻关注这些更新，以确保网站内容符合最新的标准。

技巧二: 提供高质量内容

无论何时，提供高质量、有价值的内容都是获得良好SEO排名的关键。确保你的内容是原创的、有用的，并且针对特定的受众。

技巧三: 优化网页加载速度

网页加载速度对于SEO非常重要。确保你的网站加载速度快，可以提高用户体验，并增加被框计算或One-box引用的机会。

技巧四: 使用HTTPS

HTTPS协议可以提高网站的安全性，并且已经被证实对SEO有益。确保你的网站使用HTTPS。

技巧五: 进行关键词研究

了解用户在搜索时使用的关键词，并确保你的内容包含这些关键词。这有助于提高网站在搜索引擎中的可见性。

自行拓展内容

示例八: 使用微数据

除了Schema.org标记之外，还可以使用其他形式的微数据来提供更多信息。例如，使用微格式（Microformats）来标记事件、产品等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Details</title>
</head>
<body>
    <article itemscope itemtype="http://schema.org/Event">
        <h1 itemprop="name">Tech Conference</h1>
        <p>Date: <time itemprop="startDate" datetime="2023-09-01T10:00:00+08:00">September 1, 2023 at 10:00 AM</time></p>
        <p>Location: <span itemprop="location">Conference Hall, City Center</span></p>
    </article>
</body>
</html>

示例九: 使用RDFa

RDFa是一种标记格式，可以嵌入到HTML文档中，用于提供语义信息。这可以帮助搜索引擎更好地理解网页内容。

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="UTF-8">
    <title>Product Page</title>
    <meta property="og:title" content="Product Page">
    <meta property="og:type" content="product">
    <meta property="og:url" content="https://www.example.com/product">
    <meta property="og:image" content="https://www.example.com/image.jpg">
    <meta property="og:description" content="A product page about a new gadget.">
    <meta property="og:price:amount" content="199.99">
    <meta property="og:price:currency" content="USD">
</head>
<body>
    <h1>A New Gadget</h1>
    <p>Price: <span property="og:price:amount">$199.99</span></p>
</body>
</html>

示例十: 使用JSON-LD

JSON-LD是一种轻量级的格式，可以用来提供结构化数据。它是Schema.org推荐的一种标记方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Details</title>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Event",
      "name": "Tech Conference",
      "startDate": "2023-09-01T10:00:00+08:00",
      "location": {
        "@type": "Place",
        "name": "Conference Hall",
        "address": {
          "@type": "PostalAddress",
          "streetAddress": "123 Main St",
          "addressLocality": "City Center",
          "addressRegion": "NY",
          "postalCode": "10001",
          "addressCountry": "US"
        }
      }
    }
    </script>
</head>
<body>
    <h1>Tech Conference</h1>
    <p>Date: September 1, 2023 at 10:00 AM</p>
    <p>Location: Conference Hall, City Center</p>
</body>
</html>

结论

通过上述例子和技巧，我们可以看到，框计算和One-box对于提高网站的可见性和用户体验有着重要作用。作为前端开发者，我们应该积极采用结构化数据、提供准确的元数据、优化网页加载速度等方法来确保我们的网站能够适应这些特性。此外，还需要密切关注搜索引擎的更新和技术趋势，以确保我们的网站能够获得最佳的SEO效果。

希望这篇文章能够帮助你在前端开发中更好地理解和应用框计算和One-box相关的技术和技巧。如果你有任何问题或想要分享自己的经验，请随时留言交流。

欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

专栏系列（点击解锁） 学习路线(点击解锁） 知识定位
《微信小程序相关博客》持续更新中~ 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》持续更新中~ AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。
通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》 Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》持续更新中~ 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》持续更新中~ Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》持续更新中~ SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》持续更新中~ 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》持续更新中~ 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》持续更新中~ 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》持续更新中~ 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》持续更新中~ 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！

专栏系列（点击解锁）	学习路线(点击解锁）	知识定位
《微信小程序相关博客》	持续更新中~	结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等
《AIGC相关博客》	持续更新中~	AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结
《HTML网站开发相关》	《前端基础入门三大核心之html相关博客》	前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识
《前端基础入门三大核心之JS相关博客》	前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心
《前端基础入门三大核心之CSS相关博客》	介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页
《canvas绘图相关博客》	Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化
《Vue实战相关博客》	持续更新中~	详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅
《python相关博客》	持续更新中~	Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具
《sql数据库相关博客》	持续更新中~	SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能
《算法系列相关博客》	持续更新中~	算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维
《IT信息技术相关博客》	持续更新中~	作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识
《信息化人员基础技能知识相关博客》	无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方
《信息化技能面试宝典相关博客》	涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面
《前端开发习惯与小技巧相关博客》	持续更新中~	罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等
《photoshop相关博客》	持续更新中~	基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结
日常开发&办公&生产【实用工具】分享相关博客》	持续更新中~	分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具

DTcode7

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
SEO之框计算和One-box

框计算是搜索引擎的一项技术，它可以识别用户的查询意图，并直接在搜索结果页面上呈现答案。这意味着用户不需要点击进入网站就可以得到他们想要的信息。框计算通常应用于天气、时间、计算器、货币转换等常见查询场景。One-box是指搜索引擎在搜索结果页面的顶部或特别位置展示的答案或信息块。这些信息块通常是与用户的查询高度相关的内容，如新闻、视频、地图等。One-box的目的是为了提供即时的信息，减少用户寻找答案的时间。
复制链接

扫一扫