Organization name as text vs. as a picture with alt text + Schema.org markup
-
I'm looking for some feedback to implement best practice for the markup of our header/navigation at the top of our site.
Our organization name and a tag line is at the top of every page on the left, then our logo, then our navigation to items like "Topics" "FAQs" "About us" etc is to the right along the top.
Our organization name includes the most frequently searched keyword for what we want to rank on, and our organization name is our domain name.
A couple other background items: we're a non-profit startup and no code is public yet -- hence, I'll be explaining what we're going for. We're coding in straight html/css, not using Wordpress or anything like that.
When we originally DIY coded our draft homepage and a few landing pages, we put the organization name and tag line into the markup as text, to look like this:
Organization name | Pretty | Navigation items over here
Explanatory fun tag line | Cool |
--------------------------------------- | Logo | ---------------------------------------------------------Then we outsourced the markup of two more landing pages to a company that does on-demand orders for responsive markup, based on png's we sent of the designs. The company's code renders a fabulous looking version of our design, and important for usability, it is responsive. The company also did something else I'm not so sure of. They made one big image out of our organization name, tag line and logo ... because? The indenting and different font sizes of the Organization name and tag line was too hard to code in? Or is it just best practice for html standards, SEO, etc. to make it one big logo??
Now, as part of an overall effort I'm working on to reconcile our different code ... I'm mulling right now specifically on reconciling the different approaches we each took and incorporating new best practices for the header ... based on what I'm reading online about headers, including debates about whether to use h1 for your company name, whether using an image for the name is fine, advice about including Schema.org markup for logos, etc.
Given all this, which of these two options look better to you? Do they seem equally good to you? What would you change about the one that looks better to you? What do I have wrong in them? Or would you code this entirely differently to hit all best practices? What do you think about using h1 for organization name vs. is there a better tag to use for the organization name to code it in as text? (Note: we have other h1's on our pages for the actual article/content titles of each page, which maybe we should, maybe we shouldn't be having those as h1's?)
Option 1 -- using text for our name and tag line:
<header id="top" class="brandfont brandcolor">
[# Organization nameExplanatory fun tag line](/)
{navigation code here}
</header>Option 2 -- name, tag line and logo all as one big png image:
<header id="header" class="container">
{navigation code here}
</header> -
Well, thank you so much, I appreciate it. No need to apologize about WordPress man everybody has their own thing. Be pretty boring if everyone had the same tastes.
I think I added this reference twice but not intentionally, however, it's fantastic for schema. I also threw in a copy of one of my favorites the perfect website launch
- https://builtvisible.com/the-future-of-seo-structured-markup/
- https://pantheon.io/sites/default/files/perfect-website-launch-pantheon-ebook_0.pdf
I do believe there are huge positives to sites without databases or decouple WordPress installs are getting exciting.
I thought you might want to check it out as it is a best of both worlds use any code including and HTML and the CMS is utilized as the backend only. Decoupling the perfect blend of CMS and pretty much your choice of languages.
- https://pantheon.io/blog/decoupled-architecture-wordpress-and-drupal
- https://pantheon.io/wordpress/wordpress-enterprise-six-reasons-why
All the best,
Tom
-
Wow, you've put together a wealth of information! Thank you so much. For the community as well, this is a great collection of info about schema.org markup. It is great to get all the links, and it is great to know that you think option 2 is the better option, and it is great to get the additional examples of other schema.org markup. Apologies if I'm a little prickly about Wordpress -- I do use it for some things, but not using it here, so it is fabulous to be able to talk markup in detail with you
-
Okay, I was not trying to imply anything negative when I asked about a CMS.
You can do quite a bit with cookie-cutter WordPress you have tens of thousands of developers working on your side.
because everyone has their opinion so I wish you the very best with your site and I have added something that is great for SEO's of all levels I think it will be helpful.
- https://moz.com/beginners-guide-to-seo
- http://www.seobythesea.com/category/semantic-search/ ( Probably the foremost expert in structured data)
- http://blog.teamtreehouse.com/using-microdata-to-markup-structured-data
- https://clarknikdelpowell.com/blog/google-schema-support-for-logos-and-what-that-means-for-css/
- http://blog.teamtreehouse.com/writing-semantic-microformats-amp-microdata-in-html-markup
- https://builtvisible.com/the-future-of-seo-structured-markup/
- https://builtvisible.com/the-future-of-seo-structured-markup/
- http://tools.ranksider.com/rich-snippets
Knowledge graph important if you want that real estate to the right-hand side of your URL whenever it's queried.
[organization name]
![]([logo image url])
[Website]([website url])
Follow us on [Twitter]([profile url]), [Facebook,]([profile url]) [Google+ and]([profile url]) [LinkedIn]([profile url])."In a site design where your company/org name and logo is at the top of every page on your site, is it better to have your organization name (which contains your most important keyword) and tag line in an h1 within the header than it is to have it in an image file which gives the organization name and tag line as alt text? Or does that not matter to SEO?"
It does not matter except for being aesthetically pleasing. The H1 tag and the logo have two different roles and if there on the site H1 preferably used once with proper keywords. The logos an image, so the alt text is all Google gets in addition to indexing the image naturally. Brand awareness is important, but the logo in the left-hand corner and the logo is attractive to the end-user
"Is there some other tag that's better to use on your organization name in your header other than h1? Better for SEO and/or better for html standards and semantics?"
Use the title tag to reference your organization's name as end-users will see it before they click on your site. This is vital, and I have seen great results combining the title tag with the H1 you can use structured data as well.
"-Is putting your organization name, tag line and logo all together into one big image a best practice? I did not send the developer that as one big png. Only the logo itself was in the png I sent, and I was expecting our organization name and tag line to be coded using css styling to have the tag line indent, not for them to make a new png."
Normally yes that is the best way to do it. I cannot speak for your designer however it sounds like you are asking a designer to create CSS when you are a developer that prefers to hand build. You are going to have to work that one out with them. site speed is always affected when you add numerous CSS files. Combine them and minify them.
To answer your question between the two examples for search engine purposes there is realistically almost no difference. They are both going to function very similarly I would personally check out some generators or some sites from developers you admire. The way that your code looks is not as important is the way it functions. I think these examples have if I had to make a choice I would go with number two however you definitely want to check out schema.org
"Option 1 -- using text for our name and tag line:
<header id="top" class="brandfont brandcolor">
# Organization name
### Explanatory fun tag line{navigation code here}
</header>"
or
"Option 2 -- name, tag line and logo all as one big png image:
<header id="header" class="container">
{navigation code here}
</header>"
It’s as easy as including the following code in your website (with the correct file names and locations, of course):
[Home](http://www.yourcompany.com/) ![](http://www.yourcompany.com/logo.png) " data-snippet-id="ext.8ba7444c005a97ebcfda9fb38f150bdc" data-snippet-saved="false" data-codota-status="done"> `[Home](http://www.yourcompany.com/) ![](http://www.yourcompany.com/logo.png)`
- Best practices suggest that your logo should be a stand-alone file (not part of a banner image), visible on your home page, and should not be animated.
- If your site doesn’t use image tags to display your logo, but rather uses CSS to place your logo, you can use meta tags in your code, like this:
# [Your Company](http://www.yourcompany.com/") meta itemprop="logo" content="/images/logo.png" /> " data-snippet-id="ext.2b48ae5fa74df60ff44da6954bb1f3c2" data-snippet-saved="false" data-codota-status="done"> `# [Your Company](http://www.yourcompany.com/") meta itemprop="logo" content="/images/logo.png" />`
- Or, if your site uses JSON-LD or another supported programming syntax, you can use this code, which was added by Google last month:
{ "@context": "http://schema.org/", "@type": "Organization", "url": "http://www.yourcompany.com/", "logo": "http://www.yourcompany.com/logo.png" } " data-snippet-id="ext.c765c0f8ab5d485846e742be74338714" data-snippet-saved="false" data-codota-status="done">
Whichever code you use on your site, be sure to test it with Google’s Rich Snippets Testing Tool before going live.
What does the Schema.org markup do?
It simply tells the search engines that the image located at “http://www.yourcompany.com/logo.png” is the logo file they should use when they display it in search results.
so I would pick something a little bit more like this.
<title itemprop="name">Article's Web Page Title</title> <header> # The Article's Headline <time itemprop="datePublished" datetime="1990-11-12">November 12, 1990</time> By [Author Name](#author-profile.html) </header> Summary of the article. This could be the lead, excerpt, abstract, or introductory paragraph. The main body of the article goes here. <footer> This article was updated on <time itemprop="dateModified" datetime="2015-03-01">March 30, 2015</time> ## Related Articles [A Related Article](#related-article.html) [Another Related Article](#related-article-02.html) </footer> "> `<title itemprop="name">Article's Web Page Title</title> <header> # The Article's Headline <time itemprop="datePublished" datetime="1990-11-12">November 12, 1990</time> By [Author Name](#author-profile.html) </header> Summary of the article. This could be the lead, excerpt, abstract, or introductory paragraph. The main body of the article goes here. <footer> This article was updated on <time itemprop="dateModified" datetime="2015-03-01">March 30, 2015</time> ## Related Articles [A Related Article](#related-article.html) [Another Related Article](#related-article-02.html) </footer>`
http://codepen.io/blueprintmrk/pen/XKqwgk
I hope this helps,
Tom
-
No, we are not using a CMS. And there are no plans to start using a CMS.
If we do start using something, it would be something to manage the code, not the content. We will not be using Wordpress. We loathe Wordpress, and it is not a fit for our content to have a cookie cutter looking Wordpress site. We enjoy writing html and css, and the company I outsourced some of the html and css coding to -- the LOOK of what they delivered and its responsiveness is excellent.So we will have complete control over all the code/markup, and Wordpress won't be coming in to make our code choices redundant.
I guess the basics of my questions are -- in terms of SEO and overall best practice in your site's html:
-In a site design where your company/org name and logo is at the top of every page on your site, is it better to have your organization name (which contains your most important keyword) and tag line in an h1 within the header than it is to have it in an image file which gives the organization name and tag line as alt text? Or does that not matter to SEO?
-Is there some other tag that's better to use on your organization name in your header other than h1? Better for SEO and/or better for html standards and semantics?
-Is putting your organization name, tag line and logo all together into one big image a best practice? I did not send the developer that as one big png. Only the logo itself was in the png I sent, and I was expecting our organization name and tag line to be coded using css styling to have the tag line indent, not for them to make a new png.
-Are these two code options doing the schema.org markup correctly?
-
I will respond to this in full do you mind if I ask a quick question? Are you using a CMS
Because there is going to be a lot that you cannot necessarily control. You're asking about structure when you're talking about navigation and coding so you are going to need to develop the site with a good developer and they will most likely suggest a CMS something like WordPress I assume. This will many times make the format either redundant or not worth it. If you could break your question down into parts I would really appreciate it.
I don't see anything wrong with either one of them just remember the micro data is for end-users and Google open graph is normally what you see around the header of the website JSON-LD is completely invisible to the end-user but used by Google extensively.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Wordpress Tag Organization Tips
Curious if anyone has some good examples of ways to organize your WordPress tags without making your sidebar a football field long and hard to navigate. My blog is https://karmahill.com/blog and I could use some ideas. We have main categories of photo shoot types, for example, "Couples", located on the sidebar. We want to add tags to go with those main categories for further categorization and user experience example: Couples Engagement Proposals Honeymoon Maternity My question is, do I need to make "tag" pages for those posts to reside on or is their another way to get it done with less work, that is much faster? I don't want to have to make 30 tag pages or is that just what you have to do?
Web Design | | photoseo13 -
Using Button Links vs Sidebar Menu
I have a services page with a lot of rich text and a slideshow of images. Currently, I am using a column of buttons to various services, and am wondering if a sidebar menu would be more effective for Google to crawl and rank?
Web Design | | cinchmedia0 -
Post vs Pages
Does Google make any distinction between a web page and a blog post? Assuming all else is equal...any reason why a page would rank higher than a post? And that includes a page in WordPress vs a WordPress blog post.
Web Design | | Pinlaser1 -
Penguin 2.0 drop due to poor anchor text?
Hi, my website experienced a 30% drop in organic traffic following the Penguin 2.0 update, and after years of designing my website with SEO in mind, generating unique content for users, and only focusing on relevant websites in my link building strategy, I'm a bit disheartened by the drop in traffic. Having rolled out a new design of my website at the start of April, I suspect that I've accidentally messed up the structure of the website, making my site difficult to crawl, or making Google think that my site is spammy. Looking at Google Webmaster Tools, the number 1 anchor text in the site is "remove all filters" - which is clearly not what I want! The "remove all filters" link on my website appears when my hotels page loads with filters or sorting or availability dates in place - I included that link to make it easy for users to view the complete hotel listing again. An example of this link is towards the top right hand side of this page: http://www.concerthotels.com/venue-hotels/agganis-arena-hotels/300382?star=2 With over 6000 venues on my website, this link has the potential to appear thousands of times, and while the anchor text is always "remove all filters", the destination URL will be different depending on the venue the user is looking at. I'm guessing that to Google, this looks VERY spammy indeed!? I tried to make the filtering/sorting/availability less visible to Google's crawl when I designed the site, through the use of forms, jquery and javascript etc., but it does look like the crawl is managing to access these pages and find the "remove all filters" link. What is the best approach to take when a standard "clear all..." type link is required on a listing page, without making the link appear spammy to Google - it's a link which is only in place to benefit the user - not to cause trouble! My final question to you guys is - do you think this one sloppy piece of work could be enough to cause my site to drop significantly following the Penguin 2.0 update, or is it likely to be a bigger problem than this? And if it is probably due to this piece of work, is it likely that solving the problem could result in a prompt rise back up the rankings, or is there going to be a black mark against my website going forward and slow down recovery? Any advice/suggestions will be greatly appreciated, Thanks Mike
Web Design | | mjk260 -
Nav / Sitemap Question. Using a "services" page vs just linking directly to individual service page?
Okay, so our company offers video production, web design, and web marketing services. While we do offer these services individually, our goal is to get our clients to integrate these services together. Our nav is currently like so : home - about - video - web design - web marketing - blog - contact Now I've seen businesses and agencies also use a nav with a "services" button instead of listing out their service offerings (if they have more than 1, like us). The services button usually links to a category page or has a drop down with links to the company's individual services. I'm wondering if there is any benefit to having a main services page like this and linking to the individual pages off of it (video ,web design, marketing, etc). Or if we should just keep it the way we have it now (since we've already got some page authority on the individual service pages). I know this may not be the most important aspect of our site and we may be over-thinking it but any thoughts/ideas would be greatly appreciated, thanks!
Web Design | | RenderPerfect0 -
Schema.org - Right way to mark the pages
Dear all, Almost since we started designing our site, we are using schema microdata. It is not only because of the rich snippets, but because I want the search engines to better understand what we have. For example, the +1 buttom would not work properly without schema microdata, because it kind of ignores the OpenGraph parameters that specified image and description; and since we are a (very small) local bussiness directory (between other things), all our clients have a hand written schema complient description on their lisings, including address, opening ours, telephone number, description, etc. It is hand written by us because the tools avialable are simply not good enough to cover all different scenarios that a listing can present. I have not use, until today, a proper for the homepage, and it is probably the cause that our page lost the nice links below the site description in the google snippet. I did not place it on the body tag, but near the description, closing it inmediately after the description finishs. Now this is solved and we will wait to see if the links come back in the next weeks. Now to the question. Our site has three sections, with three different systems installed, two running wordpress and a third running another script. the main site is the local bussiness directory. The front page is mark as "schema.org/WepPage", and I do not know how to mark the other pages of the main site. I was thinking of marking the listings as "schema.org/ItemPage" since they are related to specific clients. Would you consired it to be right? Then, we have landing pages for the categories, should they be mark as WepPage, or as an Article, or something else? Many thanks in advance for your help, Best Regards, Daniel
Web Design | | te_c0 -
Duplicate H1 tag IF it holds SAME text?
Hello people, I know that majority of SEO gurus (?) claim that H1 tag should only be used once per page. In the landing page design I'm working with, we actually need to repeat our core message stated in H1 & H2 - at the bottom of the page. Now the question is: Can that in any way cause any ranking penalty from big G? In my eyes that is not attempt to over optimize page as it contains SAME info as the H1 & H2 at the top of the page. Confusing, so I'm hope that some SEO gurus here will share some light on this. Thanks in advance!
Web Design | | RetroOnline0 -
Anyone Know Of A WP Plugin for Before and After Pictures
Hey Mozzers- Does anyone know of a good WordPress Plugin for displaying before and after images. This could be for a docs office, etc. Any feedback would be great! Thanks!
Web Design | | kpeacy0