When my designer suggested the use of the yen symbol (¥) in the
Taelyen company name, I was a bit wary. It looked good on paper, but how would it look to Googlebot or any of the other search engine spiders?
It was easy enough to add the
¥ tag throughout the markup for the pages on the site, ensuring that the ¥ would render appropriately for someone browsing.
But my concern was for someone typing
taelyen into the Google search box. If every instance of "taelyen" throughout the HTML on my site contained the string "
Tael¥en" then the spiders would not necessarily associate the string "taelyen" as strongly with taelyen.com. I can't expect my customers to know how to type the "¥" symbol on their keyboards[1]. When you type "taelyen" into any search box, I want you to find this site.
The answer was a bit of JavaScript.
For each instance of "Tael¥en" on the main pages of the site, the underlying XHTML actually shows "TaelYen" - which is the text that will appear if you visit the site without JavaScript enabled (such as if you're using a mobile device) or if you're a search engine spider. So now, when Google visits, it'll index the company name using just the letters of the Latin alphabet.
Then, for each occurrence of the word "Taelyen" on the main pages of the site, I added a bit of XHTML notation to signal that I want to change the "Y" to a "¥". In XHTML, every text element on the page is contained within enclosing tags. For instance, the text in a header may be inside of the
<h2> tag. You can assign a
class to any tag very easily, by adding text
"class=yourClassName" inside of the brackets of any tag. The result looks like this:
<h2 class="taelyen">TaelYen</h2>The next step was to write a script that looks for any element in the document marked as
class="taelyen", and for each one found, replace the string
TaelYen (case-insensitive) with Tael¥en.
In the "template" controlling every page on this site, a small line of code brings in a separate JavaScript file.
<script type="text/javascript" src="scripts/taelyen-replace.js"></script>
In that separate
taelyen-replace.js file I included a JavaScript function to
get elements by class name, which I found on the Internet at the site of Robert Nyman, a talented web developer in Sweden. With that function, I can easily find all of the occurrences on the page of the string that I want to change.
With an array of all of the "Taelyen" occurrences, I then wrote some code to step through each one and use a regular expression to change the "y" or "Y" to a "¥".
function replaceYwithYen() {
var myTy= getElementsByClassName("taelyen");
var length = myTy.length;
for (var i=0; i<length) {
if (myTy[i].firstChild.nodeType == 3){
myTy[i].firstChild.nodeValue = myTy[i].firstChild.nodeValue.replace(/Taelyen/gi, "Tael\xA5en");
}
}
}
replaceYwithYen()
Only tricky part was the regular expression: you need to include an "escape code" to make the yen appear as expected. (Yen =
\xA5)
And that seemed to do it!
There are a some limitations to this approach.
- I have to add markup to the XHTML to indicate each instance where the script should do the yen replacement. I'd call that a feature, because I don't want to do it globally — which also might grab e-mail addresses and other undesirable fish in the net.
- In this version you have to add the "class" tag in the tag immediately outside of the text to change. For nested tags, such as a "bold" tag inside of a "header" tag, currently I would have to indicate the class in the "bold" tag.
- Related to the above, the text has to be the "first child" of the tag.
Nevertheless, it seems to be working. And I'd recommend this approach to browser-side scripting for any company pushing typographic boundaries with their company or product names.
[1] Instructions for typing the "¥" symbol:
Windows: Hold down the ALT key and type "0165" on the numeric keypad.
Mac: Option-y
Labels: web design
