Actually what I want to do is make my pages link to be shown on the google+ or Facebook post with the OpenGraph tags.
I made my post page changes the
I tried these way,
first of all, I declared the meta tag inside first.
then tried to change the tags in the template helpers dynamically like this.
title: ->
$("meta[property='og:title']").attr "content", #title
#title
used manuelschoebel:ms-seo package from atmosphere
onAfterAction: ->
unless Meteor.isClient then return
data = #data()
SEO.set
title: data.title
meta:
description: 'changedBySEO'
og:
title: data.title
description: 'changedBySEO'
But the result alway shows go title in head.
I think google+ or Facebook just grab the meta tags only so the page rendering is not actually working.
Did I miss something or I should apply spiderable packages or something to do this functionality?
Thanks all-
you need the spiderable package, otherwise facebook can't see the tags created by the ms-seo package (remember they're dynamically created in js)
Related
I am maintaining a MeteorJS web app and I need to add some specific meta tags into homepage.
I see that there is a head.html in the project that has all information, including
the existing og meta tags, I tried to add the specific meta tag there and restarted the server.
If I right click view source on the homepage, I can see the newly added meta tag.
However, if I try to use Facebook debugger to see what the FB Crawler sees, the newly added meta tag is not seen by the bot. In fact the bot sees some additional twitter meta tags that does not exist anywhere in the project.
Investigating further, I noticed the project uses a library called
manuelschoebel:ms-seo: https://github.com/DerMambo/ms-seo
This library is initialised in the Meteor.startup like this:
Meteor.startup(function() {
if(Meteor.isServer){
if(Meteor.DEBUG){
robots.addLine('Disallow: /');
}
robots.addLine('Disallow: /admin');
}
if(Meteor.isClient){
// default SEO
return SEO.config({
title: '...',
meta: {
"description": "..."
},
og: {
'image': '....'
}
});
}
Now I am guessing this SEO library is the reason why the bot does not see the newly added meta tag in the head.html.
What is the right way to add the newly meta tag in a clean way? why is this SEO library not respecting the head.html in the project?
and pardon what might be a repeat question, the solutions to the others didn't solve my problem. I'm working on a Hugo site and attempting to embed an iframe. The element shows but the I get the message 'This content is blocked. Contact the site owner to fix the issue.' when it loads, so no one can see the content.
Here is my .md information
+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>
I've also updated my config.toml file by adding the following:
[markup.goldmark.renderer]
unsafe = true
I'm not sure what I'm missing. Please let me know if you need more information about what I've done. I've tried shortcode as well but that doesn't render anything at all (I'm still new to shortcodes which is why I am embedding the iframe).
Thank you for your time and consideration.
For those who just want to embed an iframe into a Hugo site, like the question title says:
In the examples below, the content between --- is called front matter and it is in YAML syntax. You can add here your own structured data or use predefined Hugo's front matter fields. The rest of the file (below the second ---) is a standard Markdown syntax formatted content.
You don't need to use the YAML syntax in your front matter. Also TOML and JSON formats are supported by Hugo (see docs)
Solution 1: direct HTML in the content
You can add the HTML code itself to the Markdown content (like T.J.'s .md file example in the question). Hugo's markdown engine will then render the iframe as it is.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
<iframe src="https://example.com/"></iframe>
Solution 2: custom shortcode
You can implement your own shortcode which can be useful when using some kind of CMS or in a case when you want to style the iframe somehow.
<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>
You can then add iframes to your content in markdown files like this:
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
{{< iframe https://example.com/ >}}
Shortcodes allow you also to create named attributes so you would use the shortcode like {{< iframe url="https://example.com/" >}}. The benefit of this solution is that you are free to set up the HTML code that will be rendered when using the iframe shortcode. For more information, see the shortcode docs.
Solution 3: using the front matter
If you build your page from predefined blocks or components or the page is a very simple one where you for example don't use the markdown content but just the front matter fields, you can be interested in this solution which is basically just using the front matter for storing the iframe's URL or other settings you want to use during the HTML rendering.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---
In your layout file, you will get this piece of information by using {{ .Params.iframe }}.
I am working in Wordpress, and I am using Elementor. Elementor has a native feature for the title of the posts and images to link to the post.
But if I add an excerpt text, it doesn't link to the post. It is not clickable. The read more button does, but not the excerpt of the post.
I am trying to create something like this: greatist.com Every post on their website is clickable - the excerpt, the title, and the image.
My excerpts are really short like on that website, and I would really like them to be clickable. I have absolutely no idea how to do this and I'm beginning to think it's not possible. I am using Hello Elementor theme.
I would deeply appreciate anyone's help. I just registered to ask this question.
You can always try to save text as an photo and make it clickable or make a full section clickable.To do this try to use plugin called "Make Column Clickable Elementor".
Add this code to your website:
const postExcerpts = document.querySelectorAll('.elementor-posts .elementor-post .elementor-post__excerpt');
postExcerpts.forEach(postExcerpt => {
const postUrl = postExcerpt.parentNode.querySelector('.elementor-post__title a').href;
postExcerpt.addEventListener('click', () => {
window.location.href = postUrl;
});
});
This can be added using a script tag. Choose from the following options:
Add this code as a script tag in your functions.php file, to be rendered at the end of the page (wp_footer action hook).
If you have Elementor Pro, use its built-in Custom Code feature to add the code in a script tag to the end of the body tag.
It's recommended to add a pointer cursor so the user will know the excerpt is a link. This can be achieved by adding the following CSS to your style.css file.
.elementor-posts .elementor-post .elementor-post__excerpt {
cursor: pointer;
}
Using the Ghost blog routes.yaml file it is possible to use the collections block to create a custom collection made from some tag(s) and / or other data. You can also tell this collection to use a custom theme template see:
https://docs.ghost.org/tutorials/creating-content-collections/
https://docs.ghost.org/concepts/routing/#content-structure
For instance:
collections:
/example/:
permalink: /example/{slug}/
controller: channel
filter: tag:example-tag
template:
- example
All of the above works and my collection properly uses my new example theme file.
The issue is that unlike the tag page (for example-tag) my new custom collection does not have a readily documented way to work with the title etc.
It does not pull the title / meta description from the tag used to build the collection (which would be great for collections built from single tags). In an attempt to work around that I tried some {{#has}} statements but I can't figure out what context the custom route would fit into.
With the above example routes.yaml the title for the custom collection ends up as 'My Site Name (Page 1)' — and there is no Meta Description.
This issue also extends into the Open Graph data which lists an identical title as well as no description for the custom collection.
My guess is that it may be possible to use a data property attached to the routes.yaml file to achieve this (see: https://docs.ghost.org/concepts/routing/#data) but I haven't found a solution as of now.
While my initial attempts at googling for a solution came up empty, this is the best reference I have seen to the issue:
https://forum.ghost.org/t/dynamic-routing-page-post-data-context-in-default-hbs-nested-navigation-on-custom-collections/4204
https://github.com/TryGhost/Ghost/issues/10082
I found a way to work around.
You create a page called example in the Ghost Admin tool.
Customize routes (instead of collections) in the routes.yaml as following:
routes:
/example/:
controller: channel
filter: tag:example-tag
template: example
data: page.example
The page.example will use the metadata of this page in the Ghost.
This is possible only with workaround described in issue: https://github.com/TryGhost/Ghost/issues/10082
Generally do following:
create page Example (with slug example) and fill metadata title & description you want
in routes.yaml alter your collection definition /example/ add following:data: page.example to link your collection root with specified page
now in your template definition example.hbs you could use e.g. {{#page}} {{content}} {{/page}} tag to insert content from your page. You can do it also in default.hbs template which is included from your example.hbs. So replace: <title>{{meta_title}}</title> in default.hbs with following:
{{#unless page}}
<title>{{meta_title}}</title>
{{else}}
{{#page}}
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}"/>
{{/page}}
{{/unless}}
This will set specific title/description for your collection root pages in general way. It is possible to generate schema.org metadata in the similar way. Unfortunately Facebook and Twitter metadata is not so simple to do because, {{ghost_head}} tag in default.hbs already inserts site metadata to this page. Last note: besides {{meta_title}} and {{meta_description}} I suppose you could use all metadata fields defined here.
In default.hbs I added the following block:
{{{ block "metaTitle"}}}
and eg. in post.hbs I filled that block as follows:
{{!< default}}
<div class="content-area">
<main class="site-main">
{{#post}}
{{#contentFor "metaTitle"}}
<title>{{title}}</title>
{{/contentFor}}
...
For other pages like page.hbs, blog.hbs, author.hbs I did the same. I think that solution is more flexible because we have more control over title value.
I have created custom post type 'portfolio' in my wordpress application.
I am using wp-pagenavi plugin for pagination of custom posts.Can anyone guide me how will I implement ajax pagination i.e load newer posts without reloading the whole page. Any help will be greatly appreciated...
/*******ajax pagination*******/
jQuery(document).on('click', '#pagination a', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#content').html('Loading...'); //the 'main' div is inside the 'content' div
jQuery('#content').load(link+' #main');
});
the .live() function has been depreciated so use .on() instead.
obviously the jQuery library is needed too.
Here's a couple of options you can try:
AJAXify WordPress Tutorial
AJAXify WordPress Plugin
I've used the first option, its a good tutorial. I know it works. You may need to modify it some though. I cannot vouch for the second option as I've never used it. Just a quick Google search turned it up though.