Loading...
 

Header tpl revamp

 Work in progress

Please help to improve

This is a project for Tiki19 (may be completed for Tiki20).


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

Jonny mentioned in a discussion wrote on 19 Mar 18:
A way to do it will be to create a Smarty object like we have smarty_function_html_body_attributes (smarty_tiki/function.html_body_attributes.php) for the body of a Tiki page.

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

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:urlThe canonical URL for the page (should use SEFurl to display wiki page name, article name, blog post name, tracker item title, etc.
og:titleThe title for the page; wiki page name, article title, blog post title, item title, filename, etc
og:imageThe 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:descriptionThe 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_nameThe website browser title
og:typeThe type of content; website, article, etc.
og:locale Defines the language, American English is the default
fb:app_idfor 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

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:imageLike og:image (recommended dimensions are 1500px by 500px)
twitter:creatorAuthor


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.
titleThe title of the content being shared.
descriptionThe description of the content being shared.
submitted-urlA fully qualified URL for the content being shared.
submitted-image-urlA 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.
codeThis 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

Pinterest

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.

Related

Page last modified on Sunday 15 April, 2018 07:46:31 GMT-0000

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Group
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend, alert + Social Bookmarking
Terms and Conditions
Theme
TikiTests
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools