前端 seo 优化

611 阅读2分钟

以天猫为例:

怎么百度搜索结果显示网站描述?

红框2

<meta data-n-head="ssr" data-hid="description" name="description" content="由于该网站的robots.txt文件存在限制指令(限制搜索引擎抓取),系统无法提供该页面的内容描述">

image.png

怎么百度搜索结果显示网站标题?

红框1

image.png 使用title标签: image.png

怎么让百度搜索结果显示网站图片LOGO?

红框3

<title>天猫tmall.com--理想生活上天猫</title>

搜索结果出图是指在搜索引擎中搜索关键词,搜索结果展示的网站索引自带展示图片,从而可以让网站获得更好的展示效果。实践证明,带有图片的索引点击量远远大于没有图片的搜索结果索引,具体展示如下图3:

image.png

在百度搜索出来带图片的SEO需要具备以下要求:

图片大小比例:点击索引图片发现,索引里面图片的大小统一是12175px的尺寸,审查元素代码,图片小于12175px的尺寸,不会被抓去,因为太小了影响图片清晰度。同时图片的比例要尽量符合121:75,这样出现的几率就会大很多。

image.png

image.png

图片固定宽高比需要 121:75

image.png

image.png

怎么将网站添加到主屏幕时,这个图标会显示出来?

image.png

<!-- iPhone 和 iPod touch (Retina) -->
<link rel="apple-touch-icon" sizes="120x120" href="path/to/touch-icon-120x120.png">

<!-- iPad (Retina) -->
<link rel="apple-touch-icon" sizes="152x152" href="path/to/touch-icon-152x152.png">

<!-- iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="path/to/touch-icon-180x180.png">

<!-- Safariundefined 浏览器的书签图标 -->
<link rel="icon" type="image/png" sizes="192x192" href="path/to/android-chrome-192x192.png">

<!-- iOS 8 和更高版本的启动画面 -->
<!-- iPhone 6 / 6S -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="path/to/launch-screen-375x667.png">
<!-- 更多设备尺寸... -->

这段代码是用来设置苹果设备上的触摸图标(Apple Touch Icon)的。当你在iPhone、iPad或其他支持此功能的iOS设备上将网站添加到主屏幕时,这个图标会显示出来。这里的path/to/touch-icon-120x120.png是图标文件的URL。

确保该URL指向有效的图像资源,并且建议使用透明背景的PNG文件,尺寸通常是180x180像素,但也可以提供不同尺寸以适应不同设备。为了兼容更多设备,你可以提供一系列不同大小的图标:

image.png

怎么将浏览器tab增加logo?

image.png

<link rel="shortcut icon" type="image/x-icon" href="//assets.xxxcdn.com/assets/images/icon/favicon-72a9b70c43eb2e079e62d4db6633cdd2.ico">