對於每個 HTML 頁面，您應該有幾個關鍵元素以確保快速載入和良好的 SEO，尤其是針對面向海外的出海電子商務獨立站優化。
下面的模板為您提供了所有這些功能，您可以根據需要快速自定義這些功能。如果您想單獨拉出它們，我還在下面列出了所有有用的元標記：
<!DOCTYPE HTML>
<html>
<head>
<title>我的網站</title>
<link rel="icon" type="text/png" href="https://fjolt.com/favicon.png">
<!-- 如果你使用谷歌字型載入 -->
<!--<link rel="preconnect" href="https://fonts.gstatic.com">-->
<meta name="description" content ="我的網站描述">
<meta name="robots" content="index,follow">
<meta name="keywords" content="tags,for,your,site">
<link rel="canonical" href ="此頁面的 URL">
<meta property="og:title" content="我的網站" />
<meta property="og:description" content="我的網站描述" />
<meta property="og:image" content="代表我網站的圖片 URL" />
<meta property="og:url" content="此頁面的 URL" />
<meta property="og:site_name" content= "我的網站" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://fjolt.com">
<meta name="twitter:title " content="{{title}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:image" content="{{image}}">
< !-- 對於移動裝置-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<!-- 全域性站點標籤 (gtag.js) - Google Analytics -->
<!-- 如果您正在使用谷歌分析，請使用您的 ID 替換指令碼和程式碼中的 [[ID HERE]] -->
<!--
<script async src="https://www.googletagmanager.com/gtag /js?id=G-[[ID HERE]]"></script>
<script>
var host = window.location.hostname;
if(host !== "localhost") {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '[[ID HERE]]');
}
</script>-->
<!-- 預載入樣式表-->
<
<!-- 如果你想載入一些 CSS 非同步，請取消註釋 -->
<!--<link rel="preload" href="/async.css" as="style" />-->
<!--如有必要，預載入您的字型 -->
<link rel="preload" href="/fonts/fontName.ttf" as="font" crossorigin="anonymous" />
<link rel="preload" href="/fonts/ fontName.ttf" as="font" crossorigin="anonymous" />
<!-- 載入你的樣式表 -->
<link rel="stylesheet" href="/style.css" />
<!-- 如果你想要載入一些 CSS 非同步取消註釋 -->
<!--link rel="stylesheet"href="/async.css" media="print" onload="this.media='all'">-->
</head>
<body>
<!-- 你的網站主體 -->
<!-- 你的主要 JS 指令碼 -->
<script defer src="local.js"></script>
</body>
</html>
|
下面各種類別的元標籤說明
<meta name="description" content="Description of my website">
<meta name="robots" content="index,follow">
<meta name="keywords" content="tags,for,your,site">
|
<link rel="shortlink" href="Short form link for this page">
<link rel="canonical" href="URL for this page">
<link rel="prev" href="URL for the prev page in this series">
<link rel="next" href="URL for the next page in this series">
<link rel="dns-prefetch" href="Link to a DNS server far to lookup early on">
<link rel="prefetch" href="Link to a document or file to prefetch and cache">
<link rel="prerender" href="The document should be optimised for rendering on the page">
<link rel="preload" href="Link to a document or file to prefetch and cache which will be used in the page" as="script"> <!-- "as" can be script, font, stylesheet -->
|
<meta property="og:title" content="My Website">
<meta property="og:description" content="Description of my website">
<meta property="og:image" content="Image URL representing my website">
<meta property="og:url" content="URL for this page">
<meta property="og:site_name" content="My Website">
|
<meta name="twitter:card" content="summary_large_image"> <!-- Don't change this one -->
<meta name="twitter:site" content="Website URL">
<meta name="twitter:title" content="Title for page">
<meta name="twitter:description" content="Description of page">
<meta name="twitter:image" content="Image of page">
|
<!-- indicates this will run in full screen mode on iOS devices -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- set color of top band in iOS, requires apple-mobile-web-app-capable to be set -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- auto detect phone numbers on apple devices on this page -->
<meta name="format-detection" content="telephone=yes">
<!-- For mobile devices -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1" user-scalable="no">
|
<meta name="og:video" content="Video URL">
<meta name="og:video:secure_url" content="Secure Video URL">
<meta name="og:video:types" content="Video Format"> <!-- can be application/x-shockwave-flash or video/mp4. -->
<meta name="og:video:width" content="Video Width i.e. 100px">
<meta name="og:video:height" content="Video Height i.e. 200px">
<meta name="og:video:image" content="Placeholder image for video">
|
<meta property="og:type" content="threed.asset"> <!-- set to threed.asset for 3d -->
<meta property="og:asset" content="/link/to/asset.glb">
<meta property="og:title" content="Title of asset">
|