Marketing Hub | Fragen, Tipps & bewährte Methoden

Angi
Contributor

OG Tags/ OF image im Code einfügbar?

SOLVE

Hallo Community, 

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?!

Geht das mit der Starter Version überhaupt?

 

Viele Grüße

Angi

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

OG Tags/ OF image im Code einfügbar?

SOLVE

Hi @Angi

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. 

 

- base.html/layout.html speichern und schließen

- landing page Template suchen und öffnen

- es sollte ungefähr so anfangen

 

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Landing page mit Icons
  screenshotPath: ../images/template-previews/landing-page-icons.png
-->
{% extends "./layouts/base.html" %}

{% block header %}
{% global_partial path="./partials/header-no-navigation.html" %}
{% endblock header %}

 

- 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

 

Der finale Code sieht so aus

 

 

...
{% block head %}
<meta property="og:title" content="{{page_meta.html_title}}" />
<meta property="og:description" content="{{page_meta.meta_description}}" />
<meta property="og:image" content="{{content.featured_image}}" />
{% endblock head %}
...

 

 

 

Guten Start ins Wochenede, 

Anton

Anton Bujanowski Signature

View solution in original post

4 Replies 4
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

OG Tags/ OF image im Code einfügbar?

SOLVE

Hi @Angi

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. 

 

- base.html/layout.html speichern und schließen

- landing page Template suchen und öffnen

- es sollte ungefähr so anfangen

 

<!--
  templateType: page
  isAvailableForNewContent: true
  label: Landing page mit Icons
  screenshotPath: ../images/template-previews/landing-page-icons.png
-->
{% extends "./layouts/base.html" %}

{% block header %}
{% global_partial path="./partials/header-no-navigation.html" %}
{% endblock header %}

 

- 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

 

Der finale Code sieht so aus

 

 

...
{% block head %}
<meta property="og:title" content="{{page_meta.html_title}}" />
<meta property="og:description" content="{{page_meta.meta_description}}" />
<meta property="og:image" content="{{content.featured_image}}" />
{% endblock head %}
...

 

 

 

Guten Start ins Wochenede, 

Anton

Anton Bujanowski Signature
Angi
Contributor

OG Tags/ OF image im Code einfügbar?

SOLVE

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.

LG Angi

0 Upvotes
mariomaier
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

OG Tags/ OF image im Code einfügbar?

SOLVE

Super Antwort von @Anton - ich glaub das muss ich nichts mehr hinzufügen 😁

 

LG Mario

MiaSrebrnjak
Community Manager
Community Manager

OG Tags/ OF image im Code einfügbar?

SOLVE

Hi @Angi,

 

ich werde wieder @Anton@mariomaier & @Oezcan um Hilfe bitten: 🙂

Habt ihr diesbezüglich vielleicht schon Erfahrungen gemacht? Danke! 🙏

 

Viele Grüße, 

 

Mia, Community Team 


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst


Did you know that the Community is available in other languages?
Join regional conversations by
changing your language settings