Social Media Optimizer

[talha131]

Twitter Card. Twitter shows summary of links shared on it. How to do it so that links from sites using Elegant also get their summary shown.

[tshepang]

I am not familiar with this Twitter feature. Do you have a screenshot or link?

[talha131]

Here you go

[tshepang]

Isn't this divorced from the idea promoted in Experiments in delinkification... reduced distraction?

[talha131]

This summary only appears on twitter site or apps. It gives followers an idea what the link is about before they click on it.

[talha131]

Add support for G authorship

https://plus.google.com/authorship
https://support.google.com/webmasters/answer/1408986
https://support.google.com/webmasters/answer/1708844?hl=en

<link rel=”author” href=”https://plus.google.com/[YOUR PERSONAL G+ PROFILE HERE]“/>

in social links, if g+ then add author attribute

http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013/

[talha131]

Add support for open graph.

Check with http://smo.knowem.com/

[talha131]

@calfzhou @tshepang can you pull these changes and publish your site IF it is not a problem. I need to run few tests on it using http://smo.knowem.com/

You can run if yourself and share your opinion, if you feel like.

[calfzhou]

build failed: CRITICAL: 'article' is undefined

Traceback (most recent call last):
.......................
  File "/data0/zhouji/calf/gocalf-blog/elegant-theme/templates/page.html", line 20, in block "meta_tags_in_head"
    {{ seo_metadata(article) }}
  File "/data0/zhouji/calf/gocalf-blog/elegant-theme/templates/_includes/seo_metadata.html", line 2, in template
    <meta property="og:title" content="{{ article.title|striptags }} {%if article.subtitle %} - {{ article.subtitle }} {% endif %}"/>
  File "/data0/zhouji/lib/python2.7/Jinja2-2.7.1-py2.7.egg/jinja2/environment.py", line 397, in getattr
    return getattr(obj, attribute)
jinja2.exceptions.UndefinedError: 'article' is undefined

it should be seo_metadata(page) in page.html.

[calfzhou]

@talha131 How to set og:image and twitter:image? I'd like to specify a "featured-image" to each article, but currently there is no such plugins or syntax can help.

[talha131]

@calfzhou I very much want to do it. We can add a new variable in the article's metadata.

:social_image: |filename|/images/butterfly-on-flower.jpg

The problem is this metadata will not be parsed. So |filename|/images/butterfly-on-flower.jpg will remain as it is. It will not be substituted with SITEURL. We will need to write a Pelican plugin to do it.

Other way is to make writer give full path of the image like,

:social_image: http://oncrashreboot.com/blog/images/butterfly-on-flower.jpg

There is also a requirement that image must be square image. So user will have to manually make sure his image is square and he has put full path in the metadata. Which I think is cumbersome?

What do you think?

[talha131]

@calfzhou what do you think of the solution?

[calfzhou]

I'd love to use :featured_image: which has wider meaning than social_image. A featured image can also be shown in article page, in rss feed, etc. (actually i have already prepared featured images for every single post in my blog.)

Most morden blog system supports featured_image feature.

[calfzhou]

I really hope that internal link could work in metadata. There is a feature request in pelican (getpelican/pelican#1169).

[talha131]

Lets see when it gets implemented.

Can you share few examples of blogs that use featured_image? Perhaps screenshot of your blog. I don't know what you mean by featured image. How is it used in RSS feeds?

Well screenshots and examples will be a great help to understand! 😄

[calfzhou]

Here is some screenshots from my previous WordPress blog.

summary view of a post with featured image:

full article view of a post with featured image:

in rss feed:

Some links:

• WordPress featured image support document
• What is featured image in WordPress
• Some WordPress themes supporting featured image

[talha131]

Cool! Thank you.

Don't you think you can put the URL of the image in article.social_media_image tag?

[talha131]

Call it social_media_image or featured_image either way it is going into the same meta tags

<meta property="og:image"
<meta name="twitter:image"

[talha131]

OR do you just want to change the name of the tag, from social_media_image to featured_image? 😕

[calfzhou]

I prefer featured_image 😆 it acts like a thumbnail of an article

[talha131]

I have renamed it.

[talha131]

I tested @calfzhou post on Social Media Optimizer and couldn't find any problem.

Please comment on the issue if anyone has something new to add.

[calfzhou]

is there any suggested size (in pixels) for social images?

[talha131]

There is and there isn't.

twitter:image documentation says

URL to a unique image representing the content of the page. Do not use a generic image such as your website logo, author photo, or other image that spans multiple pages. The image must be a minimum size of 120x120px. Images larger than 120x120px will be resized and cropped square based on its longest dimension. Images must be less than 1MB in size.

I think we can use any image as long as it is larger than 120x120px. The site will crop the image itself.

I didn't find any specification for the image for sites that use OpenGraph like Facebook and LinkedIn.