首先我们要先知道什么是SEO？

没有SEO，人们只有5.59%的机会找到你

SEO为什么重要？让人们看见你

以Google的角度而言 :
Google不断的更新演算法，并调整网站的排名，以提供使用者最佳答案的过程。
以图书馆的角度而言 :
图书馆员透过整理书的摆放位置，并随时引进新书及报章杂誌，以提供读者最新资讯及最佳答案的过程。
※以我的角度而言 :
了解搜寻引擎的运做规则，透过一些调整网站的方法，取得好的网站排名。

这样我们就了解为何要将 h1 (主标题)内的文字置换成精美的 LOGO 图片了

h1 (主标题)佔搜寻引擎搜索优化部分非常重！
假如我希望使用者一搜寻 就能找到网站，但我也希望 h1 是一张美美的 LOGO，那我是不是会写成下面的格式呢？

<h1>我要搜寻猫咪</h1><style>h1{  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);  width: 500px;  height: 333px;}</style>

但这样一来，我们就会得到以下的画面

但是我们希望 h1可以让搜寻引擎找到但文字不会出现，这时候怎么办呢？
我们可以这样写

方法一

<h1>我要搜寻猫咪</h1><style>h1{  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);  width: 500px;  height: 333px;  text-indent:-9999px;}</style>

text-indent:-9999px，让文字向左偏移 9999px、出现在萤幕之外的地方，也等于是隐藏文字在为 h1 设定背景图片(background)，就完成了 "h1 标籤以图片取代文字" 这件事

方法二

<h1>我要搜寻猫咪</h1><style>h1{  background-image: url(https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-   1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);  width: 500px;  height: 333px;  text-indent: 101%;  white-space: nowrap;  overflow: hidden;}</style>

text-indent: 101%
强迫文字缩排至原本的区域外white-space: nowrap
规定段落中的文字不得进行换行，常用于避免字数过多时自动换行导致阅读效果变差overflow: hidden
将超出範围的内容隐藏

这样一来我们就可以得到美美的 LOGO 图，又可以让浏览器搜寻到我们的h1标籤！

总结

SEO是一门很深的学问，我也还在学习，利用css设定样式，既可以得到美美的logo图，又可以优化SEO。

小孩子才做选择，我全都要！