<!-- SEO and Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Title -->
<% 
let title = '';
if (page.title) {
  title = page.title + ' - ' + config.title;
} else if (page.category) {
  title = 'Category: ' + page.category + ' - ' + config.title;
} else if (page.tag) {
  title = 'Tag: ' + page.tag + ' - ' + config.title;
} else {
  title = config.title;
  if (config.subtitle) {
    title += ' - ' + config.subtitle;
  }
}
%>
<title><%= title %></title>

<!-- Description -->
<% 
let description = '';
if (page.description) {
  description = page.description;
} else if (page.excerpt) {
  description = strip_html(page.excerpt).substring(0, 160);
} else if (page.content) {
  description = strip_html(page.content).substring(0, 160);
} else {
  description = config.description || theme.site_subtitle || '';
}
%>
<% if (description) { %>
<meta name="description" content="<%= description %>">
<% } %>

<!-- Keywords -->
<% if (page.tags && page.tags.length) { %>
<meta name="keywords" content="<%= page.tags.map(tag => tag.name).join(', ') %>">
<% } %>

<!-- Author -->
<% if (config.author) { %>
<meta name="author" content="<%= config.author %>">
<% } %>

<!-- Canonical URL -->
<link rel="canonical" href="<%= config.url + url_for(page.path) %>">

<!-- Open Graph -->
<meta property="og:type" content="<%= page.layout === 'post' ? 'article' : 'website' %>">
<meta property="og:title" content="<%= title %>">
<meta property="og:url" content="<%= config.url + url_for(page.path) %>">
<meta property="og:site_name" content="<%= config.title %>">
<% if (description) { %>
<meta property="og:description" content="<%= description %>">
<% } %>
<% if (page.cover || page.thumbnail) { %>
<meta property="og:image" content="<%= config.url + (page.cover || page.thumbnail) %>">
<% } %>

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<%= title %>">
<% if (description) { %>
<meta name="twitter:description" content="<%= description %>">
<% } %>
<% if (page.cover || page.thumbnail) { %>
<meta name="twitter:image" content="<%= config.url + (page.cover || page.thumbnail) %>">
<% } %>

<!-- Article specific meta -->
<% if (page.layout === 'post') { %>
<meta property="article:published_time" content="<%= page.date.toISOString() %>">
<% if (page.updated) { %>
<meta property="article:modified_time" content="<%= page.updated.toISOString() %>">
<% } %>
<% if (page.categories && page.categories.length) { %>
  <% page.categories.each(function(cat) { %>
<meta property="article:section" content="<%= cat.name %>">
  <% }); %>
<% } %>
<% if (page.tags && page.tags.length) { %>
  <% page.tags.each(function(tag) { %>
<meta property="article:tag" content="<%= tag.name %>">
  <% }); %>
<% } %>
<% } %>

<!-- Favicon -->
<link rel="icon" href="<%= theme.favicon || '/favicon.ico' %>" type="image/x-icon">

<!-- RSS Feed -->
<% if (config.feed && config.feed.path) { %>
<link rel="alternate" type="application/rss+xml" title="<%= config.title %>" href="<%= url_for(config.feed.path) %>">
<% } %>