<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="https://demo.cecil.app/theme-paper/xsl/atom.xsl" media="all"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <id>https://demo.cecil.app/theme-paper/tags/seo/</id>
  <title>Paper - SEO</title>
  <subtitle><![CDATA[A minimal, responsive, accessible and SEO-friendly Cecil blog theme.]]></subtitle>
  <link href="https://demo.cecil.app/theme-paper/tags/seo/atom.xml" rel="self" type="application/atom+xml" />
  <link href="https://demo.cecil.app/theme-paper/tags/seo/" rel="alternate" type="text/html" />
  <updated>2026-10-25T03:36:55+00:00</updated>
  <author>
    <name>Cecil</name>
    <uri>https://cecil.app</uri>
  </author>
  <entry xml:lang="en">
    <id>https://demo.cecil.app/theme-paper/posts/dynamic-og-images/</id>
    <title>Dynamic OG image generation in Paper blog posts</title>
    <published>2026-10-24T15:00:00+00:00</published>
    <link href="https://demo.cecil.app/theme-paper/posts/dynamic-og-images/" rel="alternate" type="text/html" />
    <content type="html">
      <![CDATA[<p>OG images (aka social images) play an important role in social media engagement: they are displayed when a page is shared on a social network or a messaging app.</p>
<h2 id="introduction">Introduction<a class="heading-anchor" href="#introduction" aria-hidden="true" tabindex="-1"></a></h2>
<p>Writing a post is enough: if the post has no <code translate="no">image</code> in its front matter, the Paper theme generates an Open Graph image (1200 × 628 pixels) with:</p>
<ul>
<li>the title of the post</li>
<li>its author</li>
<li>the title of the site</li>
</ul>
<p>The image is published next to the post (e.g.: <code translate="no">/posts/dynamic-og-images/og.png</code>) and referenced by the built-in Cecil metatags. Other pages share an image generated with the title and the description of the site (<code translate="no">/og.png</code>), unless the site <code translate="no">image</code> option is set.</p>
<h2 id="requirements">Requirements<a class="heading-anchor" href="#requirements" aria-hidden="true" tabindex="-1"></a></h2>
<p>Images are generated with the PHP <a href="https://www.php.net/manual/book.image.php" rel="noopener noreferrer">GD extension</a>, compiled with FreeType support. Without it, the default metatags behavior is used.</p>
<h2 id="customization">Customization<a class="heading-anchor" href="#customization" aria-hidden="true" tabindex="-1"></a></h2>
<ul>
<li>The background of the image is <code translate="no">assets/paper/og-background.png</code>: override it with your own <code translate="no">assets/paper/og-background.png</code> (1200 × 628 pixels).</li>
<li>The fonts are <code translate="no">assets/paper/fonts/GoogleSansCode-Regular.ttf</code> and <code translate="no">assets/paper/fonts/GoogleSansCode-Bold.ttf</code>.</li>
<li>Disable the generation with the <code translate="no">paper.og.dynamic</code> option:</li>
</ul>
<pre data-lang="yaml"><code class="language-yaml hljs yaml" translate="no"><span class="hljs-attr">paper:</span>
  <span class="hljs-attr">og:</span>
    <span class="hljs-attr">dynamic:</span> <span class="hljs-literal">false</span></code></pre>
<p>Use the <code translate="no">image</code> front matter variable to define the image of a post:</p>
<pre data-lang="yaml"><code class="language-yaml hljs yaml" translate="no"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">My</span> <span class="hljs-string">post</span>
<span class="hljs-attr">image:</span> <span class="hljs-string">/images/my-post.png</span>
<span class="hljs-meta">---</span></code></pre>
<aside class="note note-info" id="note-info-1">
  <p class="note-title"><svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"/><path d="M12 9h.01"/><path d="M11 12h1v4h1"/></svg>Info</p>
  <p>Generated images are cached: they are generated again only when the title, the author or the site title change.</p>
</aside>]]>
    </content>
  </entry>
</feed>
