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="思猿客,一个前端程序员的个人博客,记录博主学习和成长之路,分享前端方面技术和源码。" />

      

     

     

     

     

     

     

     

     

  • 相关阅读:
    Java 简单算法--打印乘法口诀(只使用一次循环)
    Java简单算法--求100以内素数
    ubuntu 16.04 chrome flash player 过期
    java 网络API访问 web 站点
    java scoket (UDP通信模型)简易聊天室
    leetcode1105 Filling Bookcase Shelves
    leetcode1140 Stone Game II
    leetcode1186 Maximum Subarray Sum with One Deletion
    leetcode31 Next Permutation
    leetcode834 Sum of Distances in Tree
  • 原文地址:https://www.cnblogs.com/zhuyujie/p/11674676.html
Copyright © 2011-2022 走看看