MetaMaker 2.9 (menu Plugins)

Allez à l'Éditeur de Metas par le menu Plugins.

Si le menu Plugins est vide, ou ne contient pas le plugin :

  • Vérifiez que le plugin « MetaMaker.livecode » se trouve bien dans le dossier de plugins « htmlstyles_plugins »; sinon placez-le à l'intérieur.
  • Cliquez l'icone « plugin update » plugin update en haut à droite de l'écran HTML Styles pour mettre à jour le menu en fonction des plugins installés.
htmlstyles.livecode
htmlstyles_plugins
MetaMaker.livecode

bouton plugin Cliquez l'icone plugin version pour accéder à l'aide en ligne.
L'éditeur permet de préparer les Metas à placer dans une page HTML. Il est divisé en 6 onglets :

  1. Title : titre de votre document ;
  2. Description : description résumant « naturellement » votre page ;
  3. Keywords : mots-clés ;
  4. General : codage, langue de votre page et robots notamment ;
  5. Open Graph : metas facultatifs destinés aux réseaux sociaux qui améliorent la compréhension de la page ;
  6. Spéciaux : d'autres metas - très facultatifs - à placer sur votre page principale.

Les trois premiers onglets sont conçus pour optimiser le référencement de votre site : à la saisie, une diode indique l'adéquation des données saisies - titre, description et mots clés - au référencement.

données correctes pour le référencement données correctes pour le référencement ;
données insuffisantes pour le référencement données trop succinctes ;
données excédentaires pour le référencement données excédentaires.
Boutons de commande
importe une page web localeOuvre la page à éditer et charge les metas qu'elle contient.
L'adresse de la page chargée s'affiche dans le champs à droite.
Pour ouvrir un modèle de Meta, enfoncer la touche ALTALT avant de cliquer le bouton.
visualiserAfficher la page actuelle dans le navigateur pour la contrôler (et copier le texte pour alimenter les mots-clés). Visible uniquement si une page est chargée.
agrandir ou diminuer la police d'affichagePermet d'augmenter ou de diminuer la police d'affichage. mesure des longueurs de metaCalibre le texte saisi par rapport à une fourchette de longueur « recommandée » (title, description et keywords) : la longueur minimum recommandée est affichée en bleu, ce qui permet de visualiser plus facilement les sacrifices à faire.
copier les metas et ouvrir la page pour l'éditerOuvre la page courante dans l'éditeur de texte pour y coller les metas préparés. enregister un modèle de metaPermet d'enregistrer un modèle de meta qui pourra reservir pour d'autres pages.
effacer toutEfface tout. lire autre metaImporte un meta d'une autre page (ou d'un modèle de meta si l'on enfonce la touche ALTALT avant de cliquer le bouton).
ouvrir le répertoire dans lequel se trouve les imagesPermet d'ouvrir le répertoire dans lequel se trouve la page actuelle. alternate folderlistPermet d'accéder directement à une page du répertoire dans lequel se trouve la page actuelle (visible uniquement si une page est chargée).
supprimer les doublesÉlimine les mots-clés en double (onglet « Keywords» ). collage de mots clés avec filtrage par ordre d'importance dans la page.Collage de mots clés avec filtrage par ordre d'importance dans le texte de la page (onglet « Keywords» ).
aperçu GoogleGénère une page simulant l'aperçu Google de toutes les pages du site.   

Onglet Meta title

Exemple d'un titre correct faisant 9 mots alors qu'une fourchette de 7 à 10 mots est recommandée.

meta title

Onglet Meta description

Exemple de description un peu trop longue il y a 198 caractères. En bleu, les 15 premiers mots, en gris le texte superflu.

meta description

Onglet Meta keywords

Exemple de mots-clés insuffisants il n'y a que 29 mots alors qu'une fourchette de 50 à 100 est recommandée. Toutefois, il est inutile de placer des mots-clés qui ne sont pas également présents dans le texte de la page : alors, c'est peut être assez !

meta keyword

Astuce pour créer les mots clés présents dans la page

Onglet Meta general

meta généraux : Content-Language, Content-Type, robots
Détail des lignes générées par l'onglet général
DOCTYPEtype de document et niveau de HTML

Metas

définis à partir d'une case d'option à cocher ou d'un menu local :
  • L'option "défaut" signifie que vous ne souhaitez pas le Meta.
  • Les autres options vous donnent accès aux autres paramètres du Meta.
remarque
Content-Languagelangue du document.
Remplacé en HTML5 par un attribut de la balise html.
indispensables
Content-Script-Typeprésence de langage javascript dans le document. Abandonné en HTML5.
Content-Style-Typeprésence de style CSS dans le document. Abandonné en HTML5.
Content-Typeencodage des caractères du document. Remplacé par charset en HTML5.
robotsindique s'il faut indexer la page et suivre les liens internes
Date-Creation-yyyymmddDate de création du documentFacultatifs
Date-Revision-yyyymmddDate de révision du document
Date-index-yyyymmddDate index du document spécifiques HTML Styles
smap-orderordre de tri des pages dans un plan de site généré par HTML Styles
smap-stitletitre abrégé de page pour un plan de site généré par HTML Styles

Onglet Open Graph

Metas Open Graph

Le protocole Open Graph permet d'optimiser le contenu d'une page web afin que les utilisateurs puissent la partager sur les principaux réseaux sociaux Facebook, Twitter, Pinterest, etc. Techniquement, ce sont de simples balises META qui indiquent quel est le contenu de la page web. D'ailleurs, retenez que les moteurs de recherches utilisent ce protocole pour mieux comprendre quel est le contenu d'une page web.

Onglet Meta spéciaux

metas spéciaux

L'utilité de ces metas est discutable : ils ne sont probablement pas exploités aujourd'hui par les moteurs d'indexation, mais il peuvent prendre leur place dans la page principale du site.
Le meta Google "verify-v1" est une des méthodes servant à authentifier le possesseur du site.
Le meta content-security-policy sert à spécifier d'où peuvent provenir les éléments de la page, exemple :"default-src 'self'; img-src 'self' data: ; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com/ ; script-src 'self' 'unsafe-inline'; media-src *"