using-structured-data-seo/blog-post.html at main · ajlaporte/using-structured-data-seo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
  templateType: blog_post
  isAvailableForNewContent: true
  label: Boilerplate - blog post
  screenshotPath: ../images/template-previews/blog-post.png
-->
{% require_head %}
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "{{content.title}}",
      {% if content.use_featured_image %}
      "image": [
        "{{content.featured_image}}"
      ],
      {% endif %}
      "datePublished": "{{content.publish_date|datetimeformat('%Y-%m-%dT%H:%M:%S')}}",
      "dateModified": "{{content.updated|datetimeformat('%Y-%m-%dT%H:%M:%S')}}",
      "author": [{
          "@type": "Person",
          "name": "{{content.blog_post_author.full_name}}",
          "url": "{{content.parent_blog.root_url}}/author/{{content.blog_post_author.slug}}"
        }]
    }
  </script>
{% end_require_head %}

{% set template_css = "../../css/templates/blog.css" %}
{% extends "./layouts/base.html" %}

{% block body %}


<div class="body-container body-container--blog-post">

  {# Blog post #}

  <div class="content-wrapper">
    <article class="blog-post">
      <h1>{{ content.name }}</h1>
      <div class="blog-post__meta">
        <a href="{{ blog_author_url(group.id, content.blog_post_author.slug) }}" rel="author">
          {{ content.blog_post_author.display_name }}
        </a>
        <time datetime="{{ content.publish_date }}" class="blog-post__timestamp">
          {{ content.publish_date_localized }}
        </time>
      </div>
      <div class="blog-post__body">
        {{ content.post_body }}
      </div>
      {% if content.tag_list %}
        <div class="blog-post__tags">
          {% icon
            name="tag",
            purpose="decorative",
            style="SOLID"
          %}
          {% for tag in content.tag_list %}
            <a class="blog-post__tag-link" href="{{ blog_tag_url(group.id, tag.slug) }}" rel="tag">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
          {% endfor %}
        </div>
      {% endif %}
    </article>
    {% if group.allow_comments %}
      <div class="blog-comments">
        {% module "blog_comments"
          path="@hubspot/blog_comments",
          label="Blog comments"
        %}
      </div>
    {% endif %}
  </div>

  {# Recent posts listing #}

  {# This macro is used to format each recent post card and gets passed to the related_blog_posts HubL tag below #}

  {% macro related_posts(post, count, total) %}
    {% if count == 1 %}
      <section class="blog-related-posts">
        <div class="content-wrapper">
          <h2>Read On</h2>
          <div class="blog-related-posts__list">
    {% endif %}
            <article class="blog-related-posts__post" aria-label="Blog post summary: {{ post.name }}">
              {% if post.featured_image %}
                <a class="blog-related-posts__post-image-wrapper" href="{{ post.absolute_url }}" aria-label="{% if post.featured_image_alt_text %} Featured image: {{ post.featured_image_alt_text }} - {% endif %}Read full post: {{ post.name }}">
                  <img class="blog-related-posts__image" src="{{ post.featured_image }}" loading="lazy" width="352" alt="{{ post.featured_image_alt_text }}">
                </a>
              {% endif %}
              <div class="blog-related-posts__content">
                <h3 class="blog-related-posts__title">
                  <a class="blog-related-posts__title-link" href="{{ post.absolute_url }}">{{ post.name }}</a></h3>
                {{ post.post_summary|truncatehtml(100) }}
              </div>
            </article>
      {% if count == total %}
          </div>
        </div>
      </section>
    {% endif %}
  {% endmacro %}

  {% related_blog_posts
    limit=3,
    no_wrapper=True,
    post_formatter="related_posts"
  %}

</div>
{% endblock body %}