wir möchten bei unseren Landing Pages die OG Tags, insbesondere OG Image, noch ergänzen. Das dürfte nur durch einen Eingriff in den Code möglich sein?!
solang ihr Zugriff auf das Template über den Design-Manager oder CLI habt, könnt ihr es anpassen.
Falls ihr ein Standard Template wie "Session" oder eins aus dem Marketplace nutzt, müsst ihr es entweder duplizieren oder ein Child-Theme erstellen, anders könnt ihr die Templates nicht editieren.
Sobald ihr die Templates editieren könnt, würde ich wie folgt vorgehen:
- base.html/layout.html öffnen
- einen neuen "building-block" in den <head>-tag einfügen, damit ihr pro Template individuelle codes einbauen könnt. Ein solcher Code schaut so aus
{% block head %} {# statt head könnt ihr einen beliebigen Namen wählen#}
{% endblock head %} {# hier muss der Name gleich sein #}
eingefügt in den <head>-tag schaut das ganze so aus
<head>
...
{% block head %}
{% endblock head %}
...
</head>
Ich empfehle es nach dem Shortcode
{{ standard_header_includes }}
zu machen, aber es ist euch überlassen.
Hinweis: In diesem Shortcode baut HubSpot alle benötigten Elemente ein. Wenn ihr es danach einbaut, dann wird euer Code später danach geladen, wenn ihr es davor einbaut, dann wird er vor den HubSpot Elementen eingebaut.
- um OG:Tags für alle LPs zu generieren, müsst ihr jetzt den Code einbauen.
- fügt den selben "building-block" aus der base.html/layout.html in den Code ein. Das ganze sollte so aussehen:
<!--
templateType: page
isAvailableForNewContent: true
label: Landing page mit Icons
screenshotPath: ../images/template-previews/landing-page-icons.png
-->
{% extends "./layouts/base.html" %}
{% block head %} {# hier muss der selbe Name wie in der base/layout Datei stehen #}
{% endblock head %} {# hier muss der selbe Name wie in der base/layout Datei stehen #}
{% block header %}
{% global_partial path="./partials/header-no-navigation.html" %}
{% endblock header %}
Jetzt müsst ihr nur noch die OG Informationen einbauen. Das hier ist der default Code dafür:
<meta property="og:title" content="Lorem Ipsum Headline" />
<meta property="og:description" content="Lorem ipsum Description" />
<meta property="og:image" content="lorem-ipsum.jpg" />
Der Code müsste jetzt so aussehen
...
{% block head %}
<meta property="og:title" content="Lorem Ipsum Headline" />
<meta property="og:description" content="Lorem ipsum Description" />
<meta property="og:image" content="lorem-ipsum.jpg" />
{% endblock head %}
...
Da Lorem Ipsum nur bedingt gut ist und es sich automatisch befüllen/generieren soll, müsst ihr nur noch die entsprechenden HubSpot Codes an die jeweilige Stelle einbauen
solang ihr Zugriff auf das Template über den Design-Manager oder CLI habt, könnt ihr es anpassen.
Falls ihr ein Standard Template wie "Session" oder eins aus dem Marketplace nutzt, müsst ihr es entweder duplizieren oder ein Child-Theme erstellen, anders könnt ihr die Templates nicht editieren.
Sobald ihr die Templates editieren könnt, würde ich wie folgt vorgehen:
- base.html/layout.html öffnen
- einen neuen "building-block" in den <head>-tag einfügen, damit ihr pro Template individuelle codes einbauen könnt. Ein solcher Code schaut so aus
{% block head %} {# statt head könnt ihr einen beliebigen Namen wählen#}
{% endblock head %} {# hier muss der Name gleich sein #}
eingefügt in den <head>-tag schaut das ganze so aus
<head>
...
{% block head %}
{% endblock head %}
...
</head>
Ich empfehle es nach dem Shortcode
{{ standard_header_includes }}
zu machen, aber es ist euch überlassen.
Hinweis: In diesem Shortcode baut HubSpot alle benötigten Elemente ein. Wenn ihr es danach einbaut, dann wird euer Code später danach geladen, wenn ihr es davor einbaut, dann wird er vor den HubSpot Elementen eingebaut.
- um OG:Tags für alle LPs zu generieren, müsst ihr jetzt den Code einbauen.
- fügt den selben "building-block" aus der base.html/layout.html in den Code ein. Das ganze sollte so aussehen:
<!--
templateType: page
isAvailableForNewContent: true
label: Landing page mit Icons
screenshotPath: ../images/template-previews/landing-page-icons.png
-->
{% extends "./layouts/base.html" %}
{% block head %} {# hier muss der selbe Name wie in der base/layout Datei stehen #}
{% endblock head %} {# hier muss der selbe Name wie in der base/layout Datei stehen #}
{% block header %}
{% global_partial path="./partials/header-no-navigation.html" %}
{% endblock header %}
Jetzt müsst ihr nur noch die OG Informationen einbauen. Das hier ist der default Code dafür:
<meta property="og:title" content="Lorem Ipsum Headline" />
<meta property="og:description" content="Lorem ipsum Description" />
<meta property="og:image" content="lorem-ipsum.jpg" />
Der Code müsste jetzt so aussehen
...
{% block head %}
<meta property="og:title" content="Lorem Ipsum Headline" />
<meta property="og:description" content="Lorem ipsum Description" />
<meta property="og:image" content="lorem-ipsum.jpg" />
{% endblock head %}
...
Da Lorem Ipsum nur bedingt gut ist und es sich automatisch befüllen/generieren soll, müsst ihr nur noch die entsprechenden HubSpot Codes an die jeweilige Stelle einbauen
Danke Anton. Wir haben keinen Zugriff auf die Templates.. daher können wir das wohl nicht machen. Wenn wir aber soweit sind, dann greif ich gern auf deine Tipps zurück.