Day 4 用 WordPress 了解 head 記載的中繼資料及靜態資源

第 12 屆 iThome 鐵人賽

DAY 4

自我挑戰組

WordPress 客製化從 0 開始系列第 4 篇

12th鐵人賽 wordpress html5

Eric 桓桓

2020-09-05 23:04:42

2938 瀏覽

大家好，我是 Eric。

第二天與第三天的內容，都是針對 <body> 中的標籤做的說明。顧名思義，<body> 中記載的內容，就是會直接透過瀏覽器轉譯的可見內容。
今天，讓我們再回到 header.php 這個檔案，可以發現在 <body> 的上方，還有另一個名為 <head> 的區塊：

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >

		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>

在 <head> 中，我們看見了 <meta> 與 <link> 這兩種標籤，除此之外，還有名為 <script>、<style> 與 <title> 的標籤。前四種標籤，是我們今天的主角，而 <title> 的目的，則是告訴瀏覽器，當前頁面的標題名稱，一般來說，便是以 WordPress 頁面或文章的標題為標題，因為功能單純，因此不多加贅述。

中繼資料 (meta data)

如果你是行銷人員，或是行銷背景出身，這個區塊對你來說會特別重要。所謂的「中繼資料」，最主要的用途在識別網頁的身份。中繼資料的基本語法 (syntax) 如下，但並非全部的中繼資料都是用這種方式儲存：

<meta name="資料名稱" content="資料值">

從 header.php 來看，會發現第一個中繼資料就跟上述的基本語法不同了。

<meta charset="UTF-8">
<!-- WordPress 預設使用的是 UTF-8 編碼，因此 <?php bloginfo( 'charset' ); ?> 回傳的值預設是 UTF-8，因為我們還沒進入 PHP 的主題，因此為了方便解釋，便改為固定值。 -->

這句話宣告：「當前頁面使用 Unicode-8 編碼。」

當代的網站大多使用 Unicode-8 編碼，但是未來隨著特殊字元逐漸增加，也許不同的編碼會取而代之。

而第二段的 viewport，則在回應式網頁設計扮演相當重要的角色，其最主要的工作，在定義瀏覽器的可見區域。其內容包含下列幾項敘述：

width 定義螢幕寬度，透過 width=device-width 告訴瀏覽器可見寬度即為裝置寬度。
initial-scale 代表預設的縮放比例，預設值為 1。後續可搭配 minimum-scale 與 maximum-scale 的敘述，限制使用者可以縮放的範圍。

除了上述的 charset 與 viewport 外，和行銷與搜尋引擎最佳化 (SEO) 相關的幾個中繼資料如下。

<meta name="title" content="文章標題"> 這個標籤主要是呈現於搜尋結果頁面時使用的主標題。如果沒有指定的話，瀏覽器會將 <title> 中的標題視為搜尋結果頁的主標題。
<meta name="description" content="文案"> 這個是搜尋結果頁面的連結敘述，相當於廣告的文案。
<meta name="robots" content="index, follow"> 透過中繼資料告訴搜尋引擎是否應該檢索該頁面。如果不希望檢索，則將 index 改為 noindex。

Open Graph 中繼標籤 (og)

隨著社群網路逐漸發達，許多人會將自己網站的文章，同步分享於 Facebook 粉絲專頁。這時 Open Graph 標籤 (og 標籤) 就扮演十分重要的角色。最常有人問的是「為什麼 Facebook 的截圖是這樣？」這個問題其實就可以透過 Open Graph 的中繼標籤來解決。常見的 Open Graph 中繼標籤如下：

<meta name="og:title" content="Facebook 顯示的文章標題">
<meta name="og:description" content="Facebook 連結顯示的描述">
<meta name="og:image" content="欲於 Facebook 顯示的縮圖網址">

Open Graph 的中繼標籤可以透過 SEO 外掛，如 All in One SEO 與 Yoast SEO 來協助填寫。但需要記得的是：

SEO 外掛只協助你填寫中繼資料欄位，實際上會影響 SEO 排名的，仍然是你的頁面內容，是否符合搜尋者的搜尋目的。

注意事項

你無法透過 Google Tag Manager 或 JavaScript 的方式來增加中繼資料。這是因為中繼資料在其他靜態資料讀取之前，瀏覽器便已讀取 <head> 中的內容。而 Google Tag Manager 的發動時機，則在中繼資料載入以後，因此沒辦法透過 GTM 建立中繼資料。

link

事實上，<link> 最常見的用法，是在引用 CSS 的檔案。常見的語法如下：

<link rel="stylesheet" href="CSS 檔案位置" >

雖然 WordPress 的 PHP 相關功能會在後面的篇章才會提及，但這邊可以先粗略的帶過：誠如 header.php 中所描述的，我們在 <head> 中，並未看到跟 CSS 有關的 <link> 資訊。這是因為如同 <?php bloginfo( 'charset' ); ?>，這裡的 CSS 檔案被包覆在 <?php wp_head(); ?> 當中。
如果你透過瀏覽器的 [開發人員工具] 進行檢測，就可以看到 wp_head() 這個方法包含了哪些 CSS 檔案。
可以補充的是，<link> 這個標籤的特殊屬性 (attribute) rel，是用來指涉這個外部靜態檔案的定位是什麼。以 CSS 而言，通常就會直接如範例班填入 rel="stylesheet"。
而除了 stylesheet 以外，rel 這個屬性也包含了其他不同的類型。其中，有一種與網站載入速度最佳化有較直接的關係：

<link rel="preload" src="靜態檔案位置">

這種做法可以告訴瀏覽器，在連結到這個頁面時，可以預先載入哪些資源，減少頁面載入時的檔案請求時間。這裡之所以會使用「靜態檔案位置」，而非「CSS 檔案位置」，最主要的原因在於，rel="preload" 這個屬性，也可以包含 JavaScript。

style

除了透過 <link> 的方式引用外部靜態檔案外，另一種做法是透過 <style> 來定義樣式，其基本語法如下：

<style>
    .css-selector {
        width: 100%;
    }
</style>

必須特別注意的是，有部分的開發人員會將 <style> 寫在 <body> 之中。但根據 W3C 的規範，這是錯誤的。

script

相對於 <link> 同時可包含 CSS 與 JavaScript，<script> 則是單純只於 JavaScript 中使用。其基本語法有兩種，如下所示：

載入外部資源

<script src="外部資源位置.js" async defer></script>

其中 async 與 defer 與網站載入速度也有直接的關係。
在沒有指定 async 與 defer 的情況下，JavaScript 是逐行載入，待完全載入後，才會繼續檢查下一個 <scrip> 標籤。這樣對網頁載入速度會有相當負面的影響。而在 <script> 中加入 async 或 defer 之後，則可以確保瀏覽器「先繼續載入其他資源，等這個資源下載好以後，我們再回頭使用它」，這種技術的正式名稱叫做「非同步載入 (asynchronous)」。而 async 與 defere 的差異如下：

async 等到資源下載完畢便執行，與 <script> 所在的位置無關，適合沒有先後順序問題的 JavaScript 使用，如 Google Analytics。
defer 即便在資源下載完畢，也會等到網頁內的元素轉譯完畢後，才會執行。如果你的 JavaScript 有順序或相依性的問題，那建議使用 defer。

內嵌程式碼

JavaScript 除了可以用上述的方式引用外，也可以直接於頁面中撰寫，其基本語法如下：

<script>
    console.log( "第一次使用 script 標籤" );
    functionName( "Eric" );
    function functionName( name ) {
        console.log( name + "，這裡是你執行 JavaScript 會造成的結果。" );
    }
    //執行後會在瀏覽器中開發人員工具的模擬器 (console) 顯示：「Eric，這裡是你執行 JavaScript 會造成的結果。」
</script>

如何用 WordPress 實踐 link 與 script

前面曾提到，WordPress 會利用 wp_head() 這個方法，取得所有已註冊的資源。但在進入 PHP 的領域以前，你可以先用直接編輯的方式，在 header.php 的檔案中進行改寫。例如：

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

	<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" >
        <meta name="title" content="這裡可以手動加標題"><!-- 這段是新增的 -->
        <meta name="description" content="這個網頁可以手動加標題"><!-- 這段是新增的 -->
        <meta name="robots" content="index, follow"><!-- 這段是新增的 -->
        <meta name="og:title" content="這裡是 Facebook 的標題"><!-- 這段是新增的 -->
        <meta name="og:description" content="這裡是 Facebook 的連結說明"><!-- 這段是新增的 -->
        <meta name="og:image" content="圖片連結"><!-- 這段是新增的 -->
        
		<link rel="profile" href="https://gmpg.org/xfn/11">

		<?php wp_head(); ?>

	</head>

又或者，你可以透過 WordPress 的模組化機制－勾點 (hook)－來引用不同的靜態資源。
儘管還沒有進入 PHP 的範疇，但這裡可以提供引用靜態資源的基本方法，詳細的說明會留待 PHP 中再做探討：

function eric_enqueue(){
   wp_enqueue_style( '識別 ID (必填)', 'CSS 網址連結 (必填)', '相依的樣式表 ID (選填)', '版本 (選填)', '適用的媒體查詢 (media query，選填)' );
   wp_enqueue_script( '識別 ID (必填)', 'JavaScript 網址連結 (必填)', '相依的程式碼 ID (選填)', '版本 (選填)', 'JavaScript 是否置於頁尾' );
}
add_action( 'wp_enqueue_scripts', 'eric_enqueue' );

只要將上述的代碼，複製貼上於佈景主題或子佈景主題的 functions.php 中，即可引用相對應的靜態資源。
我們一樣以 Twenty Twenty 為例：

//functions.php Line 197
/**
 * Register and Enqueue Scripts.
 */
function twentytwenty_register_scripts() {

	$theme_version = wp_get_theme()->get( 'Version' );

	if ( ( ! is_admin() ) && is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}

	wp_enqueue_script( 'twentytwenty-js', get_template_directory_uri() . '/assets/js/index.js', array(), $theme_version, false );
	wp_script_add_data( 'twentytwenty-js', 'async', true );

}

add_action( 'wp_enqueue_scripts', 'twentytwenty_register_scripts' );

上述的程式碼中，我們可以看到 wp_enqueue_script 引用了 Twenty Twenty 的基本 JavaScript 檔案，名為 index.js。這個 JavaScript 並沒有相依的檔案 (array())，而版本編號則根據佈景主題的版本編號定義 ($theme_version = wp_get_theme()->get( 'Version' );)。最重要的是，這個 JavaScript 不要在頁尾執行 (false)，而要在頁首 (<head> 當中)。

而如果要使用的是內嵌程式碼的話，則可以用下列的方式執行：

//將 JavaScript 嵌入在 <head> 中
add_action( 'wp_header', function(){?>
    <script>
        console.log( "The header" );
    </script>
}
//將 JavaScript 嵌入在頁尾
add_action( 'wp_footer', function(){?>
    <script>
        console.log( "The footer" );
    </script>
}

結語

本章透過 header.php 這個檔案，說明了當代網站開發 HTML 語法中的 <head> 標籤，究竟隱含了哪些資料。其中，中繼資料對於搜尋引擎最佳化工程，扮演了相當重要的角色，坊間的 SEO 外掛，都是在輔助你填寫上述項目。
而後面談到的 <link>、<script> 與 <style> 則將我們推進到當代網站開發的下一個階段：