Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to add meta data to a page? #358

Closed
BsNoSi opened this issue Sep 3, 2018 · 11 comments

Comments

4 participants
@BsNoSi
Copy link

commented Sep 3, 2018

To improve the readability of twitter links it is possible, to add "twitter card tags" to a page. This is nothing special, only twitter named meta tags:

<meta name=”twitter:title” content=”A Complete Guide To Social Media Sharing” />
<meta name=”twitter:description” content=”Social media automation tools can boost your efficiency.” />
<meta name="twitter:image" content="https://www.blog2social.com/en/blog/wp-content/uploads/2017/01/A-Complete-Guide-1.png" />

German Source of this example

I asked myself, if I can simply add these to the header to achieve meta entries. (The answer is no.)

Before I deal with it more intensively and possibly waste pointless time, I would like to ask a few questions:

  • Is there possibly a list of "meta tags" where these can be simply added to use them in the header (eg like "template" or "tag") if needed?
  • If not: what is the best method to add additional meta entries?
  • Would it be expedient to offer this with a [addmeta] plugin?

I am not shure if a plugin would be a good solution for that. The samples above may include another challenge, because they us a colon (:) to separate namespaces ("twitter:*") which is used in yellow header to mark the end of the header tag.

Maybe I simply missed an existing solution – I this case an url is welcome ;)

@schulle4u

This comment has been minimized.

Copy link
Member

commented Sep 5, 2018

As for the twitter plugin, additional metadata easily can be added using the onParsePageExtra function. Please download and test this file. It contains the twittercard metatags for page title and description. To include an image, you can define it in your page settings as Image: URL/to/image.jpg.

A general addmeta plugin in theory can work the same, but might have limitations for some meta tags.

Steffen

@datenstromse datenstromse changed the title Adding Metatags How to add meta data to a page? Sep 5, 2018

@schulle4u

This comment has been minimized.

Copy link
Member

commented Sep 5, 2018

And just in case you would like to have this without installing a plugin, you can also modify your system/themes/snippets/header.php. The Yellow API gives you the same access to page metadata as with a plugin. Here is an example (not tested):

<!DOCTYPE html><html lang="<?php echo $yellow->page->getHtml("language") ?>">
<head>
<title><?php echo $yellow->page->getHtml("titleHeader") ?></title>
<meta charset="utf-8" />
<meta name="description" content="<?php echo $yellow->page->getHtml("description") ?>" />
<meta name="keywords" content="<?php echo $yellow->page->getHtml("keywords") ?>" />
<meta name="author" content="<?php echo $yellow->page->getHtml("author") ?>" />
<meta name="generator" content="Datenstrom Yellow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="twitter:title" content="<?php $yellow->page->getHtml("title") ?>" />
<meta name="twitter:description" content="<?php $yellow->page->getHtml("description") ?>" />
<?php if ($yellow->page->getHtml("image")): ?> 
<meta name="twitter:image" content="<?php $yellow->page->getHtml("image") ?>" />
<?php endif ?>
<?php echo $yellow->page->getExtra("header") ?>
</head>
[...]

This works with any custom metadata you would like to have in your page.

@BsNoSi

This comment has been minimized.

Copy link
Author

commented Sep 6, 2018

Hi Steffen,

thank you very much for your profound input!

I tried the "header upgrade" that works fine after adding a few "echos". To have an additional site info I switched to titleHeader instead of title. My (tested and working) code:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?php echo $yellow->page->getHtml("titleHeader") ?>" />
<meta name="twitter:description" content="<?php echo $yellow->page->getHtml("description") ?>" />
<?php if ($yellow->page->getHtml("image")): ?> 
<meta name="twitter:image" content="<?php echo $yellow->page->getHtml("image") ?>" />
<?php endif ?>

As mostly, solutions in YELLOW are much easier as expected. Modifying the header-snippet is (in my opinion) better than using a plugin for this effort.

Edit: I added the necessary line "twitter:card"…

Edit II: I tested a few things but it seems, as if there is something more neccessary to get it expanded as desired.

@schulle4u

This comment has been minimized.

Copy link
Member

commented Sep 6, 2018

Glad I could help. :) I never heard of Twitter cards before, but after reading some documentation I think they are a nice addition for the Twitter plugin.

@markseu

This comment has been minimized.

Copy link
Member

commented Sep 6, 2018

I suggest a new socialmeta plugin. There are different meta tags for social media websites, for example by Twitter and Open Graph. Later is used by Facebook, LinkedIn, Google+.

@schulle4u

This comment has been minimized.

Copy link
Member

commented Sep 6, 2018

OK, I'll have a look into the appropriate docs and will create a social metatag plugin.

@BsNoSi

This comment has been minimized.

Copy link
Author

commented Sep 6, 2018

I think, there are two different targets. The twitter plugin displays twitter in a YELLOW page, the "twitter cards" format the display at twitter in this case the appearance of a link to a YELLOW page.

Currently, I have to stop my investigations. The expected „card“ does not appear on twiter in spite of these meta entries. Possibly there is something additionally required. Because of lack of time I can not say, when I am able to check this.

@schulle4u

This comment has been minimized.

Copy link
Member

commented Sep 6, 2018

I think you at least need to define a card type, e.g.:

<meta name="twitter:card" content="summary" />

Here is a cards markup list

I'm making great success with my social media plugin, however the open graph tags are a little tricky. To validate the page you have to extend the opening <html tag with some namespaces, but I can't find a solution to do this without modifying the header snippet.

@BsNoSi

This comment has been minimized.

Copy link
Author

commented Sep 7, 2018

The "missing link" is

<meta name="twitter:site" content="@Twitter-Account-Name" />

Without an account there is no display. This meta is mandatory.

I took a short look on your socialtags plugin: Chapeau!

I will remove my own modifications and use your plugin instead. It solves the requirements perfectly.

Instead of offering a completely header.php it might be better to describe the required modification in the readme file. The header.php may have been modified and therefore is not replaced, which leads to a not working plugin.

The "How to configure" possibly should advice, that the SocialTagTwitterUser has to be given, otherwise, the plugin will not work as expected. Additionally, instead of offering a header file, the "How to install" should better explain, how it works:

Add the following line at the end of the </head> section in your relevant header.php file(s) located in "system/themes/snippets":

…
<?php echo $yellow->page->getExtra("header") ?>
</head>
…

With this, you cover the possible situation, that more than one header snippet are used in different site areas.

Same with required open graph additionals.

Personally, I prefer configuration of plugins in the plugin itself, to keep the things as good as possible together instead spreading them into places. The only exception is the requirement of same information in more than one plugin. As far as I know and have seen this happens only for environmental settings (eg image path, translations … ) , mostly never for plugin specific things.

@schulle4u

This comment has been minimized.

Copy link
Member

commented Sep 7, 2018

Thanks for your input. I've modified the plugin so that Twitter cards metatags are completely omited if SocialtagsTwitterUser is missing. The documentation also has been updated and now contains modification instructions for header.php in the usage section.

@BsNoSi

This comment has been minimized.

Copy link
Author

commented Sep 7, 2018

You are fast. Really fast.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.