SEO Friendly Image Titles

When designers initially mockup websites and incorporate company logos it can be a real challenge to subsequently match captions and titles with the limited palette of web fonts available. This usually leads to the main page title being represented by an image which can be visually appealing, but unless you find another opportunity to use the main H1 tag, it can reduces the overall SEO score for your site.

SEO Tip: A H1 tag should be included in the section of the page. The text in the H1 tag should include keywords that reflect the page content and must be between 25 and 150 characters long.

So if you have an image for your title and find it aesthetically difficult to incorporate a H1 tag you can, with some CSS and HTML wizardry, still have both. If you look at my own header below, it is a simple image on the surface:

Behind the image is H1 tag and the following HTML code represents how you can accomplish it:

<div class="header">
	<div class="sitename">
		<h1>
			<a href="/">PoppaString A Blog About Windows Development and Digital Design </a>
		</h1>
	</div>
</div>

The following is the CSS responsible for showing the image and hiding the h1 tag:

.header .sitename {
	width: 316px;
	height: 77px;
	z-index: 10;
	top: 10px;
}

.sitename {
	margin: 0px;
	padding: 0px;
	width: 262px;
	height: auto;
	position: absolute;
	z-index: 10;
}

.sitename h1 {
	margin: 0px;
}

.sitename a {
	width: 100%;
	height: 0px;
	overflow: hidden;
	display: block;
	padding-top: 77px;
	background-image: url("https://www.poppastring.com/home/images/PSHeader.png");
}

As far are as your average search engine indexer is concerned the H1 tag is a perfectly viable part of the site and provides all the SEO benefits expected. Hope you find this useful!