meta tag 說明
1. <title></title>*建議中文保持在 30 個字元、英文 60 個字元以內
*可以用以下格式： 主要關鍵字 - 次要關鍵字 | 廠牌名稱
*每個頁面的 Title 都是唯一的
<title>MyDemo-@ViewData["Title"]</title>
2. <meta name='description' content='@ViewData["PageDescript"]' />
*建議中文保持在 80 個字元、英文 160 個字元以內
3. og 社群相關 tag
og 全名為： Open Graph Protocol
*在 og:title 設定的文字會當作分享 FB 時的標題。
3.1 og:image
*大小不要超過 8 m
*尺寸要大於 200px * 200px，否則連圖都抓不到
*如果圖片為長方形 建議最小尺寸 600px * 315px
*如果圖片為正方形 建議最小尺寸 600px * 600px
程式化新增 meta tag
//在DotNet Core Project中 新增目錄夾 Filters ，並新增MetaTagFilter.cs 檔案
using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.AspNetCore.Mvc;
namespace WebProject.Filters
{
public class MetaTagAttribute : TypeFilterAttribute {
public MetaTagAttribute( ) : base( typeof( MetaTagFilter ) ) {
}
public class MetaTagFilter : IActionFilter {
private string title { get; set; }
private string description { get; set; }
private string image { get; set; }
private string robotRule { get; set; }
public MetaTagFilter( ) : this(
title: "MyDemo" ,
description: "" ,
image: "" ,
robotRule: "index,follow" ) { }
public MetaTagFilter(string title , string description , string image , string robotRule ) {
this.title = title ?? this.title;
this.description = description ?? this.description;
this.image = image ?? this.image;
this.robotRule = robotRule ?? this.robotRule;
}
public void OnActionExecuted( ActionExecutedContext context ) {
}
public void OnActionExecuting( ActionExecutingContext context ) {
dynamic controller = context.Controller;
controller.ViewBag.Title = this.title;
controller.ViewBag.Description = this.description;
controller.ViewBag.image = this.image;
controller.ViewBag.RobotRule = this.robotRule;
}
}
}
}
//在DotNet Core Project中 Controller 目錄夾下 *.cs
[MetaTag( Arguments = new object[] {"${title}","${description}","${image url}","${robot rules}" } )]
public IActionResult Index()
{
return View();
}
//在DotNet Core Project中 Shared 目錄夾下 _Layout.cshtml
<head>
<title>MyDemo-@Html.Raw(ViewBag.Title)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name='description' content='@Html.Raw(ViewBag.Description)' />
<meta name='robot' content='@ViewBag.RobotRule' />
<meta property='og:title' content='MyDemo-@Html.Raw(ViewBag.Title)' />
<meta property='og:description' content='@Html.Raw(ViewBag.Description)' />
<meta property='og:image' content='@ViewBag.image' />
<meta property='og:type' content='website' />
<meta property='og:url' content='@Context.Request.GetDisplayUrl()' />
<meta property='og:site_name' content='MyDemo' />
<meta http-equiv="Content-Language" content="zh-tw" />
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
留言
張貼留言