乐趣区

关于flutter:Flutter-网络搜索引擎SEO优化友好

jiezi

原文

https://medium.com/mindful-en…

参考

  • https://pub.dev/packages/seo_…

注释

目前，在开发挪动和网络应用程序时，Flutter 将成为一种风行趋势。咱们都晓得桌面版本正处于 beta 测试阶段，并且在 Flutter web 的稳固版本中被淘汰。咱们都晓得，当互联网呈现在图片中时，指标受众就会大得多(世界范畴内)。咱们的网站不能很容易地达到用户只有输出和搜寻到一个搜索引擎，咱们失去的后果。当网站是为企业和其他人建设的时候，索引很重要。

当咱们心愿通过减少搜寻索引来倡议用户抉择咱们的利用时，搜索引擎优化是最重要的。

是否可能与 Flutter 网络搜索引擎优化？

这个问题在开发网络应用程序之前或之后呈现在我的脑海中。对 web 应用程序更好的 SEO 反对是 Flutter 开发者下一个版本的指标。

这里是我的网站后，使其 SEO 敌对的后果

以前:

之后:

搜索引擎优化

搜索引擎优化搜索引擎是一个过程，它能够进步网站流量的品质和数量，使网站或网页从搜索引擎取得流量。搜索引擎优化的指标是无偿流量，而不是间接流量或付费流量。

什么是 seo 敌对型？

建设一个 seo 敌对的网站意味着谷歌和其余搜索引擎能够高效地抓取网站上的每个页面，无效地解释内容，并将其索引到数据库中。一旦编入索引，他们就能够依据用户搜寻的主题向用户提供最相干、最有价值的网页。

我遵循的步骤，使网站 SEO 敌对

  • 题目的长度至多应该是 207 个字符
  • 形容长度起码 690 个字符将是无益的
  • 须要在 index.html 中增加关键字 meta（关键字应依据页面内容正确，并且须要增加至多 10 个关键字以存档良好的 SEO）
  • 须要减少一个挪动优化的观点
  • 包装每个文本、图像、链接 ***\_seo_render 感谢上帝 *** 包将有助于使网站 SEO 敌对。它是用来渲染文本，链接，图像小部件作为 HTML 元素 SEO 的目标。(仍在开发中)\_
  • 语义小工具也能够帮忙使网站 seo 敌对

实用于 seo 的 Meta 标签

凋谢图表标签

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".

og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.

og:image - An image URL which should represent your object within the graph

.og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

在 meta 标签中有许多可用的属性，你能够在这里找到 here

应用 seo 渲染库渲染文本小部件作为 HTML 元素

  • 首先，咱们须要增加一个RouteObserver 从导航堆栈中弹出时主动删除 Html 元素MaterialApp
navigatorObservers: <RouteObserver<ModalRoute<void>>[routeObserver],
  • 将这个依赖项增加到pubspec.yaml

pubspec.yaml

  • 从 Pub 取包裹
flutter packages get
  • 所有的文本，图片和链接都应该像这样被扭曲

home_page.dart

  • 只有传递你的 Text/RichText 小工具和一个选项 RenderController() 可用于在可滚动内容 / 更改地位的状况下刷新内容(地位)
  • 须要通过 child : Widget, anchorText : String, link : String & 可选的 RenderConroller()
  • 须要通过 child : Widget, link : String, alt : String & 可选的 RenderConroller()

语义学

这个小部件应用小部件的含意形容对小部件树进行正文。

可拜访性工具、搜索引擎和其余语义剖析软件应用它来确定应用程序的含意。

这种语义将为挪动环境中的可拜访性服务提供信息。

  • Semantics 语义学 当你只想形容一个特定的小部件
  • MergeSemantics 当你想要形容一组组件的时候。在这个例子中，不同的Semantics 语义学 在这个节点的子树中定义的one single Semantics 一个繁多的语义学。这可能是十分有用的从新组语义，然而，在语义抵触的状况下，后果可能是荒诞的

语义的属性:

在语义学中有许多可用的属性，比方,

  • label: 它提供了一个小部件的文本形容，是根本的语义信息
  • container: 此节点是否在语义树中引入新的语义节点(SemanticsNode)。它不能用下层语义，即独立语义进行拆散或合并
  • explicitChildNodes : 默认值为 false，示意是否强制显示子窗口小部件的语义信息。它能够了解为决裂语义学
  • scopesRoute: 如果它不是空的，则无论节点是否对应于子树的根，子树都应该申明路由名称。通常 explicitChildNodes 将其设置为 true，并在路由跳转中应用它，例如Page jumps,Dialog, BottomSheet, PopupMenu 弹出局部

这里显示了语义的一些属性,

semantics_demo.dart

如果心愿调试应用程序的语义，能够将 MaterialApp 的 showSemanticsDebugger 属性设置为 true。这将迫使 Flutter 生成一个笼罩可视化的语义树。

搜索引擎渲染器 | Flutter Package

https://pub.dev/packages/seo_…

© 猫哥

  • https://ducafecat.tech/
  • https://github.com/ducafecat
  • 微信群 ducafecat
  • b 站 https://space.bilibili.com/40…

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

退出移动版