I need to add space between "who" and "we are". If I add space inside it's delete in DOM.
<h2>
<span>who</span>
<br>we are
</h2>
I want to add this space, becouse in seo audits i have:
whowe are
I want:
who we are
Well, for SEO and maybe accessibility (as well as using some browser related features like Mozilla Firefox reading mode, RSS Feeds and such sings), you will improve the structure of your markup by using a close to english language, using a single sentence and then use css styles to put the content in two lines.
That's what CSS is for, set the apparence of your content. In your case you use HTML which is intended to structure your content. Changing HTML purpose is the cause of your issue.
<h2>
<span>who</span> we are
</h2>
with a style that will lead to a one liner span should do the job :
h2 span {
display: block;
}
Or anyone of the others solutions to this simple CSS behavior.
Use
<h2>
<span>who</span>
<br/>we are
</h2>
Related
Stackoverflow, please help!
I am developing a website using Bootstrap (3.1.1) and AngularJS for my friend's photography business.
The problem which I am encountering arises when trying to add a tab-space between words in the navigation bar, for example:
JOHN DOE
The only way in which I have been able to get this to work is by using <pre> tags, but this results in a completely different styling to that which is desired.
I have tried with and without using the AngularJS $Sanitize module, which had no affect.
I think I am missing something fundamental but I am obviously unsure as to what that is.
Thanks in advance,
JohnDoe
Using a span would provide much cleaner code.
JOHN<span class="tab-space">DOE</span>
Then the css:
span.tab-space {padding-left:5em;}
JSFiddle Example
Use CSS word spacing:
a.navbar-brand{
word-spacing:5em;
}
Or if you only want tab spaces in certain points, use:
<span class="tab-space"> </span>
And a similar CSS:
span.tab-space {
word-spacing:5em;
}
You could also do:
.navbar-brand {
{
white-space:pre;
}
To make the browser not collapse whitespace.
When styles to websites, its best practice to separate HTML markup from the CSS stylings of the page so that the content and stylings act independently and are more easily interchangable. This being said, its not clean to use HTML entities such as to affect style because it breaks this rule.
If you want some whitespace, wrap a <span> tag around the text and give it some padding.
HTML:
JOHN <span class="space-left">DOE</span>
CSS:
.space-left{
padding-left:10px;
}
I'm having to use a 3rd party CMS and I cannot change the contents of the h3 (or the h3 itself)
I've not had too much dealing with "cufon" - presume its an old fashioned way of using a specific font. I'm guessing it's not legit HTML so not indexed.
Therefore I wanted to include the page's header in an H1
<h3>
<span class="someClassDictatingTheFontToUse">
<cufon class="cufon cufon-canvas" alt="Alternative text " style="..inline styles..">
<canvas width="73" height="18" style="..inline styles.."></canvas>
<cufontext>Page </cufontext></cufon><cufon class="cufon cufon-canvas" alt="Page" style="..inline styles..">
<canvas width="76" height="18" style="..inline styles.."></canvas>
<cufontext>Content</cufontext>
</cufon>
</span>
</h3>
<!-- im proposing this -->
<h1 class="offthepage_or_verysmall">Page Content</h1>
<p>This is my content etc</p>
where
.offthepage { margin-left:-10000px; position:absolute}
or
.verysmall { height:1px, position:absolute; left:1px; etc }
Would the page be penalised (from SE indexing perspective) for that?
or is there a more robust / SE friendly way of doing it without it being consider keyword stuffing?
thanks
Cufon is a JavaScript-based tool that allowed for "pretty" font rendering via SVG, while still preserving the original text. Fonts to be rendered have to be converted into a vector format prior to being used by Cufon. The output might look sloppy in your developer tools after the DOM has fully loaded and JS has processed, but to really see what it's doing prior to all of that, try disabling JS in your browser or viewing the site as text-only. In the example you posted, you should see something along the lines of...
<h3>Page Content</h3>
...though you might also see SPAN tags and inline styles if that's part of the CMS output. That's what most search engines should be seeing. Give it a shot and let us know what is shown when you disable JS.
Here's a decent explanation of how it works with SEO: http://xsdesigns.se/2013/10/cufon-custom-fonts-hurt-seo/
Regarding the offscreen H1 issue, everything I've read says that Google does index CSS-hidden HTML elements. You may want to just use one of these instead of positioning it offscreen; it's a little more elegant (I also would reccommend not using inline styles to accomplish this if you can avoid it):
/* Takes element out of DOM layout entirely */
h1.offthepage_or_verysmall { display: none; }
/* Element still present in layout, but doesn't appear on screen */
h1.offthepage_or_verysmall { visibility: hidden; }
Now having said that, it's obviously not an ideal practice, and there have been strong rumblings that Google and others are processing JavaScript and CSS files along with the raw HTML output. It could be a penalization down the road. Use at your own risk.
I believe the google bot is primarily interested in html mark up as opposed to css/js, though this may change in future.
Google doesn't care for the fact that your h1 is hidden, off the page, or small. Google doesn't see the page as you do, it sees it more like a blind man using a screen reader does.
I have a HTML fragment, a list item of a long ordered list
<li>
<p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
<p class="English">The elders discussed the matter.</p>
</li>
How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.
How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?
I use
.nw {page-break-after:avoid;}
but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.
The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.
A solution is the following.
li {
page-break-inside: avoid;
}
It works fine in Firefox.
There are multiple factors in play, first in importance: The user's printer.
There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).
You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.
I suggest you read this: http://davidwalsh.name/css-page-breaks
And this :
http://www.w3schools.com/cssref/pr_print_pageba.asp
Do you mean to have no break between the p class?
You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,
<li>
<p>
<span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
<span class="English">The elders discussed the matter.</span>
</p>
</li>
Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs
Is this what you meant?
According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.
On the home page, is it best to use <h1> for the blog title or description?
By default Thematic (the theme I'm building my child theme on) uses <h1> for the blog description.
Also, I've replaced the blog title text with an image logo. Is this ok or should I still display the text and use text-indent: -9999px to hide it?
It all depends a bit on how related to your site your site description is.
If it's any important I'd wrap my site title between <h1> tags and my site description between <h2> tags.
If less important I'd wrap my site description between <p> tags.
I'd avoid using display:none to hide stuff, as Google or any other search engine is often confused when doing so.
There's a pretty good alternative though (also used within the WordPress TwentyEleven theme). A good tutorial about this is listed here: http://themeshaper.com/2011/02/17/css-tip-hiding-content-with-clip/
You should have an h1 on your page. It gives the page semantic meaning.
You should not, I think, hide the h1 if you are using an img as a title. This has implications for
search engines (who might think you are hiding content)
users with accessibility issues (screen readers)
yourself, for DOM manipulation if you forget it's there.
As far as SEO is considered, it is better to have your site a heading tags. Heading tags are good for SEO purposes.
Per google, It's not the best practice to hide content of the page. The text that describes your image is an alt tag, and this should be used for that purpose, not hidden h1 tag. Here : http://www.youtube.com/watch?v=GIn5qJKU8VM
http://www.youtube.com/watch?v=fBLvn_WkDJ4
h1 is the heading of your page, like the title of the chapter in a book. Every page on your site might have a h1 to help the reader understand the contents or purpose of that page. If you hide the h1 and replace it with a logo, search engines will still find it.
When I use images to replace H1/H2's (usually it's H2's for descriptions, and only on the home page) I always use text-indent to hide the text.
You want that text there so it can be indexed by search engines, but you want the image so it will look nice. Why settle for one or the other? :)
I also usually put the text inside of a span, then give said span the text-indent property.
I recommend against hiding, that's a tricky technique that can burn you. You very much want the text to be on the page. Thus the simple approach has some merit:
<img id="mybloglogo" src="myblog.jpg" alt="[My blog about great stuff]">
However, there is no perfect answer. See Replacing H1 text with a logo image: best method for SEO and accessibility? and google for this topic to understand the passion behind various views of this issue.
If you don't want to spend hours researching, you have a simpler option. View your page. Now disable CSS and look again. Now disable images and look again. If the page reads and works fine at each stage, you've got it covered for readers both human and robotic.
To turn off CSS in Firefix "View->Page Style->No Style".
The header tag, or the tag in HTML, will usually be the title of a post, or other emphasized text on the page. It will usually be the largest text that stands out.
On the home page, it's best to use the H1 heading to include the main keyphrase that you want to rank for in search engines like Google.
You should edit the Thematic theme to use your desired H1.
In a web page that shows a list of tutors, the current HTML codes:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
Now, for some reasons, the word Tutors which is currently wrapped by h1 needs to be removed in the page. I can think of 3 choices:
Use css to hide it.
Simply remove it, and the page will have h2
without h1.
Remove it, and change all h2 to h1.
Which one is more appropriate?
#3: Remove it, and change all h2 to h1.
For SEO, hiding text is frowned upon because it can be considered black-hat SEO. Unless you're going to replace the header with an image that has the text, "Tutors".
Should I include my logo text using 'alt' or CSS?
Hiding Text with CSS for SEO
If you insist on hiding the text, Accessibility/SEO Friendly CSS Hiding
You cannot have <h2> unless there's an <h1> beforehand.
Headings, heading hierarchy, and document outlines
None of these options are good SEO.
This is risky and a bad practice. Search engines have become very good at figuring out when text is hidden and if they find that a heavily weighted tag like <h1> is hidden it will hurt your rank.
You should never skip a step in the hierarchy of headers (don't have <h3>'s without <h2>'s etc.). In addition they should always appear in decreasing order of importance.
Every page should have exactly one <h1> and it should be the first heading tag. They are on the order of <title> in terms of SEO weight.
Why does this headline need to be hidden in the first place? It seems like a good description of the content of the page.
Depending on the use case for the page, any three of those sound like valid options. That said, here are some things I thought about when considering this question:
SEO: it appears there is some opinion out there that the choice of tag content may affect search engine ranking.
Style-less rendering: if for some reason the page might be rendered without the accompanying css sheets, be aware of the effect of default rendering on the page and how you might want it to perform
Be aware that there are new common tags like 'section' in HTML 5, which might fit your page and be a bit clearer semantically than H tags
This is a preference. You should always separate presentation and structure, so I would say just comment it out, and put that it use to be there. If you hide it, this really isn't presentation because it is never seen. So 3 would be the most appropriate.
Doesn't matter.
If you are using jQuery to show and hide things it has no bearing on SEO. Search engines see what you see when you view source in all practical senses. You aren't doing anything sneaky anyway.
Reference my post here on stack overflow If I do everything on my page with Ajax, how can I do Search Engine Optimization?
because what you are doing is AFTER the search engines have looked at it for all practical purposes.
Perhaps you should consider formatting these items as a definition list, e.g:
<div id="tutors">
<h1>Tutors</h1>
<div class="tutor">
<h2>John</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>Mary</h2>
<p>...</p>
</div>
<div class="tutor">
<h2>David</h2>
<p>...</p>
</div>
</div>
becomes:
<dl title="Tutors">
<dt>John</dt>
<dd>...Description here...</dd>
<dt>Mary</dt>
<dd>...Description here...</dd>
<dt>David</dt>
<dd>...Description here...</dd>
</dl>
And then apply CSS classes and styles to the elements to prettify it for sighted users. Just a thought.