Everyone knows that search engines prefer H1. H1 is also a very basic and important step in SEO. But sometimes, for the sake of interface style, many titled texts are made into pictures. In most cases, the picture is used directly when cutting the page. In terms of code, H1 also loses its effect on search engines.
<h1><img src=”http://www.****.com/”></h1>
In fact, through a little adjustment, you can take into account both.
Let’s take a look at this paragraph again. The code of H1 is still readable to search engines. We just used text-indent:-9999px; threw the text "Invite friends to join" far to the left.
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url() no-repeat;}
.testbox{background:url();
width:522px;
height:323px;
}
</style>
<p class="test">
<h1>I</h1>
<h1><img src=”http://www.****.com/”></h1>
In fact, through a little adjustment, you can take into account both.
Let’s take a look at this paragraph again. The code of H1 is still readable to search engines. We just used text-indent:-9999px; threw the text "Invite friends to join" far to the left.
Copy the codeThe code is as follows:
<style>
.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url() no-repeat;}
.testbox{background:url();
width:522px;
height:323px;
}
</style>
<p class="test">
<h1>I</h1>