zoukankan      html  css  js  c++  java
  • Mata标签,og标签

    一、Mata标签  

      meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的<head>与</head>中。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机查找、分类,这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。

    name 属性

    1、<meta name="renderer" content="webkit">

         content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用页面默认使用 webkit内核,IE兼容内核,IE标准内核。  

     

    2、<meta name="viewport" content="width=device-width, initial-scale=1">

      上面的一行代码可以让网页的宽度自动适应手机屏幕的宽度:
      注:在iOS9中要想起作用,得加上"shrink-to-fit=no"

      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

      width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)
      height:和 width 相对应,指定高度
      initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
      maximum-scale:允许用户缩放到的最大比例
      minimum-scale:允许用户缩放到的最小比例
      user-scalable:用户是否可以手动缩放

     

    3、 <meta name="Author" contect="ZYJ">   

      告诉搜索引擎你的站点的制作的作者 。

     
     4、<meta name="Copyright" content="思猿客">  

      这里的name="copyright"表示版权,值content="思猿客"表示版权方。这句话的意思就是申明,页面版权属于思猿客。
     

    5、<meta name="keywords" content="个人博客,思猿客" />  

      向搜索引擎说明你的网页的关键词。
     

    6、 <meta name="description" content="思猿客,一个前端程序员的个人博客,记录博主学习和成长之路,分享前端方面技术和源码。" />  

      告诉搜索引擎你的站点的主要作用。

     

    http-equiv属性

    7、<meta http-equiv="Window-target" content="_top">  
      强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用。
     
    8、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
      X-UA-Compatible 用于强制浏览器的渲染方式,默认使用chrome来渲染,然后再按照IE该浏览器的最新版本来渲染。

     

    9、 <meta http-equiv="Refresh" contect="n;url=http://yourlink">
      定时让网页在指定的时间n内,跳转到页面http://yourlink。

     

     

     

    二、og标签

      og是一种新的HTTP头部标记,即Open Graph Protocol,作用是让网页成为一个“富媒体对象”。用了Meta Property=og标签,就是同意了其他网站可以引用本网页内容,目前这种协议被很多SNS网站采用。也就是所谓的富媒体对象。

      1、参与到Open Graph Protocol的好处:
        ● 能够正确的分享您的内容到SNS网站

        ● 帮助您的内容更有效的在SNS网络中传播

     

      有些人使用所谓的网站质量在线检测,检测后结果提示Meta Property=og这段代码有问题,特别是一些SEO的检测,更是提示“特别错误”!然后删除Meta Property=og代码,检测正常。因此担心Meta Property=og这段代码会对网站照成不良影响。其实Open Graph Protocol并不会对SEO照成不良影响,相反,应用的合理,非常有利于网站的推广。

      3、使用Open Graph Protocol应注意
      meta property=og代码的功能并不等同于网页的meta name标签,两者针对的对象不一致,功能不同。如果网站上要使用Open Graph Protocol,那么,meta property=og和meta name、Title标签应同时赋值。

      4、主要的og标签属性

        og:type 表示页面的类型

        og:title 页面的标题

        og:description 页面的简单描述

        og:url 页面地址

        og:image 略缩图地址

        og:site_name 页面所在网站名

        og:videosrc 视频或者Flash地址

        og:audiosrc 音频地址

    例:

       <meta property="og:type" content="个人博客" />
       <meta property="og:title" content="思猿客" />
       <meta property="og:url" content="http://www.zhuyujie.top" />
       <meta property="og:site_name" content="http://www.zhuyujie.top" />
       <meta property="og:description" content="思猿客,一个前端程序员的个人博客,记录博主学习和成长之路,分享前端方面技术和源码。" />

      

     

     

     

     

     

     

     

     

  • 相关阅读:
    DotNetty是微软的Azure团队,使用C#实现的Netty的版本发布
    C# 与 .NET Framework 对应关系
    C# 基于Directshow.Net lib库 USB摄像头使用DirectShow.NET获取摄像头视频流
    Actor模型的状态(State)+行为(Behavior)+邮箱(Mailbox)
    c# 无法加载DLL:找不到指定的模块(异常来自HRESULT:0X8007007E)
    管道式编程(Pipeline Style programming)
    Word文档转Markdown插件(Windows)
    纯Java实现定时任务(转)
    Spring MVC使用Schedule实现定时任务
    Spring Boot使用Schedule实现定时任务
  • 原文地址:https://www.cnblogs.com/zhuyujie/p/11674676.html
Copyright © 2011-2022 走看看