I need to update mata title, description and keyword for each page.But in bolt dashboard there is no option for that.
Screenshot
There is an extesnion for SEO that allows you to edit the meta tags, the title and the index rules: https://market.bolt.cm/view/bobdenotter/seo
The SEO extension also lets you edit OG tags.
You need to add that fields in configuration and templates.
Edit your content types for each item type, then use that field into your template.
Example:
Code in your contenttypes file:
page:
name: Page
singular_name: Page Item
fields:
title:
type: text
class: large
slug:
type: slug
uses: title
Template sample:
<head>
<meta charset="utf-8" />
<title>{{ page.title }}</title>
</head>
More info in their documentation about contenttypes: https://docs.bolt.cm/3.6/contenttypes/intro
Related
I'm using Jekyll to build a static site for my blog site. Jekyll uses the liquid template engine.
To reference posts (blog posts) in the _posts directory, the code in the index.html is something like this
<ul class="posts">
{% for post in site.posts %}
<!-- do stuff here -->
<div class="container">
<h4 class="card-title"><b>{{ post.title }}</b></h4>
<p class="card-author">{{ post.author }}</p>
</div>
{% endif %}
</ul>
Sample markdown file (.md) in _posts:
---
layout: default
title: "Another Blog Post!"
date: 2021-08-09 00:00:00
cover_image: "https://raw.githubusercontent.com/sharmaabhishekk/sharmaabhishekk.github.io/master/images/cover.png"
categories: main
tag: "advanced"
author: "Abhishek Sharma"
---
Hi this is a blog post!
Jekyll offers powerful support for code snippets:
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
For each of the markdown files in my _posts directory, it iterates over it and displays it appropriately. More importantly, I can use the post.<attribute> way to refer to variables I set (post.title, post.author) in the markdown file.
However, I'd like to write my posts in HTML and not markdown. I want to know how can I still
how to iterate over the .html files in my _posts directory?
how to define these values in my html file?
how can the template engine parse through and read those variables?
For 2.), I settled on a way to use meta tags to write those values. I'm not sure if that's best practice but this is what I'm doing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Title</title>
<meta name="author" content="Abhishek Sharma">
<meta name="title" content="Blog Post 1">
<meta name="date" content="10-08-2021">
</head>
But then I'm unsure how to reference these meta tag name and content pairs in my index.html liquid template.
I'd appreciate any help with this. Thank you!
You can use HTML files as post or collection items in Jekyll by default:
Rename _posts/2020-01-01-example.md to _posts/2020-01-01-example.html
Change the content to HTML (keep the front matter the same)
You'll iterate over them the same way (with site.posts), and you'll be able to access the front matter as you were.
Here's what your example file would look like (the DOCTYPE and other tags you reference are in your default layout):
---
layout: default
title: "Another Blog Post!"
date: 2021-08-09 00:00:00
cover_image: "https://raw.githubusercontent.com/sharmaabhishekk/sharmaabhishekk.github.io/master/images/cover.png"
categories: main
tag: "advanced"
author: "Abhishek Sharma"
---
<p>Hi this is a blog post!</p>
<p>Jekyll offers powerful support for code snippets:</p>
{% highlight ruby %}
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
{% endhighlight %}
I use plyr player on my page. Basically the only code that is on the page is this:
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
Everything works fine. Just when I send such link to someone over messenger / whatsapp they see the code in the preview I use a custom made CMS similar to WordPress where I added the plyr script code in the post body in the HTML code.
NOTE I am not able to edit nor modify head in html, only div class="container" in the html body. See the url https://zz.zustatzdravy.cz/skryte/90-test-a.html . The url might work in the future.
I am not using WP but something like WP. It is custom made it has got no plugins. I can use custom css
is there any way I can hide the code from the preview?
UPDATE: Facebook sharing debbuger shows what I mean
I think adding open graph / meta description will work. For more information check out https://ogp.me/
In the code replace all instances of {{TITLE TO SHOW IN PREVIEW}} and {{DESCRIPTION TO SHOW IN PREVIEW}}.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{TITLE TO SHOW IN PREVIEW}}</title>
<meta name="title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta name="description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="video.other">
<meta property="og:title" content="{{TITLE TO SHOW IN PREVIEW}}">
<meta property="og:description" content="{{DESCRIPTION TO SHOW IN PREVIEW}}">
</head>
<body>
<div class="container">
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="123123132"></div>
</div>
<script src='https://data1.132231321.cz/124141/users/plyr/plyr.min.js'></script>
<script>
const player = new Plyr('#player', {});
// Expose player so it can be used from the console
window.player = player;
</script>
</body>
</html>
Additionally I recommend adding the following below the og:description meta tag.
<meta property="og:url" content="{{ URL OF PAGE }}" />
<meta property="og:image" content="{{ PREVIEW IMAGE }}">
{{ URL OF PAGE }} in this instance being the current URL... so if the url is https://example.com/thevideo then content for og:url would be https://example.com/thevideo
{{ PREVIEW IMAGE }} an optional image file to show as a preview. This is the full url with domain e.g. https://example.com/img/preview.jpg
You can use the Facebook Sharing Debugger tool to test.
You mentioned you're using a CMS. You might need to find a plugin which modifies the meta header tags. In WP you can use something like Yoast SEO.
Update based on only being able to update the body: Looks like in your specific situation the CMS is already adding the og:title and og:description. The og:title is the page title, and the description is a snippet of the text on the page.
Using the open graph tags is really this only way you can modify the title, description and image that appears in the preview of the message. Therefore the ideal situation would be dependent on the CMS you're using.
Solution 1: Move the javascript to a file.
The following code isn't added to to the description:
<script src='https://data1.azami.cz/124141/users/plyr/plyr.min.js'></script>
Therefore if you can create another javascript file with the const player = new player... code then you could also include with a tag similar to this:
<script src='https://data1.azami.cz/124141/users/plyr/a_new_file_with_script.js'></script>
With the solution 1. The description should now be empty.
Solution 2: Prepend a description to the body
If you can't create a new file on the server for some reason, and you can really just modify the body, then for now the only thing I can think of is a little hack around it which would add a new description but might not remove the javascript code from the description. Unless maybe if this new description is longer than 300 characters.
The hack is adding something like the code below before including the script tags for the video. It description would be hidden when viewing the website but prepended the the description tag.
<div style="display: none">Here you can put a description of a video. Or a general description for the website. It will be displayed as the description when sharing via messenger. Maybe if you make this 300 characters or longer, then the script won't show up in the description. This text including this note is 300 characters.</div>
How can i remove meta tags in Oxwall software or any software. The Oxwall core loads on auto wrong Facebook meta tags.
Wrong value (generated by Oxwall):
<meta name="og:type" content="website" />
Correct value:
<meta property="og:type" content="website" />
Thanks in Advance
You can include the following line to your base or plugin init.php file. If you are not working with a plugin open /ow_system_plugins/base/init.php and add the following code:
function modify_custom_meta_property(){
OW::getDocument()->addMetaInfo('og:type', 'website', 'property');
}
OW::getEventManager()->bind(OW_EventManager::ON_BEFORE_DOCUMENT_RENDER, 'modify_custom_meta_property');
Finaly i find solution.
You have to do like this:
Go to ow_system_plugins/base/classes/event_handler.php and end of the file remove or out comment all the lines where it add wrong facebook meta:
Example:
// $document->addMetaInfo("og:type", "website");
Go to /ow_system_plugins/base/init.php and at top of file add code like this:
function modify_custom_meta_property(){
OW::getDocument()->addMetaInfo('og:type', 'website', 'property');
OW::getDocument()->addMetaInfo('og:title', 'Your awsome title here', 'property');
}
OW::getEventManager()->bind(OW_EventManager::ON_BEFORE_DOCUMENT_RENDER, 'modify_custom_meta_property');
Clear your website cache and look the source code of your page, now correct metas should bee added and the wrong metas gone.
I want to add a meta tag to one of my pages. However, I am using a CMS (ocotberCMS) which gives me access to only the body of the page. I attempted to add the meta tag to the markup looks like:
<meta name="robots" content="noindex, nofollow, noarchive">
{% partial "temp-partial" %}
the result in page source and inspect element is different:
page source:
<meta name="robots" content="noindex, nofollow, noarchive">
<div>
.......// the body of the page generated by {% partial "temp-partial" %}
</div>
Inspect Element:
<html>
#shadow-root
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
</head>
<body>
<div>
.......// the body of the page generated by {% partial "temp-partial" %}
</div>
</body>
</html>
I have read that it is necessary to add the meta tag to the header according to the HTML4++ documentation. I was wondering if this means it will work in above case or it won't?
OctoberCMS has a "Placeholder" feature which is perfect for what you are trying to do:
https://octobercms.com/docs/markup/tag-placeholder
You can use it in your HTML layout like this:
<html>
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
{% placeholder meta %}
</head>
<body>
{% page %}
</body>
</html>
Then, later in any page:
{% put meta %}
<meta name="robots" content="noindex, nofollow, noarchive">
{% endput %}
Whatever is between the {% put %} tags will be put where the {% placeholder %} is in the layout when it is compiled.
You can edit the head section in the layout of the template.
Go to CMS -> Layout -> default.htm and add the meta tag there.
The actual layouts filename may differ but if you look at the html there, you should see which one is the main layout file.
The reason you see <meta name="robots" content="noindex, nofollow, noarchive"> in the <head> section in your inspector DOM tree while it's in the <body> section of your source code and viewing the page source is because the inspector DOM tree is the version that has already been parsed by your browser.
Due to browsers being willing to accept what are known as "tag soup" (improper syntax and layout of HTML) and simply make their best guess on how it should work; the inspector DOM tree that your browser will show you is already the browser's best guess of what the code should be; regardless of the actual validity of that code.
So, in essence the reason why you see the meta tag in the body when you view the source is because that's where it actually is. The reason why you see it in the head section in your inspector is because the browser has guessed that the head section is the correct location for the meta tag.
To actually add it to your head section, where it is supposed to be for robots to actually see it, you will need to edit your CMS Layouts. If you do not have access to the CMS menu or the Layouts submenu, then your user account does not have permissions for that and you will have to get in contact with whoever built your site or ask for further help in IRC (freenode.net - #october) or Slack.
Page source is what you see when creating a website.
Inspect element source includes generated data such as additional style attributes, database exports etc.
As for your question, try using Jquery and appending (http://api.jquery.com/append/) meta tag within the head.
I have a large quantity of HTML files can i use these and turn them into blog posts??
I am trying to work out a way to turn these into blog posts, and i am not sure if Jekyll is the right option.
Given your original post post-title.html is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>Intro</h2>
<p>Text here</p>
</body>
</html>
You just keep the content part :
<h2>Intro</h2>
<p>Text here</p>
Add a front matter to it :
---
layout: post
---
<h2>Intro</h2>
<p>Text here</p>
Rename it to 2014-12-21-post-title.html. And you're good to go ! Jekyll post can be markdown, but html too !
Note : the title (page.title) is here derived from the file name. If you want to use an elaborated title, you can add it in the front matter :
---
...
title: I'm a blogger, sometimes !!
---
Useful informations can be found in Jekyll documentation.