add open graph and twitter card meta tags

Product pages get og:type=product, og:url, og:image (hero image), and
twitter:card=summary_large_image. All other shop pages get og:type=website
and twitter:card=summary. og:title and og:description mirror the existing
page title and meta description.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-02-23 21:37:50 +00:00
parent c6da3b3d2b
commit b11f7d47d0
2 changed files with 31 additions and 0 deletions

View File

@ -14,6 +14,31 @@
<.live_title suffix={" · #{@theme_settings.site_name}"}> <.live_title suffix={" · #{@theme_settings.site_name}"}>
{assigns[:page_title]} {assigns[:page_title]}
</.live_title> </.live_title>
<% og_title =
if assigns[:page_title],
do: "#{assigns[:page_title]} · #{@theme_settings.site_name}",
else: @theme_settings.site_name
og_description =
assigns[:page_description] ||
@theme_settings.site_description ||
"Welcome to #{@theme_settings.site_name}" %>
<meta property="og:site_name" content={@theme_settings.site_name} />
<meta property="og:title" content={og_title} />
<meta property="og:description" content={og_description} />
<meta property="og:type" content={assigns[:og_type] || "website"} />
<%= if assigns[:og_url] do %>
<meta property="og:url" content={assigns[:og_url]} />
<% end %>
<%= if assigns[:og_image] do %>
<meta property="og:image" content={assigns[:og_image]} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content={assigns[:og_image]} />
<% else %>
<meta name="twitter:card" content="summary" />
<% end %>
<meta name="twitter:title" content={og_title} />
<meta name="twitter:description" content={og_description} />
<!-- Preload critical fonts for the current typography preset --> <!-- Preload critical fonts for the current typography preset -->
<%= for preload <- Berrypod.Theme.Fonts.preload_links( <%= for preload <- Berrypod.Theme.Fonts.preload_links(
@theme_settings.typography, @theme_settings.typography,

View File

@ -52,6 +52,9 @@ defmodule BerrypodWeb.Shop.ProductShow do
socket socket
|> assign(:page_title, product.title) |> assign(:page_title, product.title)
|> assign(:page_description, meta_description(product.description)) |> assign(:page_description, meta_description(product.description))
|> assign(:og_type, "product")
|> assign(:og_url, BerrypodWeb.Endpoint.url() <> "/products/#{slug}")
|> assign(:og_image, og_image_url(all_images))
|> assign(:product, product) |> assign(:product, product)
|> assign(:all_images, all_images) |> assign(:all_images, all_images)
|> assign(:gallery_images, gallery_images) |> assign(:gallery_images, gallery_images)
@ -216,6 +219,9 @@ defmodule BerrypodWeb.Shop.ProductShow do
""" """
end end
defp og_image_url([%{url: "/" <> _ = path} | _]), do: BerrypodWeb.Endpoint.url() <> path
defp og_image_url(_), do: nil
defp meta_description(nil), do: nil defp meta_description(nil), do: nil
defp meta_description(text) do defp meta_description(text) do