各种元标签SEO优化的HTML模板大全

21-11-18 banq

对于每个 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>

 

下面各种类别的元标签说明

  • 搜索引擎优化元标签SEO优化

<meta name="description" content="Description of my website">
<meta name="robots" content="index,follow">
<meta name="keywords" content="tags,for,your,site">

  • 链接SEO优化

<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 -->

  • 社交媒体页面SEO优化

<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">

  • 推特SEO优化

<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">

  • 苹果元标签SEO优化

<!-- 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">

  • 社交媒体视频SEO优化

<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">

  • 社交媒体 3d 资源SEO优化

<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">

 

猜你喜欢