Mp3, vidéos et images, des atouts pour votre promo musicale en ligne.

Si lors du précédent article nous nous sommes concentrés sur les contenus "texte" d'un site de promotion artistique.

Nous allons voir ce qu'il convient de faire pour les contenus multimédia tels que les images, les vidéos et les fichiers audio.

Vous vous demandez pourquoi votre site d'artiste ne reçoit que peu de visite ou quels sont les points cruciaux à respecter lors du développement de votre futur site de présentation et de promotion musicale.

Ce troisième volet de notre dossier "Une promotion musicale en ligne efficace" se focalise sur les éléments image, audio et vidéo.

Les images :

Une image parle d'elle-même à vos visiteurs mais ne dira rien telle quelle aux moteurs de recherche tels que Google Bing et Yahoo. Il faut la leur décrire ! Et pour cela le code HTML comporte plusieurs attributs dédiés comme "alt" et "title".

Voici un exemple de code html pour une image :

<img src="http://www.monsite.com/image.jpg"/> 

Ce code parfaitement valide ne renseignera pourtant pas les moteurs du sujet de l'image et cette dernière ne se retrouvera sans doute jamais dans les résultats de recherche de Google image. Dommage !

Voici le même code qui donnera l'information aux machines du web :

<img src="http://www.monsite.com/image.jpg" alt="Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe"/> 

Si l'attribut "alt" est présent et remplit les moteurs de recherche vous en seront reconnaissant et l'indexeront comme il se doit soit sur le nom du groupe, le style musical ou l'auteur de la photographie. C'est nettement mieux, non ?

Pensez à ceux qui ne peuvent pas vous voir :

L'attribut "title" n'est pas à négliger, outre qu'il permette l'affichage d'une info-bulle au survol de la souris, il est lu par les "lecteurs d'écrans" et renseigne ainsi les utilisateurs aveugles ou malvoyants de l'objet de l'image. 

Exemple : 

<img src="http://www.monsite.com/image.jpg" alt="Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe" title="Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe"/>

Indiquez la taille !

Dernier point sur les attributs d'une image : sa taille. En effet notre code ne dit pas au navigateur comment afficher cette image dans la page et l'indiquer accélérera l'affichage. La rapidité d'affichage d'un site est de plus en plus appréciée par Google, faite lui plaisir...

Exemple : 

<img src="http://www.monsite.com/image.jpg" alt="Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe" title="Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe" width:"240" height="160"/>

Cette taille exprime des pixels.

Pour bientôt ou tout de suite :

La nouvelle norme HTML5 prévoit la balise "<figure>" qui permet de regrouper des éléments multimédias telles que les images ou les vidéos ainsi que leurs descriptions. Cette balise peut informer le moteur que ce contenu regroupe une image et une description textuelle visible par l'utilisateur.

Exemple : 

<figure>
<img src="http://www.monsite.com/image.jpg" alt="Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe"/>
<figcaption>Les membres de Nomdemongroupe - Pop Rock Electro - 2013 Paris par Nomduphotographe</figcaption>
</figure>

Ce codage plus sémantique sera bientôt la norme, pensez-y dès maintenant si vous le pouvez.

Les vidéos :

Trois grandes options s'offrent à vous : 

• Héberger vos vidéos sur votre propre serveur.
• Héberger vos vidéos à partir de youtube, de Viméo, Vine et / ou autre plateforme de vidéos en ligne.
• Faire les deux à la fois et cumuler les points de diffusion.

De notre propre expérience, le mieux serait de mixer les différentes possibilités avec selon les cas le cumul des plateformes de diffusion.

Héberger et diffuser les vidéos à partir de son hébergement :

L'avantage de cette solution est que vous détenez le contenu et il faut obligatoirement se rendre sur votre site pour visionner votre dernier clip. A cette occasion vous pouvez inviter les visiteurs à écouter d'autres titres, à les télécharger ou à les acheter.

Le premier écueil vient du fait que vous ne disposez peut-être pas de la notoriété d'un Youtube et que vos chances d'être découvert est plus limité.

Deuxièmement, une vidéo est lourde et de nombreux visionnage peuvent mettre à mal votre serveur. De plus techniquement vous devez vous assurer que la vidéo sera lisible d'un maximum de visiteurs, et là vous allez devoir jouer avec les formats, les conversions et adapter le débit pour chaque type d'appareils et bande passante.

Avec Youtube ou Viméo pas de soucis de ce type, vous envoyez et ils se chargent du reste. A vous de voir le temps et les moyens que vous pouvez allouer aux vidéos. Le format MP4 est aujourd'hui largement couvert..

Ajoutez un lien de téléchargement direct peut-être un plus et surtout décrivez le mieux possible vos vidéos avec les informations qui aiderons les Google et autres à l'indexer avec ce qu'elle est, qui on y voit, ce qu'elle raconte, de quel style est la musique, qui y a participé, qui est le réalisateur, monteur, etc...

Héberger et diffuser les vidéos à partir de services en ligne : 

L'avantage technique cité plus haut est évident, c'est la facilité de mise en ligne et de diffusion, de plus pour les proposer à partir de son site il suffit de copier / coller le code fourni à cet effet. L'inconvénient est que le contenu n'est plus vraiment en votre possession et qu'il est moins aisé d'amener un spectateur à visiter votre site après visionnage. Pour remédier à cela il faudra du texte.

Optimiser la visibilité et l'efficacité des vidéos mises en ligne sur les plateformes

Des mots, encore des mots toujours des mots ! Oui là aussi si vous devrez décrire votre vidéos comme décris plus haut. Pour cela vous aurez à la fois le champ "description" et les "Tags" servant à classifier les vidéos. Soyez clair précis et sympa. N'oubliez pas en suite d'inviter à la visite de votre site en insérant un lien ou l'adresse de votre site web.

Point technique : Vidéo et HTML5

La nouvelle norme HTML5 propose une balise spécifique pour les vidéos, utiliser cette technique pour les diffuser à partir de votre site est un bon choix, bien meilleur que le Flash, qui ne sera pas lu sur les iPhones, iPads et Androîd.

Voici un exemple de code : 

<video width="520" height="300" controls="controls">
<source src="monclip.mp4" type="video/mp4" />
<source src="monclip.webm" type="video/webm" />
<source src="monclip.ogv" type="video/ogg" />
Texte de description de la vidéo...
</video>

Vous noterez qu'une même vidéo est proposée dans plusieurs formats afin d'assurer la compatibilité avec les différents navigateurs du marché. MP4 est accepté par Safari et Chrome, WebM par Chrome et OGV par Firefox. Vous pouvez inclure ce code dans une balise <figure> comme vu précédemment à la place de la balise IMG.

Et l'audio alors !?

Et bien c'est un peu comme les vidéos. Avec l'avènement des plateformes musicales telles que SoundCloud, Bandcamp, etc... Mêmes choix et mêmes solutions.

Là encore pensez à décrire les fichiers audio que vous mettez à la disposition du public : Titre, sujet, auteur(s), musiciens, liens vers votre site, etc...

Une astuce promo peut être de proposer quelques titres uniquement disponibles à partir de votre site personnel et de l'annoncer sur ces plateformes, un bon moyen d'obtenir des visites.

Point technique : Audio et HTML5

Là aussi HTML5 apporte une nouvelle balise avec "<audio>" qui est semblable à la balise HTML5 <video>.
Exemple :
<audio controls="controls">
<source src="monclip.mp3" type="audio/mpeg" />
<source src="monclip.m4a" type="audio/aac" />
<source src="monclip.ogg" type="audio/ogg" />
Texte de description du fichier audio...
</audio>

D'autres formats sont disponibles tels que WAV,WMA... Les trois présentés dans l'exemple suffisent pour assurer la compatibilité avec les principaux navigateurs. Comme pour la vidéo, Flash est à proscrire si vous souhaitez une compatibilité avec les Smartphones et les tablettes de plus en plus utilisés.

Web sémantique :

De nouveaux moyens s'ajoutent aujourd'hui pour décrire et informer les moteurs de recherche des caractéristiques d'un objet multimédia. Il s'agit des microformats, RDFa, Schemas qui sont des balises structurées et à même de décrire pour les "machines" un contenu. Ce sujet fera l'objet d'un prochain article

Conclusion :

Suivre ces quelques conseils peut faire la différence et augmenter fortement votre visibilité et l'efficacité de votre site de promotion musicale. Veillez bien à ce que ces attributs soient accessibles via votre CMS lors de l'édition et que les "bonnes" normes soient utilisées.

Ressources :

HTML5 Vidéo : http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
HTML5 Audio : http://html5doctor.com/html5-audio-the-state-of-play/ (en anglais)
Sémantique : http://schema.org/ 

Lien permanent vers cet article : Mp3, vidéos et images, des atouts pour votre promo musicale en ligne.

Retrouver l'auteur sur Google+