Wruczek/ts-website

Meta tags por page

Closed this issue · 8 comments

cataalin commented

How can I put a separate description for each page? or upload separate meta tags to each page to improve seo? since google indexes badly... I was trying to look at the latte wiki but I can't find anything, where I can see all the parameters that I can add in:

$data = [
"pagetitle" => __get("CONTACT_TITLE"),
"navActiveIndex" => 4,
"paneltitle" => '' . __get("CONTACT_PANEL_TITLE")
];

https://i.imgur.com/1srIaVX.jpeg

@Wruczek

Wruczek commented

You can define some variables and then use them in body.latte. For example:

faq.latte

 {extends "body.latte"}
 {var $title = __get("FAQ_TITLE")}
+{var $metaDescription = "This is a description that will only be set for the FAQ page"}
 {var $navActiveIndex = 5}

 {block content}
...

body.latte

...
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="generator" content="TS-website {\__TSWEBSITE_VERSION} by Wruczek / https://github.com/Wruczek/ts-website">
+    {ifset $metaDescription}
+        <meta name="description" content="{$metaDescription}">
+    {/ifset}
     <meta name="csrf-token" content="{$csrfToken}">
     <link rel="shortcut icon" href="img/icons/defaulticon-16.png">
...

Then you are able to set a different meta description tag for every page.

cataalin commented

You can define some variables and then use them in body.latte. For example:

faq.latte

 {extends "body.latte"}
 {var $title = __get("FAQ_TITLE")}
+{var $metaDescription = "This is a description that will only be set for the FAQ page"}
 {var $navActiveIndex = 5}

 {block content}
...

body.latte

...
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="generator" content="TS-website {\__TSWEBSITE_VERSION} by Wruczek / https://github.com/Wruczek/ts-website">
+    {ifset $metaDescription}
+        <meta name="description" content="{$metaDescription}">
+    {/ifset}
     <meta name="csrf-token" content="{$csrfToken}">
     <link rel="shortcut icon" href="img/icons/defaulticon-16.png">
...

Then you are able to set a different meta description tag for every page.

perfect thanks, any place to document all this? I have a couple of modifications in mind and I'm new to latte.

Edit: There is a problem and that is that no description appears on the body.latte main page.

Wruczek commented

So the code does not work at all (when viewing faq there's no header?), or the issue is on other pages?

cataalin commented

Entonces, ¿el código no funciona en absoluto (al ver las preguntas frecuentes no hay encabezado), o el problema está en otras páginas?

The code works perfectly, the only thing is that the main page "body.latte" is left without the meta tag, that is, they all show their independent meta tag except "body.latte"

Wruczek commented

You can replace the if statement with:

...
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="generator" content="TS-website {\__TSWEBSITE_VERSION} by Wruczek / https://github.com/Wruczek/ts-website">
+    <meta name="description" content="{$metaDescription ?? "default description"}">
     <meta name="csrf-token" content="{$csrfToken}">
     <link rel="shortcut icon" href="img/icons/defaulticon-16.png">
...

With this you can set a default value that will be shown when there's no $metaDescription set on a page.

cataalin commented

You can replace the if statement with:

...
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="generator" content="TS-website {\__TSWEBSITE_VERSION} by Wruczek / https://github.com/Wruczek/ts-website">
+    <meta name="description" content="{$metaDescription ?? "default description"}">
     <meta name="csrf-token" content="{$csrfToken}">
     <link rel="shortcut icon" href="img/icons/defaulticon-16.png">
...

With this you can set a default value that will be shown when there's no $metaDescription set on a page.

ok I'll try when I get home, could you tell me where I can find complete documentation of these things? I have a couple more questions about other things I need to do, thank you very much

Wruczek commented

Look at the official documentation: https://latte.nette.org/en/syntax

cataalin commented 
{var $metaDescription = "This is a description that will only be set for the FAQ page"}

the code works perfect now, i've been looking at the latte wiki but i didn't find anything related to what we just did for example.