The file templates/header.tpl is in charge to display and choose properly the information to be inserted in the <Head> of all the Tiki pages displayed depending of several things (feature, metatags, options, etc.) . Those are important for SEO and critical for Tiki pages to be properly displayed and categorized by other Social Network website or tools.
Actually there are several issues with this file
- Each case and sub-case was treated independently (a dozens of conditions were added over and over) instead of having less code that check different cases
- It is big, hard to read and therefor dangerous to modify
- It doesn’t do everything we need
- ...
Some improvements were made over the last year, but Tiki senior coder already warn about adding more stuff
Goals
- Define a list of case Tiki header must address
- An intuitive split sectioning (may be splitting case into sub tpl)
- Improve and simplify the code
- Anticipate addition for new Social Network or setting we’d like to add
- ...
Code revamp
Cases
Header requirement
Must have stuff to display the pages properly
SEO and SEFurl
Required to identify pages, author, location, content etc.
Social Network
Tags and information other website or Social Network tools expect
As it is today, Facebook define the standard and except for a few attempt and specificity (twitter cards for exemple) most will use Facebook og tags information or as fallback to display properly information about Tiki pages.
Old insight but still nice to read : https://moz.com/blog/meta-data-templates-123
Facebook is using Open Graph
http://ogp.me
Documentation : https://developers.facebook.com/docs/reference/opengraph/
og tags reference page : https://developers.facebook.com/docs/sharing/opengraph/object-properties
Test tool : https://developers.facebook.com/tools/debug/
It may be necessary to split per feature but let’s start with a simple table
og:url | The canonical URL for the page (should use SEFurl to display wiki page name, article name, blog post name, tracker item title, etc. | |
og:title | The title for the page; wiki page name, article title, blog post title, item title, filename, etc | |
og:image | The image to be displayed in Facebook post, share, etc.; Website logo or Facebook default image (as fallback) Wiki page: first or featured image found Article: Article image, Article image topic, featured image, first image found Blog post: featured image, first image found Tracker item: first image found (what if several ?), (featured file field ?) File: file itself, fallback if file is not an image Add more... | |
og:description | The description, heading; Website metatag description (as fallback) Wiki page: page description (if use as metatag description) or first paragraph of the page (not parsed, html tags removed) Article: article heading (not parsed, html tags removed) or first paragraph of the article (not parsed, html tags removed) Blog post: first paragraph (not parsed, html tags removed) Tracker item: There is not necessary a text or textarea in an item, however it would be cool to set that a field (including a wiki page field) is to be used (not parsed, html tags removed) as item description File: file description Add more... | |
og:site_name | The website browser title | |
og:type | The type of content; website, article, etc. | |
og:locale | Defines the language, American English is the default | |
fb:app_id | for linking to a Facebook application (e.g., FB Comments) with the object |
Some tags like author for article or blog should be used depending on the type http://ogp.me/#no_vertical
Geo location tags may also be easy to include and may have a good impact.
There are other og tags like video or product.
Not sure how we can use them but it is interesting to have a reflexion about those.
Twitter is using twitter cards
https://cards-dev.twitter.com/validator (require login)
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
twitter:card | This required tag works in a similar way to og:type. It describes the type of content you are sharing. There are options to choose from: summary, photo, video, product, app, gallery, and “large version” summary. | |
twitter:title | Same as og:title | |
twitter:description | Same as og:description | |
twitter:url | Canonical url | |
twitter:image | Like og:image (recommended dimensions are 1500px by 500px) | |
twitter:creator | Author |
Seems there is a "Validating card" mechanism not sure it require anything here.
Linked’in
https://developer.linkedin.com/docs/share-on-linkedin#
content | A collection of fields describing the shared content. | |
title | The title of the content being shared. | |
description | The description of the content being shared. | |
submitted-url | A fully qualified URL for the content being shared. | |
submitted-image-url | A fully qualified URL to a thumbnail image to accompany the shared content. The image should be at least 80 x 150px for best results. | |
comment | A comment by the member to associated with the share. | |
visibility | A collection of visibility information about the share. | |
code | This field is required in all sharing calls. |
Google+
https://developers.google.com/+/web/share/
Seems google work with the og tags; https://developers.google.com/+/web/snippet/article-rendering
https://developers.pinterest.com/docs/rich-pins/overview/
Seems pinterest work with og tags; https://developers.pinterest.com/docs/rich-pins/articles/?
Hashtags
Tags and Hashtags can be used in relation.
TBD
The hashtag functions sometimes like tags, but with the additional capability of adding current affairs and topics of interest to the content. It has the shortest lifetime relevancy of the three. Example: #bicyclehelmet2013 (this will be redundant within weeks).
Ultimately, tags and hashtags have the same purpose – to make you findable on websites loaded with content and to draw people’s attention to whatever it is you want them to see. As I always advocate, however, it’s about relevancy.
Both tags and hashtags play their role in the SEO of your website and content, because they are strongly related to the core keywords your website and organization are based on. Keywords with the right tags built upon them will ensure the long-term drive of relevant traffic to your website. Hashtags will keep your content appearing in relevant popular streams.