Right now, I see a lot of website they use text logo replace image logo. What is different between text and image on the our website? If you any one have any idea please share.
Example:
http://getbootstrap.com/
https://ghost.org/
Inspect element on logo for both websites above. I saw they use text not image for they logo.
A good reason to use text instead of an image is SEO (search engine optimization).
Search engines will look for text in the <h1> element as one of the strongest indicators for what the page contains. If you don't have an <h1> element, or if it just contains an image, the search engine will be less sure of what the page contains.
Pages with a <title> and an <h1> that are at least partially equal, have a better chance to make good search results.
One way to have a nice image as logo and still present the text to the search engines, is to put text in the <h1> element, then use CSS to hide the text and show an image instead.
Related
I have just started using Google sheet's "IMPORTXML" formular to extract webpage meta data for a SEO project.
I am stuck with the following questions:
How to use this formular and XPATH to extract a list of images (on a
page), which don't have an alt tag?
Similar as the question above, how to extract a list of images (on a page), which have an alt tag?
How to extract a list of images (on a page), which do or don't have a
title tag?
Thank you for your help in advance!
Note:
See an example of my question here:
I also referenced the formular on this post http://slesinsky.org/brian/code/xpath_checker.html, which is very old and seemd no longer working.
For the images that have an alt tag, use
=IMPORTXML(A2, "//img/#alt")
For those that don't, use
=IMPORTXML(A2, "//img[not(./#alt)]")
Note that in your example, there is only one img with no alt, so the cell will appear empty, but the selection is made.
I want to allow authors to enter long descriptions in the CKEditor image plug-in dialog, descriptions which then are available to screen readers via the aria-describedby attribute. In our use case, authors work in a WYSIWYG mode; they're not expected to edit raw HTML, so we can't ask them to enter an ID in the image dialog, add a corresponding ID to some other element, etc.
It's a trivial matter to enhance the CKEditor image plug-in dialog to have a field where the author can enter a long description to accompany the short alt description. The result could be something like <img data-long-description="this is a long description" alt="short description" />. But what we need is <img aria-describedby="longDescriptionID" alt="short description" />, where longDescriptionID is the ID of some element on the page (hidden from sighted users or not)....
I have a couple of possibilities in mind. (1) keep the image plug-in doing what it does: output an <img /> tag, as in the first example, and then some other code in the end user-facing view has the responsibility to find data-long-descriptions, replace them with IDs (randomly generated, say) in an aria-describedby attribute, and somewhere in the view insert corresponding content hidden from visual users, so that screen readers will pick it up.
Possibility (2) is to have the image plug-in output something like <span class="accessibleImage"><img aria-describedby="randomID1" alt="short description" /><span id="randomID1" class="accessibleLongDescription">This is nice, long description of the image blah blah blah</span></span>, where .accessibleLongDescription is hidden except to screen readers.
It's good that you're looking into this. More detailed descriptions for images are often useful. A couple of thoughts...
It isn't just people who use screen readers that find longer descriptions useful. People with cognitive disabilities will often benefit from more detailed explanations of complex images. If you can make the descriptions available on demand to anyone, this will help more people.
When the description is inserted into the DOM it needs to be immediately after the image it relates to. Screen readers use a translation of the DOM known as the accessibility tree to access content, so DOM order is important.
So one possibility is to combine your methods - search/replace the data attribute as you suggest in your first method, then insert the description based on the pattern in your second method.
Another possibility might be to use a disclosure widget pattern instead. Represent the image as the trigger control for the disclosure, and make the detailed description available when the widget is expanded.
A reasonable disclosure widget pattern is here.
While creating and learning bootstrap page. I came across the content attribute of css I read few articles and I got how it works. But following code snippet shows me an image icon but the content attribute value really isn't the image url but a code. I'm not clear as how we can show the image without the url and where is the image coming from?
.test.glass i:before {
content: "\e001";
}
Following is the html element to show an image icon using above css:
<span class="test glass"><i></i></span>
But what is "\e001" is that an image code or something else?
they are utf8 codes. there are plenty of sites describing the glyphs for different standard fonts but you can also define your own font set with whatever images you choose as whatever character.
if you use a webfont, from fontello for example but are plenty of sites like that one, you can define what image to use as character \e0001 and whenever you want to use that image, you must make sure you use that font-face for the element and use the utf8 code to display the image. in html it would be someting like <span class="iconfont"></span>. if you add the image with css then is like in your example.
I have a website with newspapers frontpages so pages contain only big images and no text (neither description, because images change daily).
What's the best way to insert context keywords in the pages?
Is correct insert in body only keywords without link?
if you can change image names put keywords in those & also use related words, synonyms, plural / singular
also add alt & title attributes
Even though your pages do not have any content (only images), you still can provide proper page descriptions which will be used by Google (and other search engines).
A couple of handy tips:
Create unique, accurate page titles using <title> tag placed within the <head> tag.
Please bear in mind that Google does not recommend putting keywords into the title tag. So it is very good practice to make sure that your title effectively communicates the topic of the page's content.
Use the description meta tag (<meta name="description" content="">) to gives any search engine a summary of what the page is about. It is very good practice to use unique descriptions for each page.
Use the keywords meta tag (<meta name="keywords" content="">) to give page related keywords.
Also, as far as images are concerned, I would recommend using proper use of alt and title attributes providing description of your image content. Image names can sometimes be composed of some identifiers which are meaningless for customers.
Please have a look at Matt Cutts Blog page: Gadgets, Google, and SEO where Matt describes in details importance of correct informations in alt and title attributes of an image tag.
Problem
I'm doing some maintenance and changes on a Drupal site, but I'm not an expert. My problem is the following. I have a view that produces an HTML table by fetching some field values and putting them into the table columns. One of these field is an image. Unfortunately each image has a different size (images are uploaded by users), and so the overall table looks ugly. I would like to resize/scale images so that they all have the same width. I know I can use CSS to set the image width to a fixed value, and let the height adjust accordingly:
<img src="..." style="width:70px"/>
Unfortunately I don't know how to make Drupal output this custom HTML when processing my view. Currently the produced HTML looks like this:
<img
class="imagefield imagefield-field_imgsmall"
width="100"
height="39"
alt=""
src="http://www.mysite.org/sites/default/files/foobar.png?1292948397">
and I guess this is produced by one of the view's fields (namely field_imgsmall).
First question is: what is that number after the ? in the src URL? And where does it come from? (Each image has a different number in the corresponding src URL)
What I've tried
I've noticed that in the "edit view" mode, when selecting a field, I can check the option Rewrite the output of this field, and there I can mix HTML and substitution patterns. However, I've seen that one of the substitution patterns that's available to me ([field_imgsmall_fid]) is actually producing the entire HTML above ... so I can't customize it.
What can I do? Am I going in a totally wrong direction?
You should look into the imagecache module, which allows you to resize images (and cache the results, so the resizing process rarely happens).
Here's a walkthrough:
http://2bits.com/articles/drupal-using-imagecache-with-views-and-cck-imagefields.html