search

jekyll / jekyll-seo-tag

A Jekyll plugin to add metadata tags for search engines and social networks to better index and display your site's content.
https://jekyll.github.io/jekyll-seo-tag
MIT License
1.66k stars 294 forks source link

Issue with showing post or page image in generated tag script #58

Closed raybesiga closed 8 years ago

raybesiga commented 8 years ago

I have installed Jekyll-SEO-tag as per the specification and my config is as follows:

# Site settings
title: Ray Besiga
email: raybesiga@gmail.com
description: > # this means to ignore newlines until "baseurl:"
  I’m Ray Besiga, a product engineer and designer. I'm a Front-End User Experience Engineer at Catalpa. I co-founded Sparkplug.
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://raybesiga.com" # the base hostname & protocol for your site
twitter:
  username: raybesiga
github:
  username: raybesiga

social:
  type: person
  name: Ray Besiga
  links:
    instagram: https://instagram.com/raybesiga
    twitter: https://www.twitter.com/raybesiga

author:
  twitter: raybesiga
  picture: /public/images/ray2-akabbo.png

# Build settings
markdown: kramdown

permalink:        /blog/:year/:month/:day/:title.html
highlighter: pygments
gems:
  - jekyll-seo-tag

I configure my head file this way, to compare the hard-coded meta with the generated meta

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="author" content="Ray Besiga">
  <meta name="google-site-verification" content="hCqw44bSMvFzmWy2huAlYHbMHKdIkdvm8aiOR3VwMAo" />

  <meta property="og:author" content="Ray Besiga">
  <meta property="og:title" content="{{ page.title }}">
  <meta property="og:url" content="{{ site.url }}{{ page.url }}">
  <meta property="og:description" content="{% if page.description %}{{ page.description | truncate: 160 }}{% else %}{{ page.excerpt }}{% endif %}">
  <meta property="og:site_name" content="Ray Besiga">
  <meta property="og:image" content="{{ site.url }}{{ page.image }}">

  <!-- Twitter Tags -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="{{ site.url }}{{ page.url }}">
    <meta name="twitter:title" content="{{ page.title }}">
    <meta name="twitter:description" content="{% if page.description %}{{ page.description | truncate: 160 }}{% else %}{{ page.excerpt }}{% endif %}">
    <meta name="twitter:image" content="{{ site.url }}{{ page.image }}">
    <meta property="twitter:domain" value="raybesiga.com"/>

  <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
  <meta name="description" content="{% if page.description %}{{ page.description | truncate: 160 }}{% else %}{{ page.excerpt }}{% endif %}">
  <meta name="language" content="english">

  <link rel="shortcut icon" href="/public/favicon.ico">

  <link rel="stylesheet" href="{{ "/css/style.min.css" | prepend: site.baseurl }}">
  <link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl }}">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} Feed" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
  {% seo %}
</head>

On inspection, the Image URL is not defined right:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="author" content="Ray Besiga">
  <meta name="google-site-verification" content="hCqw44bSMvFzmWy2huAlYHbMHKdIkdvm8aiOR3VwMAo" />

  <meta property="og:author" content="Ray Besiga">
  <meta property="og:title" content="A basic Django app with the Github API">
  <meta property="og:url" content="http://raybesiga.com/blog/2016/02/23/basic-django-app-github-api.html">
  <meta property="og:description" content="A basic Django app with the Github API">
  <meta property="og:site_name" content="Ray Besiga">
  <meta property="og:image" content="http://raybesiga.com/public/images/Github_Yokogao.png">

  <!-- Twitter Tags -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="http://raybesiga.com/blog/2016/02/23/basic-django-app-github-api.html">
    <meta name="twitter:title" content="A basic Django app with the Github API">
    <meta name="twitter:description" content="A basic Django app with the Github API">
    <meta name="twitter:image" content="http://raybesiga.com/public/images/Github_Yokogao.png">
    <meta property="twitter:domain" value="raybesiga.com"/>

  <title>A basic Django app with the Github API</title>
  <meta name="description" content="A basic Django app with the Github API">
  <meta name="language" content="english">

  <link rel="shortcut icon" href="/public/favicon.ico">

  <link rel="stylesheet" href="/css/style.min.css">
  <link rel="stylesheet" href="/css/syntax.css">
  <link rel="canonical" href="http://raybesiga.com/blog/2016/02/23/basic-django-app-github-api.html">
  <link rel="alternate" type="application/rss+xml" title="Ray Besiga Feed" href="http://raybesiga.com/feed.xml">
  <!-- Begin Jekyll SEO tag v3.0.3 -->
<title>A basic Django app with the Github API - Ray Besiga</title>
<meta property="og:title" content="A basic Django app with the Github API" />
<meta name="description" content="A basic Django app with the Github API" />
<meta property='og:description' content="A basic Django app with the Github API" />
<link rel="canonical" href="http://raybesiga.com/blog/2016/02/23/basic-django-app-github-api.html" />
<meta property='og:url' content='http://raybesiga.com/blog/2016/02/23/basic-django-app-github-api.html' />
<meta property="og:site_name" content="Ray Besiga" />
<script type="application/ld+json">
    {
      "@context" : "http://schema.org",
      "@type" : "WebSite",
      "name" : "Ray Besiga",
      "url" : "http://raybesiga.com"
    }
  </script>
<meta property="og:image" content="http://raybesiga.com//public/images/Github_Yokogao.png" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2016-02-23T00:00:00+00:00" />
<link rel="prev" href="http://raybesiga.com/blog/2015/12/04/stylish-side-transform-africa-conference.html" title="The fun side to Transform Africa 2015" />
<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "A basic Django app with the Github API",
      "image": "/public/images/Github_Yokogao.png",
      "datePublished": "2016-02-23T00:00:00+00:00",
      "description": "A basic Django app with the Github API"
    }
  </script>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@raybesiga" />
<meta name="twitter:title" content="A basic Django app with the Github API - Ray Besiga" />
<meta name="twitter:description" content="A basic Django app with the Github API" />
<meta name="twitter:image" content="/public/images/Github_Yokogao.png" />
<meta name="twitter:creator" content="@raybesiga" />
<script type="application/ld+json">
    {
      "@context" : "http://schema.org",
      "@type" : "person",
      "name" : "Ray Besiga",
      "url" : "http://raybesiga.com",
      "sameAs" : {"instagram":"https://instagram.com/raybesiga","twitter":"https://www.twitter.com/raybesiga"}
    }
  </script>
<!-- End Jekyll SEO tag -->
</head>

Is there a configuration I am getting wrong?

benbalter commented 8 years ago

@raybesiga thanks for reporting this, and for the excellent writeup. This was fixed by @boturnbow over in https://github.com/jekyll/jekyll-seo-tag/pull/57, and should be corrected in the next release, out momentarily.

raybesiga commented 8 years ago

@benbalter Thanks :+1: