Wordpress SEO

SEO的現代JavaScript入門

2020年2月14日

[ad_1]

SEO的現代JavaScript入門

現在，比以往任何時候都更加重要了解SEO的JavaScript。

這是馬克·威廉姆斯·庫克的恐怖故事共享在Linkedin上。

「開發人員堅稱他們知道自己在做什麼，並且「 Google可以為內容編製索引」。結果是人員被解僱，從而給企業造成後續損失。」

現在，假設您是該公司的SEO或進行向JavaScript過渡的類似SEO。

在掌握了豐富的JavaScript知識之後，您可以為他們提供實驗數據，毫無疑問，這些數據表明，如果不進行任何調整，他們就會遇到很大的問題。

你會成為一個大英雄。

在本指南中，我們將在編寫簡單的單頁應用程序並使用結構化數據對其進行優化的同時，學習現代的JavaScript構建塊。

這是計劃：

使用HTML5模板創建一個單頁應用。
使用ReactJs添加動態行為。
使用Chrome JavaScript調試器修復錯誤。
針對結構化數據優化應用程序。
使用結構化數據測試工具來驗證標記。
使用JavaScript動態生成JSON-LD標記。

我一直是SEO學習開發人員技能的堅定倡導者。

如果您花費大量時間做Python，則非常有用數據分析和自動化。

如果您必須處理越來越多的前端由ReactJ，AngularJ，VueJ等構建的客戶端，那麼JavaScript至關重要。

使用HTML5模板創建單頁應用

我們將使用 Visual Studio程式碼編寫並通過Chrome瀏覽器測試我們的JavaScript代碼。

我們將利用這個谷歌代碼實驗室展示了如何將結構化數據實現到簡單的配方頁面。

這是我們最終的結果。

SEO的現代JavaScript入門指南「 width =」 646「 height =」 1094「 size =」（最大寬度：646px）100vw，646px「 srcset =」 https://cdn.searchenginejournal.com/wp- content / uploads / 2020/02 / preview-5e447a25320bf.png 646w，https：//cdn.searchenginejournal.com/wp-content/uploads/2020/02/preview-5e447a25320bf-480x813.png 480w「 src =」 https：/ /cdn.searchenginejournal.com/wp-content/uploads/2020/02/preview-5e447a25320bf.png

通過代碼實驗室時，我們會發現一個單頁應用使用HTML5模板。我們將借用代碼，因此不必從頭開始編寫。

這是頁面的外觀。

這就是代碼的樣子。

這包括語義HTML5標籤喜歡

步驟2：我們需要添加JavaScript標記以導入ReactJs。

的 unpkg.com CDN是一項非常酷的CDN服務，它從NPM註冊表中獲取軟體包，並使軟體包中的任何文件可嵌入網站和應用程序中。

步驟3：我們將創建一個React組件以支持提交審閱功能。我們將按照教程中的說明將其包括在HEAD中。

步驟4：現在，我們來創建組件。

在本教程，建議您使用一些入門代碼。該代碼的目的是在頁面上添加一個「贊」按鈕。我們將做一些微小的修改以添加一個Submit Review按鈕。

「使用嚴格」；

const e = React.createElement;

class SubmitReview擴展了React.Component {

構造函數（道具）{

超級（道具）;

this.state = {提交：假};

}

render（）{

如果（this.state.submitted）{

返回「您已提交評論」；

}

返回e（

「按鈕」，

{onClick：（）=> {this.setState（{Submitted：true}）;

}

}，

‘提交評論’

）;

}

此代碼定義按鈕的行為。它保持按鈕狀態（已提交或未提交），當我們單擊按鈕時，它將顯示文本「您已提交評論」。

接下來，我們需要將其連接到相關的HTML代碼，並準備對其進行測試。

const domContainer = document.querySelector（「＃success」）;

ReactDOM.render（e（SubmitReview），domContainer）;

第一行選擇

ID為「成功」的元素。第二行顯示我們正在內部創建的React控制項

元件。

這是它的樣子。

利用React組件狀態

上面的這項工作很好地用於說明目的，但不是特別有用。

讓我們捕獲用戶名並進行審核。然後，在提交按鈕時將其顯示回來。

以下是完成此操作的相關更改。

構造函數（道具）{

超級（道具）;

this.state = {提交：false，名稱：「」，評論：「」};

}

在構造函數內部，我們定義了兩個以上的變數來保存名稱和複審。

如果（this.state.submitted）{

if（this.name ==「」）{

返回「您提交了$ {this.state.review}」；

}其他{

返回「 $ {this.state.name}」，表示您已提交$ {this.state.review}`；

}

在更改狀態檢查中，我們添加了一個控制流來呈現兩個替代文本。

一個（如果名稱留空），另一個（如果用戶提供名稱）。

請注意，我們使用的特殊字元串允許輕鬆地插值變數的值。為此，我們使用反引號分隔符`。

運算符$ {variable name}返回該變數的值。

返回e（’button’，

{onClick：（）=> {this.setState（{Submitted：true}）;

const name = document.querySelector（「＃name」）。value;

const review = document.querySelector（「＃message」）。value;

this.setState（{name：name，review：review}）;

}

}，

‘提交評論’

）;

這是最重要的變化。

我們首先在臨時變數中捕獲名稱的提交值，然後使用相關的CSS選擇器進行審查。

然後，我們使用對this.setState的調用來更改內部變數的狀態。

完成這些更改後，您可以看到提交審核按計划進行。

我們可以繼續添加更多功能來管理所有評論，等等。但是我們將在此處停止，以便我們可以向頁面添加結構化數據。

如何使用Chrome調試器識別和修復問題

當我最初將React組件腳本放在HTML HEAD中時，我在JavaScript控制台中遇到了這個錯誤。

當我單擊錯誤行report_review.js：38時，出現了有問題的代碼。

我懷疑選擇器不起作用，所以我設置了一個斷點（綠色突出顯示的第36行）並刷新了頁面。這將停止此行的頁面渲染，並啟動Chrome JavaScript調試器。我可以單擊以單行瀏覽並將滑鼠懸停在變數domContainer上，它為null，這意味著沒有值。

我在JavaScript控制台中輸入了選擇器代碼行，並且得到了預期的值。這裡發生了什麼？

為了了解問題，我們需要閱讀有關 HTML頁面的生命周期。

當瀏覽器載入頁面時，它會經歷不同的階段，並非頁面的所有部分都可用。頁面完全載入後，所有內容均可用。

我正在嘗試在尚未完全載入的BODY中查找內容的頭部執行JavaScript代碼。

因此，要解決此問題，我只需將組件腳本移至頁面底部。就在關閉HTML BODY標記之前。

將結構化數據添加到我們的食譜頁面

現在，我們有了一個基本的食譜頁面，幾乎沒有任何功能，現在讓我們添加一些結構化數據，以幫助我們的頁面在SERP中脫穎而出。

我們將按照這個代碼實驗室。

「由於我們的示例網站是一個食譜博客，因此我們將從配方結構化數據。食譜結構化數據可以提供豐富的結果，其中可以包含豐富的信息，例如食譜說明，烹飪和準備時間以及營養信息。您的內容還可能會自動在移動設備上為Google圖片啟用食譜徽章， Google Home上的語音指導和內容動作在Google助手上。」

Google首選的結構化數據格式為JSON-LD。這很好，因為它極大地簡化了實現。

我們可以將所有標記添加到頁面上的單個位置，並避免嵌套值的複雜化。

這是我們正在進行的工作。我們指定的頁面包含一個派對咖啡蛋糕的食譜。這一頁包含完成實施所需的所有細節。

請注意，我們需要將類型指定為「 application / ld + json」。默認情況下，瀏覽器採用「應用程序/ javascript」。我們還將指定schema.org作為標記類型。

添加完剩餘的必需屬性後，我們可以在結構化數據測試工具。我們可以很好地看到和組織所有值。

但是，我們可以看到有關缺少可選屬性的警告。

warningaggregateRating	建議使用gregateRating欄位。請提供一個值（如果有）。

我們將通過添加嵌套的Review元素來改進標記。

「評論」：{

「 @type」：「評論」，

「 reviewRating」：{

「 @type」：「評分」，

「 ratingValue」：「 4」，

「 bestRating」：「 5」

}，

「作者」：{

「 @type」：「人」，

「名稱」：「瑪麗·斯通」

}，

「 datePublished」：「 2018-05-01」，

「 reviewBody」：「這蛋糕好吃！」，

「發布者」：「蛋糕製作廠」

}
然後，我們可以添加缺少的AggregateRating。

「 aggregateRating」：{

「 @type」：「 AggregateRating」，

「 ratingCount」：「 18」，

「 ratingValue」：「 4」

}
最後，我們可以在結構化數據測試工具中再次測試最終標記。

我們擺脫了警告，如果您點擊預覽，您將看到我上面顯示的圖像。
使用JavaScript生成JSON-LD標記

產生有效的標記是很好的，但是由於數據是經過硬編碼的，因此在添加評論時不會更新評論的數量。

讓我們充分利用我們的新JavaScript技能並加以解決！

出於說明目的，當我們提交新評論時，我們將僅增加網頁和JSON-LD對象上的評論數量。

可以使用相同的方法用頁面中的數據填充JSON-LD對象。但是，實際上，JSON-LD對象的數據將來自資料庫，與頁面內容的方式相同。

var json_str =`{

「 @context」：「 http://schema.org/」，

「 @type」：「食譜」，

「評論」：{

「 @type」：「評論」，

「 reviewRating」：{

「 @type」：「評分」，

「 ratingValue」：「 4」，

「 bestRating」：「 5」

}，

//加上其他元素

}`;

此處的重要技術是將整個硬編碼的JSON-LD代碼保存在JavaScript字元串變數中。我使用反引號來處理多行文本。

函數update_ratingCount（ratingCount）{

var jsonld = JSON.parse（json_str）;

jsonld.aggregateRating.ratingCount = ratingCount;

返回JSON.stringify（jsonld）;

}

我使用JSON.parse將字元串轉換為易於引用JSON-LD結構中任何元素的對象。

了解如何使用jsonld.aggregateRating.ratingCount中的點導航嵌套級別。然後，在更新ratingCount值之後，我需要將對象轉換回字元串以插入頁面。

最後，我們需要更新React組件的render（）函數。它應該執行以下附加步驟：

提取當前評論數
將它們增加一
用增加的評論更新頁面
也更新JSON-LD，但是它將用我們創建的函數生成的腳本替換整個腳本。

如果（this.state.submitted）{

//獲取當前評論

var review_count = document.querySelector（「 body> div> div：nth-child（4）> div.col-lg-12> h2」）。textContent;

review_count = review_count.split（「」）[0]

//將當前的評分增加一

var count = parseInt（review_count）;

數++;

review_count = count.toString（）;

//現在我們有了新的評論數。我們可以更新頁面和JSONLD

document.getElementById（「 user_reviews」）。innerHTML =`$ {review_count}用戶評論`;

document.getElementById（「 jsonld」）。innerHTML = update_ratingCount（review_count）;

if（this.name ==「」）{

返回「您提交了$ {this.state.review}」；

}其他{

返回「 $ {this.state.name}」，表示您已提交$ {this.state.review}`；

}

我在Chrome中對此進行了測試，並且可以在開發者工具的「元素」標籤下看到更新的值。它不能與結構化數據測試工具一起使用，因為更改不是永久的。

那裡有。如果您親自嘗試這些代碼段和代碼實驗室，那麼您應該已經學到了足夠多的JavaScript才是危險的！

社區項目和資源以了解更多信息

學習編程和JavaScript的最佳方法尤其是實踐。您做得越多，就越能做到。

不要因最初的障礙而灰心，以後再提出新的想法。

這是一些使您熱身的教程。

今年始於SEO社區中有關Python，編碼和自動化的激動人心的一年。

這麼多很棒的項目，文章，視頻和介紹指南。

我很高興每個人都在彼此之間建立起彼此的工作，並使社區每天變得更強大，更有趣。

這是我要強調的一些項目。

如何使用Lighthouse和Google Data Studio匯總和自動化效果報告 https://t.co/KXYH7Ndb3I /通過 @丹·萊布森＃測量 pic.twitter.com/uibiGvEwQw

-Google Analytics（分析）（@googleanalytics） 2020年1月23日

丹·萊布森（Dan Leibson）和黑幫（Gang）不僅在Nodejs中創建了一個驚人的Lighthouse自動化工具。他們開源了它，並使其成為Google Analytics（分析）Twitter帳戶的特色！

oryRory驚嘆不已，它涵蓋了許多高級概念的精美精美的筆記本電腦使我倍感十倍??????。他開始學習＃蟒蛇去年！為我們不斷壯大的??SEO社區感到驕傲！ #DONTWAIT https://t.co/yuJzEWLIJI

-哈姆雷特（@hamletbatista） 2020年1月24日

Conductor的Rory Truesdale去年才開始學習Python，並組裝了一個具有許多有價值功能的瘋狂先進筆記本。非常令人印象深刻！

帶BERT的群集/文本挖掘。很幸運能夠接觸到非常聰明的人/項目，並整理了這個實驗代碼，對不起代碼沒有注釋及其超級beta表示歉意，但是，認為可以很好地分享。 @hamletbatista @jroakes @ RoryT11 @fighto pic.twitter.com/wA2HdXgzQL

-葛芬·赫梅什（@Ghermesh） 2020年1月24日

Gefen Hermesh創建了一個利用BERT的複雜集群解決方案。

@jroakes 做奇妙的事情。 https://t.co/CLk6YsmCMI

-?約翰（@JohnMu） 2019年12月10日

JR Oakes一直在編寫不可思議的東西。迷你互聯網獲得了約翰·穆勒（John Muller）的廣泛讚譽，最近又有了一種先進的關鍵字聚類演算法。

HülyaÇoban放在一起這個驚人的筆記本有助於在Google Data Studio中繪製Google趨勢。
無疑，這將是令人興奮的一年。

圖片積分

作者截取的所有屏幕截圖，2020年2月

SEO的現代JavaScript入門

利用React組件狀態

如何在沒有插件的情況下在 WordPress 中導入 CSV 文件

如何將 WordPress 置於維護模式（安全且簡單的方法）

如何向 WordPress 帖子添加多媒體

谷歌域名與WordPress集成：建立您的專業網站

了解WordPress社區：專訪揭示內部運作

Azure 提供的 WordPress 免費遊樂場

SEO的現代JavaScript入門

利用React組件狀態

相關文章