====== HtmlMetaTags Plugin ======

---- plugin ----
description: Adds some (open graph) meta tags to the html header (e.g. keywords, description or any others)
author     : Soft2C.de
email      : info@soft2c.de
type       : Action, Syntax
lastupdate : 2024-03-04
compatible : Detritus, Elenor of Tsort, Frusterick Manners, Greebo, Hogfather, Igor, Jack Jackrum, Kaos+
depends    : 
conflicts  : 
similar    : socialcards
tags       : html meta search seo info open graph semantic

bugtracker : https://github.com/heikoS2C/htmlmetatags/issues
sourcerepo : https://github.com/heikoS2C/htmlmetatags
downloadurl: https://github.com/heikoS2C/htmlmetatags/archive/master.zip  
donationurl: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GN27JNRYKUYTG
----

===== Description =====

This plugin enriches the html page with all meta tags what you want, e.g. keywords, description and any others.
Some meta information are very usefull for web crawlers for indexing and categorizing the page.

Extends with V2.0:
This version allow you to add :
  * open graph metatags like //og:description//, //og:image//...
  * link to media file. tags must start with //media-//
    * //media-og:image=(:wiki:image.jpg)//
  * multiple calls to htmlmetatags all values will be added

**Note:** The Initial version of this plugIn is not compatible to the new V2.xy. The difference of attribute to value splitter is changed from ':' to '='. \\

<code>
  {{htmlmetatags>metatag-keywords=(values) metatag-og:description=(open graph description.)}}
</code>

**Note:** Linebreaks can add inside the <nowiki>{{ }}</nowiki> without any trouble.
<code>
  {{htmlmetatags>metatag-keywords=(values)
    metatag-og:description=(open graph description.)
  }}
</code>

===== Syntax =====

With the string ''%%{{htmlmetatags>...}}%%'' on the page level you activate the plugin. The leading string "metatag-" marks a tag for the web site. After this leading string followed the key from tag. In ''%%=(...)%%'' write the value of the tag.

Also, the plugin is on page level.

Example to activate the plugin on your page write:

<code>
{{htmlmetatags>metatag-mytag=(some usefull text)}}
</code>

The meta tag: //mytag// is any word. This word is the name of the new meta tag, e.g. keyword. Followed on this name is to write ''='' with ''%%('...')%%''. This brackets contains the text required for the value of the new meta tag.

You can write more than once meta tag on the page separate by space.

<code>
{{htmlmetatags>metatag-robots=() 
metatag-keywords=(apfel,bananne,birne) 
metatag-description=(Allgemeiner Obstbauer)
metatag-media-og:image=(:wiki:image.jpg)
metatag-og:description=(anything else)
metatag-og:any=(anything else 2)
}}

</code>

The **result** on web page is:

<code html>
<meta name="robots" content="noindex,nofollow"/>
<meta name="keywords" content="apfel,bananne,birne"/>
<meta name="description" content="Allgemeiner Obstbauer"/>
<meta property="og:image" content="http://localhost/lib/exe/fetch.php?media=wiki:image.jpg"/>
<meta property="og:description" content="anything else"/>
<meta property="og:any" content="anything else 2"/>
</code>

===== Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

Download the plugin at [[https://github.com/heikoS2C/htmlmetatags/archive/master.zip|htmlmetatags-master.zip]] and extract the zip file to the plugin folder on your dokuwiki.

===== Further Informtions =====
This section explains some usefully tips for using the plugin. Check your generated html code for the right meta tag and optimize it with this plugin. Crawlers (like google) collect their data by reading the the meta tag and then by the content. Of curse every crawler uses own algorithm for indexing the web pages.

  * [[https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta| baselines for html meta tags]]
  * [[http://ogp.me| description for The Open Graph protocol]]
  * [[http://www.suchradar.de/magazin/archiv/2013/4-2013/html-verbesserungen.php|tips for optimization your web page]]


===== Change Log =====

{{rss>https://github.com/heikoS2C/htmlmetatags/commits/master.atom date}}

  * **2017-04-24** V2.2 make it compatible wit PHP 7
  * **2017-02-08** V2.1 when no metadata is available then set/add this on page (with the given keys via this plugin)
  * **2016-07-12** V2.0 add handling for open graph metatags (Eric Maeker <eric@maeker.fr>)
  * **2016-04-22** Change the date for "last Update"
  * **2015-05-27** Initial release

===== FAQ =====

===== Discussion =====

==== Feature Request: Define OpenGraph image directly in an image tag ====

**Proposal:** In the spirit of [[wp>Don't repeat yourself]] I'd prefer to not have a "metadata-container" in which I define a "metatag-media-og" attribute and define its image filepath/link only to later in the content area again having an image with its filepath placed but instead directly in my image of choice say "This is my openGraph image for that page" by a markup like this %%{{wiki:dokuwiki-128.png?og}}%%. If I have multiple images on a page, I could simply remove the og-tag from one and add it to another one. But the other method should be kept, because it allows advanced features such as using images which are not present in the page content.

**In general:** Thanks for providing his! Am currently researching which CMS to choose for my portfolio and am seriously considering DokuWiki as I love it's simplicity. One thing which held me back was not having OpenGraph support which is such a convenience for URL sharing in any media (messengers, social media). If that works out with your plugin, great!

--- [[user>porg|porg]] //2021-06-21 20:09//

==== Thanks by Eivind  ====

Thanks for a really helpful plugin! I have one issue: Open Graph allows for several images to be specified, but this plugin smacks them together in the same meta content.  --- [[user>molefunk|Eivind]] //2016-11-28 21:48//