référencer mon site avec des images

**ickyknox** · 15/05/2012, 11h08

Bonjour,

j'ai créé mon site avec une police d'écriture qui n'est visible que par ceux qui l'ont installée.
Du coup , j'ai du créer les blocs de texte avec DES IMAGES.
Donc bien évidemment, aucun de mes texte ne facilitera mon référencement puisqu'ils sont imagée.

Ma question est :

si j'insère une zone de texte DERRIERE l'image, est ce que google va le référencer, meme si cette zone n'est pas visible à l'oeil nu ?

Je vous remercie

<config>Mac OS X / Safari 535.19</config>

**saymoneu** · 15/05/2012, 11h23

Salut,

Tu sais que tu peux intégrer une police dans ton CSS? Ca marche assez bien mais pas sur les vieux navigateurs par contre... Te suffit de faire par exemple

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@font-face {
	font-family: NouvellePolice;
	src: url('urldetapolice');
}

et après de l'appeler n'importe ou avec son nom (NouvellePolice ici).

Sinon, tu sais que l'attribut alt de la balise img sert spécifiquement à ce que tu es en train de décrire?

C'est d'ailleurs une necessité de toujours les indiquer, W3C approved.

**ickyknox** · 15/05/2012, 11h44

bonjour

merci pour votre réponse.
Mais c'est quoi un CS5 ?

ET LE CODE

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@font-face {
	font-family: NouvellePolice;
	src: url('urldetapolice');
}

dois je l'écrire dans un fragment HTML avant chaque texte que j'écrit? ou dois je l'écrire juste une fois ?

**saymoneu** · 15/05/2012, 11h53

CSS pas CS5

. C'est la feuille de style de ta page.

Tu devrais aller consulter ce lien ça te sera utile

Tu comprendras comment utiliser ce que je viens de t'expliquer.

Sinon, pour ton référencement, dans ta balise img tu mets

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="tonurl" alt="titre image pour le référencement">

**ickyknox** · 19/05/2012, 20h37

bonjour saymoneu,

merci pour cette réponse.
Suite à vptre message, je me suis renseigné pour créer du HTML.
Je n'arrive pas encore à obtenir le résultat voulu dans un PC qui n'a pas la police d'enregistré, donc voici ce que j'ai fais pour l'instant :

dans iweb j'ai créé un fragment html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
        font-family: BelleroseLight;
        src: url('http://plenitude-beaute06.com/font/bellerose-webfont.ttf');
    color: #d8da3d;
    background-color: transparent }
  </style>
</head>
<body>
<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>
<p>Bienvenue sur ma page avec du style! 
</body>
</html>

j'ai aussi essayé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Ma première page avec du style</title>
  <style type="text/css">
  body {
    font-family: BelleroseLight;
 src: url('http://plenitude-beaute06.com/font/bellerose-webfont.eot');
    src: url('http://plenitude-beaute06.com/font/bellerose-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://plenitude-beaute06.com/font/bellerose-webfont.woff') format('woff'),
         url('http://plenitude-beaute06.com/font/bellerose-webfont.ttf') format('truetype'),
         url('http://plenitude-beaute06.com/font/bellerose-webfont.svg#BelleroseLight') format('svg');
    font-weight: normal;
    font-style: normal;
 
    color: #d8da3d;
    background-color: transparent }
  </style>
</head>
<body>
<!-- Contenu principal -->
<h1>Ma première page avec du style</h1>
<p>Bienvenue sur ma page avec du style! 
</body>
</html>

hélas je n'ai que le texte et la couleur, mais PAS LA police.

J'ai trouvé un tuto :
http://www.creatiq.fr/tutoriels/util...e-font-face-36

ce tuto expliquer comment utiliser font face, mais je ne sais pas où trouver ce document qui se nomme style.css ??

**saymoneu** · 21/05/2012, 15h00

Bonjour,

En fait il faut que tu crées un fichier .css séparé dans le même dossier que ton fichier html. Tu l'édites avec le bloc note ou notepad et c'est là que tu mets ton code CSS. C'est bien plus propre comme ça. Tu lies ton fichier css à ton code html avec cette ligne de code insérée dans le head:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="tonfichier.css" />

Dans le fichier .css tu mets:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
@font-face{
font-family:BelleroseLight;
src:url('http://plenitude-beaute06.com/font/bellerose-webfont.ttf');
}

avec l'arobase devant c'est important. Maintenant si dans la suite de ton css tu copies ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
body{
font-family: BelleroseLight;
color: #d8da3d;
}

Ca devrait mettre la police correspondante. Il faut que tu comprennes comment lier les classes à leurs styles. Tuto

**NFélix** · 21/05/2012, 18h13

Bonjour,

Oui, il est possible que Google référence ton site avec les images. Tu peux placer les textes dans les légendes des images. D'ailleurs, l’optimisation des images est préconisée par Google, donc tu ne perds rien !

**saymoneu** · 22/05/2012, 09h43

Oui, comme je l'avais dit dans mon premier message, pour que les images soient bien référencées n'oublie pas de renseigner l'attribut alt !

exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="url" alt="Texte de référencement pour l'image">

**ickyknox** · 22/05/2012, 23h37

Merci beaucoup saymoneu pour la réponse.
Ca m'a enlevé une grosse épine du pied !!

Et est il possible d'insérer le document css à la racine du site afin qu'il soit utilisé par toutes les pages ? car à chaque fois que j'actualise le site je doit remettre le fichier css dans chaque dossier de chaque page.

Merci encore pour l'idée !!

**saymoneu** · 23/05/2012, 09h46

Bonjour

Bien sûr que tu peux c'est même recommandé! Le top c'est de mettre un dossier "style" avec ton (ou tes) fichiers .css. Tu peux utiliser le même style pour plusieurs pages bien sûr.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
/ = racine du site
|
|-- index.html
|
|-- pages
     |page1.html
     |page2.html
|-- style
     |tonstyle1.css
     |tonstyle2.css

Après il faut savoir écrire correctement le chemin vers ton fichier dans le href. Ca devrait donner un truc comme ça par exemple pour le lien depuis ta page1.html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" type="text/css" href="../style/tonfichier.css" />

Si ca ne te parle pas fais une petite recherche sur les chemins relatifs sur internet.

**ickyknox** · 23/05/2012, 17h38

Magnifique !! Ca fonctionne parfaitement !
Merci encore !!!

**talvins** · 24/05/2012, 11h23

Pas vraiment d'accord avec les réponses données, selon le contexte.
Faire un site n'est pas se contenter de techniques sans en connaitre les raisons de ce chois et ses conséquences.

Utiliser une web-font, ce n'est pas toujours recommandé (lisibilité, différence de lissage selon navigateur, poids de la fonte).

Utiliser l'attribut alt, c'est bien mais ça ne donne aucune valeur sémantique. On l'utilise quand l'image à un sens, utile pour la compréhension du contenu. C'est e cas ici, forcément, mais pour du texte en image, en général, ce n'est pas un bon choix.

Depuis des années se succèdent différentes techniques sur le remplacement d'image. Sous-entendu d'image utiliser pour un titre. Typiquement un logo.
Vous trouverez l'historique de ces techniques sur css-tricks.

J'ai longtemps utilisé la technique de David Shea et je viens de passer à celle incluse dans HTML5Boilerplate.

référencer mon site avec des images

Référencement

Discussions similaires

Partager

Partager