Yes, it will, because search engines don’t strip markup before they look at the content. Because any portion of that is wrapped in the span, it’s no longer a whole word. It will see Christ and mas, not Christmas.
1 Like
Ugh… 
So to appease Google, and still have the coloring I want, my only option is to use Javascript? 
The css standard isn’t there except for the first letter, so yes, you’d have to use javascript to work your way around it.
Or I believe there is a way to display an image and then have the H1 be in the background, right?
Sure. It’s an older technique but still usable.
This page shows nine different methods for accomplishing the same goal: https://css-tricks.com/the-image-replacement-museum/
2 Likes
Maybe that is my best option for now, since I don’t know Javascript?
Also, so I don’t get a blurry word, would it be possible to make the word an SVG and then have the H1 in the background so I get the best of both worlds?
So I was able to just use an image of my colored logo, with an H1 in the background. And while I didn’t need the link you provided, it is still a good reference for the future!
I also watched some video last night and I attempted to make a text SVG of the company name.
So now I have an SVG file named “mycompany.svg”, but I’m unsure of how I might be able to use that for my H1 instead of relying on showing a blurry image? 
When I try and preview the svg nothing comes up. And if I open the file in a code editor, then I see a bunch of XML looking code.
So how could I use the SVG for the H1 so I have a colorful company name, but also something that Google will see as a single word as far as SEO goes?
Thanks.
You use the svg AS the image src.
When I adjust my code to this I don’t see the image appear…
h1 span{
position: absolute;
background: url('/images/mylogo.svg') no-repeat;
margin: 0;
width: 100%;
height: 100%;
}And in addition to there maybe being a problem with my code, how do I check to see if I created the SVG properly? (I used Inkscape, but not having any experience with that tool, who knows if I did things correctly!)
Are you sure the location is correct and the file is actually there? I’ve done both, so I’ve got to ask.
Did you try accessing the logo directly and ensure it displays?
This new SVG file (“mylogo2.svg”) is right next to my original logo image (“mylogo…png”), so yes, I see it.
Well, that was my 2nd question to you.
I have this on a Mac, and when I do cmd+O the text editor “Atom” opens and I see what looks like an XML file.
If I try and preview it in Finder pressing the spacebar, then I just get a blank white window that opens.
Never having worked with SVGs before, I’m not sure what to expect.
I mean you would assume that you can preview an SVG just like a JPEG or PNG, but since it is really a file full of code, maybe the Preview applicationdoesn’t recognize it?
Or, maybe I screwed up creating the SVG?
Which, on a side note, can you recommend any online tutorials or better a YouTube video that would teach someone who doesn’t know how to use Inkscape how to create a simple text logo that is an SVG?
Thanks!
Usually you can preview an SVG in your browser.
1 Like
I will not go into depth to defend the TLA usage because Jason cannot reply… but I get the general impression that all scripts are incorrect unless it is done the Jason way including adding his own script which fails W3.org validation services because they are also wrong. Jason tends to be rigid in his views and will not deviate 
I was able to find another video on YouTube that was a little more detailed - although nothing to write home about!
It seems the reason I wasn’t able to preview my SVG is because I didn’t shrink-wrap the page size to the text, and also maybe because I saved things as an Inkscape SVG versus a regular one. (Not entirely sure what was going on.)
Anyways, I made a small step forward, but now have a new problem…
From my very limited understanding, the SVG I created just includes instructions on drawing the letters, and nothing else. So the problem is that my SVG has a transparent background, and my H1 is bleeding through…
Because I am using an image replacement technique listed in the link you gave me above, how can I fix things so I get the results that i want?
Thanks.
Set the background color on the SVG?
So how would I do that?
Is that something I have to do in Inkscape when creating the SVG?
Or is that something I do after the fact with CSS?
Based on what I could find online, there is no background color on a text SVG, and the only opacity comes from the letters themselves…
Anyone??
Treat it just like you would with any other img.
Yes, you can style some svg elements from the CSS.
If your svg is an external file that your linking to, like a jpg would be, you can do it like this.
<img class="example" src="example.svg">
.example {
background:#eee;
}
If the svg is formatted in your HTML page you can use the fill property as shown in the link above.
More info here too…
Sorry for the long thread.
Actually I am trying to use an image replacement approach so that I can display a colored company name/logo, but still have the H1 be text so that it gets treated properly for SEO with Google.
Here is a snippet of my CSS - let me know if you need more…
h1 span{
position: absolute;
background: url('/images/mycompany.svg') no-repeat;
margin: 0;
width: 100%;
height: 100%;
}Not sure how to apply your advice above to my code if that will even work?
Also, I didn’t quite follow you…
Is it true what i was reading the other night that you cannot add an opaque background to an SVG that is text only? Or is that not correct?
And if you can add an opaque background, should I be doing that in Inkscape when I created the text SVG, or is it something I should handle after-the-fact using HTML/CSS?
Because my code above is no simply an < img > I’m thinking that the approach needed is different?
Hope that clarifies where I am at.
Thanks!
After catching up on the thread I see you are using an image replacement method. Are you using one from the link to css tricks Dave posted, in post #26?
If so, which method are you using?
Anyway, your right, what I posted will not work when the image is a background image. You will need to edit the svg image your using.
You can embed a <style> tag directly into the svg to add a background color to the svg element.
Using the code from that link I simply added a bg color to the svg element also.
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<style>
circle {
fill: gold;
stroke: maroon;
stroke-width: 2px;
}
svg {background:red;}
</style>
<circle cx="5" cy="5" r="4" />
</svg>
Post your image if you have trouble adding a bg color.
1 Like