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 

tag, it can reduces the overall SEO score for your site.

SEO Tip: A

tag should be included in the section of the page. The text in the

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

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:

PoppaString Heading

Behind the image is

tag and the following HTML code represents how you can accomplish it:

The following is the CSS responsible for showing the image and hiding the


.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

tag is a perfectly viable part of the site and provides all the SEO benefits expected. Hope you find this useful!

Share on Twitter Facebook

Comment Section

Comments are closed.