Archives du blog

ParThibault HEINRICH

Comment intégrer une vidéo YouTube à mon site ?

YouTube est une plateforme d’hébergement de vidéos permettant de publier, regarder, commenter, évaluer mais aussi partager des vidéos.

WordPress, au même titre que bien d’autres outils d’aide à la construction de site Web, permet d’intégrer le lecteur YouTube à votre site, vous permettant ainsi de diffuser des vidéos sur votre site. Votre site offre alors une fenêtre sur la plateforme YouTube où est hébergée la vidéo diffusée.

Récupérer le code d’intégration de la vidéo

  1. Rendez-vous sur la page YouTube de la vidéo à intégrer.
  2. Cliquez « Partager » sous la vidéo.
  3. Dans la nouvelle fenêtre, sous « Partager un lien », cliquez « Intégrer ».
  4. Copier le code commençant par <iframe... .

Intégrer la vidéo à ma page ou mon article

Par défaut, l’éditeur de votre page/article est en mode « visuel », ce qui vous permet de rédiger votre page/article avec une mise en forme assez proche du rendu publié. Le code récupéré précédemment doit être intégré via le mode « texte » de l’éditeur.

  1. Dans votre page/article, cliquez à l’endroit où vous souhaitez intégrer votre vidéo.
  2. Basculer l’éditeur en mode « texte » (dans le coin supérieur-droit de l’éditeur). Si vous utilisez un constructeur de page (Page Builder), sélectionnez un widget « HTML personnalisé ».
  3. Collez le code que nous avons récupéré plus haut.
  4. (optionnel) rebasculez sur le mode visuel de l’éditeur.
  5. Enregistrez la page.

La vidéo devrait désormais apparaître dans votre page/article.

D’autres plateforme comme DailyMotion ou Vimeo vous permettrons également de diffuser leurs vidéos depuis votre site suivant la même logique d’intégration.

Héberger mes vidéos sur mon site

Vous pourriez tout aussi bien choisir d’héberger la vidéo sur votre site, mais vous risquez de vous heurter rapidement à des problème de capacité : pour une vidéo de 3 minutes de qualité acceptable, comptez environ 200Mo.

Si vous tenez tout de même à héberger vous même votre vidéo, il faut la charger dans la bibliothèque de média comme n’importe quelle image. Les formats acceptés sont ‘mp4’, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’ et ‘flv’.

ParThibault HEINRICH

Comment ajuster la trame générale de mes pages (layout) ?

Le framework Genesis de StudioPress offre la possibilité d’ajuster la trame générale de vos pages (layout).

choisir une trame / layout

Le choix de la trame (layout) permet de positionner le contenu et la barre latérale.

Ce paramétrage permet de choisir la position du contenu de la page et du bandeau latéral correspondant à la zone de widget « Primary Sidebar ».

La trame générale par défaut des pages peut être ajustée à la rubrique « Genesis>>Theme Settings », section « Default Layout » (ou rubrique « Apparence>>Personnaliser>Site layout »).

La trame de chaque page peut ensuite être ajustée au cas par cas via la section « Layout Settings » de son interface d’édition.

ParThibault HEINRICH

Comment fournir un sitemap de mon site à Google Search Console ?

Le sitemap de mon site

En complément de l’enregistrement de votre site auprès de Google Search Console, il est judicieux de fournir à Google SC ce que l’on appelle un « sitemap », ou plan de site en français. Il s’agit d’une page spéciale à destination des « robots indexeurs » des moteurs de recherche. Cette page fournie une liste de toutes les pages présentes sur le site (sauf si vous avez paramétré des restrictions).

Cela offre à Google la possibilité de mettre à jour régulièrement sa base de données en tenant compte des évolutions de votre site. En conséquence, Google Search Console peut vous fournir une analyse poussée du référencement de votre site.

Mon sitemap généré par Yoast SEO

L’extension Yoast SEO pour WordPress est incontournable pour appuyer le référencement de son site. Parmi les outils proposés, Yoast permet notamment de générer une page de sitemap à destination des robots d’indexation.

Afin de bénéficier de ce service, il faut activer les réglages avancés de Yoast. Pour ce faire, à la rubrique SEO>>Tableau de bord, sous l’onglet « Fonctionnalités », basculez « Pages de réglages avancés » sur « activer », puis enregistrez les modifications.

Fournir un sitemap de mon site à Google Search Console

À la rubrique SEO>>Régalges généraux, sous l’onglet « Fonctionnalités », cliquez le « ? » à côté de « Plan de site XML », et copiez le lien ancré sur le texte « Voir le plan de site XML » ( ou cliquez le lien pour visualiser la page de sitemap).

Maintenant que vous savez récupérer votre sitemap, il vous faut le fournir à Google Search Console pour la « propriété » (c’est le nom que donne Google SC à chacun de vos sites) correspondante.

 

Retrouvez plus d’explications (en anglais) sur le sitemap de Yoast, ainsi que des copies d’écrans ici : https://yoast.com/what-is-an-xml-sitemap-and-why-should-you-have-one/

 

ParThibault HEINRICH

Comment valider la propriété de mon site demandée par Google Search Console ?

Valider la propriété de mon site auprès de Google avec Yoast SEO

Google Search Console (Google SC) est un outil intéressant pour optimiser le référencement de son site auprès de Google. Pour bénéficier de cet outil, il est nécessaire d’enregistrer son site Web via l’interface de l’outil. Afin de retourner les conseils à la bonne personne, la Google SC vous demande de valider la propriété des sites que vous lui soumettez.

L’extension Yoast SEO permet, entre autres choses, de faciliter la validation de propriété de votre site.

Pour cela, rendez-vous à la rubrique SEO>>Tableau de bord. Sous onglet « Outils pour les webmasters », ouvrez le lien (dans un nouvel onglet avec [Ctrl] + clic) « Google Search Console »

Sur la page de Google SC, sélectionnez « HTML Tag », puis copiez le contenu révélé ( <meta ... ).

Webmaster Tool validation

validation de la propriété d’un site auprès de Webmaster Tool

De retour dans votre interface WordPress (l’onglet de navigation précédent), collez le contenu copié précédemment dans le champs « Google Search Console »

Yoast SEO et Google Search Console

Validation Google Search Console avec Yoast SEO

Pour mieux comprendre la manipulation, en haut de cette rubrique, consultez la section « Besoin d’aide? » (vidéo en anglais).

ParThibault HEINRICH

Comment forcer l’ouverture d’un lien dans une nouvelle fenêtre de navigation ?

Pour des raisons de référencement, il est très intéressant d’insérer, dans vos pages ou vos articles, des liens vers d’autres sites Web. Mais vous offrez par là même une porte de sortie à l’internaute qui consulte votre site.

C’est pourquoi il est judicieux de forcer l’ouverture des liens externes (ceux qui pointent d’autres sites) dans une nouvelle fenêtre de navigation. Ainsi l’internaute peut consulter le site que vous lui suggérez sans interrompre définitivement la lecture du votre.

Paramétrer un lien dans l’éditeur WordPress

Une fois que vous avez cliqué le lien à modifier, cliquez le bouton « crayon » sur la droite. Un nouveau bouton apparait.

modifier un lien

Modifier un lien avec l’éditeur de texte TinyMCE

Dans les options du lien, cochez la case « Ouvrir le lien dans un nouvel onglet ».

Lien externe vers nouvel onglet

Demander l’ouverture d’un lien dans un nouvel onglet.

Il ne vous reste qu’à valider puis enregistrer votre page / article.

ParThibault HEINRICH

Comment ajuster le style de ma mise en forme « Page Builder » ?

L’extension Page Builder par SiteOrigin permet de construire une page (ou une section de page) à l’aide de rangées, colonnes et widgets.

En plus de l’agencement, Page Builder permet d’ajuster le style de chaque rangée (respectivement de chaque widget). Les paramètres de style sont positionnés à droite la fenêtre de modification de rangée (ou de widget). On y trouve les trois sections suivantes :

  • Attributs : lorsque la mise en page est gérée de façon globale ou pour attribuer des règles de style avancées.
  • Disposition : la disposition de la rangée (respectivement de la colonne ou du widget).
  • Design : ajouter une couleur ou une image de fond, ajuster le comportement de l’image.
ParThibault HEINRICH

Pourquoi je ne trouve pas mon site dans les pages de résultats des moteurs de recherche ?

En phase de construction, il est préférable que le site ne soit pas visible par les moteurs de recherche.

Pour permettre l’indexation de votre site, rendez-vous à la rubrique [Réglages >> Lecture] et vérifiez que la case « Demander aux moteurs de recherche de ne pas indexer ce site » est décochée.

ParThibault HEINRICH

Comment présenter mes réalisations / mon portfolio ?

L’extension Genesis Portfolio Pro peut vous aider à présenter vos réalisations en 2 étapes.

1 – définir vos réalisations

La rubrique « Portfolio Items >> All Portfolio Items » à la mème présentation que la liste de pages. Il faut ici qu’à chaque « Portfolio Item » corresponde une réalisation. Lorsque vous éditez un « portefolio Item », il est essentiel de définir une « image mise en avant » (bloc de la colonne de droite, sous le bloc « Publier ») qui sera l’illustration principale de votre réalisation.

2 – présenter vos réalisations en page d’accueil

Dans cet article, je réponds à la question « Comment insérer les éléments du portfolio… »

Donc à la rubrique « Apparence >> Widgets », choisissez une zone et insérez un widget de type texte en y ajoutant le code [display-posts post_type="portfolio" image_size="portfolio"]
De la même façon, vous pouvez insérer ce code dans n’importe quelle page où vous souhaitez présenter vos réalisations.

ParThibault HEINRICH

Comment faire un lien vers une partie/section spécifique d’une page ?

L’article Typologie d’une adresse Web nous explique que pour faire un hyperlien vers une section spécifique dans une page, il faut récupérer l’identifiant de la section concernée.

L’extension PageBuilder de SiteOrigin permet de construire une page par empilement de rangées, chaque rangée présentant des colonnes, et chaque colonne, un empilement de widgets. L’outil permet également d’attribuer des identifiants aux rangées (ou aux widgets) alors définies.

Attribuer un identifiant unique à une rangée

Pour attribuer ces identifiants, il faut modifier la rangée (ou le widget).

rangée page Builder

modifier une rangée

identifiant rangée Page Builder

Définir un identifiant unique pour une rangée

À droite, dans la section nommée « Attributs », l’identifiant doit être saisi dans le champs « Row ID » (ou « Widget ID »).

 

Exemple

Ma page « Événements », accessible à l’adresse http://monsite.com/evenements , présente une section « Séminaires » suivie d’une section « Formations ».

Côté administration, la page « Événements » présente deux rangées : l’une consacrée aux séminaires et l’autre dédiée aux formations.

Si j’ajoute le Row ID « formations » à la seconde rangée, alors je peux exploiter le lien http://monsite.com/evenements#formations . Celui-ci renverra à la section « Formations » de ma page « Événements ».

ParThibault HEINRICH

Comment retrouver le comportement d’un site « one page » ?

Un site dit « one page » rassemble l’essentiel de son contenu sur une seule page. Ainsi, la page d’accueil présente différentes sections, souvent rattachées à un menu de navigation. Pour retrouver le comportement d’un site « one page », il s’agit donc d’associer un élément du menu de navigation à chaque section de la page d’accueil.

Nous avons déjà répondu à la question « Comment faire un lien vers une partie/section spécifique d’une page ? » .

Or le thème WordPress retenu propose parfois une construction de la page d’accueil par le biais de zones de widgets (définies à la rubrique Apparence>>Widgets) dont on ne connait pas les identifiants (si tant est qu’ils existent).

Une bonne solution consiste à intégrer dans ces sections le widget « Mise en page Builder » et de définir des « Row ID » pour les rangée ainsi créées.

Enfin, il nous faut exploiter les hyperliens pointant ces rangées dans notre menu de navigation.

liens personnalisés

ajouter un lien personnalisé au menu de navigation

Pour ce faire, rendez-vous à la rubrique Apparence>>Menus.

Une fois votre menu sélectionné, choisissez dans la banque d’éléments sur la gauche le type « Liens personnalisés ».