I have came to know we can use the alt tag for better seo but iam confusing about the using of alt tag to my images.
I mean can we use - symbol between the keywords like facebook-tips-tricks or should i only use facebook tips tricks.
I have came to know google will also crawl images but how can we effectively implement in images in blogger posts.
There's no reason to use the - symbol. You need to simply put the alternate. Google will do it's work.
Example:
<html>
<body>
<img src="http://theartmad.com/wp-content/uploads/2015/04/Smiley-Face-7.jpg" alt="Smiley face" height="42" width="42"><!-- Will normally show the image, since path is valid -->
<img src="invalid path" alt="X" height="42" width="42"> <!-- Will show the alt, since there's no valid path. Will work without -'s. -->
</body>
</html>
As mentioned in the comments, you might want to read more about the purpouse of the alt attribute. You can do so here.
Related
I'm building a static Google Map URL to be used within <noscript><noscript> tag on a 'Find Us' page as fall-back in case a user has scripting turned off. Code thus far is:
<div id="map" class="map">
<noscript>
<img src="https://maps.googleapis.com/maps/api/staticmap?center=[lat],[long]
&zoom=17
&size=600x400
&scale=1
&maptype=hybrid
&visible=[lat],[long]
&key=[key hidden]">
</noscript>
</div>
However, on the resulting map image, there are markers for other businesses (e.g. orange knife & fork markers for restaurants) and/or points of interest.
I want to suppress the display of these markers, and add a custom marker for my location of interest (&markers=.... not shown in the code snippet above).
I cannot find anything in the Static Maps API documentation, nor on stackoverflow.
Is there a way to achieve this, or am I stuck with them on a Static Map?
Tack this on your query string:
style=feature:poi|visibility:off
You can find other stylings here.
I want to add schema.org to my site, I've read some guides for that and I understood the way I should do that. But should I add these tags for example for images and url:
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a itemprop="contentUrl" href="someurl" rel="bookmark">
<img src="someurl"/>
</a>
</figure>
to all my images, all my urls, all my pages or there is a way to do that globally for my site?
Yes, they are meant to be added to all your tags. That way you show search engines the semantic relationship between every item on your webpage.
If you don't use any programming or frameworks, you need to add them by hand.
It is a good practice to always validate them while developing to see how Search Engines will see them: http://www.google.com/webmasters/tools/richsnippets
I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
I need to have some hidden text in HTML to parse as text when i read an actual HTML file
I used to include my text in hidden div using style but i knew that may record us as spammers in SEO
.hideme {
position : absolute;
left : -1000px;
}
Can i have this content as commented text in the HTML ?
will that be safe as i know that SEO crawlers ignores the comments in HTML
<!-- my hidden text -->
Please advice
The search engines only care about hidden text when it is used to manipulate a page's rankings. Typically this is defined as content that is presented to the search engines that is not presented to users. So if you hide text so users can't see it but crawlers can you will find yourself having issues with Google. An example of when hiding text is good is when you use display:none to hide dynamic content and then use JavaScript or CSS to display the content when an action is performed (i.e. mouseover, etc).
If you place this extra content within comments as you suggest in your question you will be fine as this content is not available to users and search engines ignore comments.
Try to avoid "hide" in naming your CSS class.
But the best way is to avoid hidden text by finding easy and creative ways to add the text to the content of a web-page without seeming like spam.
You can't parse html comments so instead use a hidden field:
<input type="hidden" value="my text" name="my_hidden_field/>
Some people for SEO doing this :
.hideme {
width:0px;
overflow:hidden;
text-indent:-99999px
}
Why you do not use <meta> tags ?
This question is about Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.
I write a development blog on Blogger and I've changed my blog template so posts display HTML head title differently (post name first) from default (blog name first).
But. Since I format my inline programming code words similarly to Stackoverflow (gray background mono-spaced font) and do the same when I use any of them in blog post title... I enclose such code words inside <code/> element and then I have CSS set for this particular element to add it gray background and set mono-spaced font on it. This formatting works on blog post titles and its content.
But the problem I'm having is that these <code/> tags I use are also displayed in the HTML head title (displayed in browser window title). What is even more importan is that these get displayed in web search results as well. That's even more annoying.
Default template uses <data:blog.pageTitle/> in title element, which strips out any tags, but displays all titles as Blog Name: Blog post title (Google search results are quite meaningless because blog post title gets cut off). That's why I'm using <data:blog.pageName/> instead to display just blog post title in the head, but it still has all tags and I should strip them out somehow.
Check this blog post example. Load it, and look at browser's window title bar that still has tags displayed. I want them gone.
How do I strip tags from the post title when adding it to head element?
UPDATED
ok, so far this is what i worked out:
under settings -> Title -> put a nice
use <data:blog.pageTitle/> as title;
under design -> edit html -> replace theese lines
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Intestazione)' type='Header'/>
</b:section>
with your custom header like
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
aSeptik Site</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
</span>
</p>
</div>
</div>
</div>
</div>
<title> will result from:
jQuery <em>"scroll into view"</em> plugin (with an additional <code>":scrollable"</code> selector filter)
to
: jQuery "scroll into view" plugin (with an additional ":scrollable" selector filter)
hope this help, demo http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
try with a little bit of javascript in your <body> like this
<script type='text/javascript'>
document.title = document.title.replace(/(<([^>]+)>)/ig,'');
</script>
</body>
copy and past as is don't convert entities,
DEMO: http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
although, i'm not sure this is the
right solution for you since spiders
usually avoid js execution, and i
don't know how "html tags in the title"
affects the search results.