Flutter 網路搜尋引擎SEO優化友好

原文

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