In Crawl Diagnostics, length of title element is incorrect

[RichAlbanese]

Hey all,

It appears the Moz crawler is misreading the number of characters in my website's page titles.  It shows 72 characters for the following page's title element:

http://giavan.com/products/orange-crystal-chain-necklace-with-drop

The page title for this web page is: Orange Crystal Chain Necklace with Drop | Giavan

which is 48 characters.  As it stands, this page title is displayed at 48 characters in Google SERPs.

I am getting "This Element is Too Long" issue on 925 pages, which is just about the entire site. These issues appeared after I added additional Shopify (Liquid) code to the page title.  If you inspect the code, you will see title element looks a bit odd with extra spacing and line breaks.

What I'd like to know is whether or not it's necessary to rewrite the Shopify code, for SEM purposes.  My feeling is that it's okay because the page titles look fine in SERPs but those 925 Moz crawl errors are kind of scary.

Thanks for your help!

[tiffany1103]

It is my understanding that it is based on pixels and not so much characters count.  For example:

mommy

little

Mommy is only 5 characters, while Little is a whole character more.  However, it is the actual distance, not the character count.  At least that is my understanding.

[LesleyPaone]

The post by Tiffany is correct, but most crawlers like moz work on string length. What the issue looks like is that the template is sending out a lot of white space that is being counted in the string length. Where this comes into play and why it is not noticeable is this. In html if you have two spacebar spaces, it will only render as one space in viewports. But in the code you will still have the two spaces.

The best solution to fix what you have would be to try to attach a filter to your current code, thus reducing the number of blank spaces and line breaks. Can you past what liquid code you currently have to generate the page title and I might can work something out to test. I haven't used liquid before, but it looks close enough to smarty that I might could work something out.

[RichAlbanese]

Here is the liquid code.  It inserts tags like "Red" and "Teardrop" into the page title to make the page title more descriptive.

<title><br /> {% if current_tags %} {{ current_tags | join: ', ' | capitalize }}{% endif %}<br /> {{ page_title }}<br /> <br /> {% if current_page != 1 %} – Page {{ current_page }}{% endif %}<br /> {% unless page_title contains shop.name %} | {{ shop.name }}{% endunless %}<br /></title>

Thanks so much for helping me out with this.

[LesleyPaone]

Ok this might help without changing any code really. The way most templating languages work is they preserve spaces and returns between statements so they can be formatted correctly. Just put your code on one line like this

{% if current_tags %} {{ current_tags | join: ', ' | capitalize }}{% endif %}{{ page_title }}{% if current_page != 1 %} – Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} | {{ shop.name }}{% endunless %}

With no spaces in between. Then test it, if everything is run together just a space between the variable. But that should take out the hard returns and return your title tag on one line like normal.

[RichAlbanese]

This appears to have fixed the problem, thank you.  Had to add a non-breaking space before {% endif %}{{ page_title }} but from what I can tell, your solution resolved the character count discrepancy.  I expect this will be validated when Moz re-crawls the site.