How to add Twitter card image to individual documentation page? - docusaurus

Is it possible to add a Twitter card image to the individual documentation page? I know that I can use Meta image in docusaurus.config.js but this is a site-wide setting.

You can use the front matter at the top of each .md page to add metadata, as well as the image that will be used in the Twitter card.
---
title: Page Title
description: Page description
slug: page-slug
tags:
[
some, tags
]
image: https://i.imgur.com/mErPwqL.png
---
# Page Title
Hello world

Related

Can I embed different google+ comment boxes to the same post with different string ids?

Is it possible to embed different Google+ comment boxes to a post that has different string ids in the url.
For example:
http://www.distressedvolatility.com/p/trending-news.html#3.18771?icx_id=http://www.voanews.com/a/janet-yellen-signals-interest-rate-increase-likely-this-month/3748729.html&showTitle=true
and
http://www.distressedvolatility.com/p/trending-news.html#3.13006?icx_id=28666&showTitle=true
Thanks.
The Google+ comment box shows the comments based on the URL, by default the URL is set via Blogger layout tag (like for example <data:post.canonicalUrl/>) so that the comments are linked to a single URL despite the post URL changing in the address bar (like mobile version appending ?m=1 or different ccTLDs Blogger uses). To render different comment boxes based on the URL, you can change the href parameter to window.location.href. The code for same will look like -
<script src='https://apis.google.com/js/plusone.js' />
<div id='comments'>
</div>
<script>
gapi.comments.render('comments', {
href: window.location.href,
width: '590',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
</script>

Google shows alt-text as website title

I am trying to optimize a web site which is managed by typo3. There is a page on this website, let's call it seminars. When I ask google to search for this Website by entering "Big Company seminars", I receive a result which looks like that:
Logo Seminars - Big company
url://seminars.bigcompany.de
The string "Logo" should not be displayed there. So I checked the source code and found that:
<title>Seminars - Big Company</title>
and
<img src="BigCompanyLogo.png" alt="Logo Seminars">
It looks like Google takes the alternative text of this image and uses it as the title for their search results.
Any ideas?
Google Search may change webpage titles they show on their result page. You can’t control this.
About your alt content:
Is the page about "Logo Seminars", or does "Logo" mean that the image is the logo? In the latter case, you might want to remove "Logo" from the alt content (or place it, for example, in square brackets). Note that, if the image is the only content of the link, the alt content should describe the link target, not the image.

Customize facebook share content

I have a WordPress website and where I want to set the custom title, description and image for each URL so that when someone share the URL than they see the content and image which is I predefine. Is it possible? I tried couple of plugin but stuck with it more and more. Anybody can tell me how can I do it.
For SEO, I have used the Wordpress SEO by Yoast which allows you to do that on a previous project to great effect.
For Facebook to read the title, description and images for sharing, Opengraph tags have to be generated. For more about opengraph tags, refer to the Facebook Developer Guide on using proper opengraph tags. The Yoast SEO plugin does generate the relevant opengraph tags for sharing.
Specifically the Yoast plugin changelog enhancements include:
Added Facebook / OpenGraph title input and Google+ title input and image upload field to Social tab.
Added Facebook / OpenGraph title input for the homepage on SEO -> Social settings page.
Changed Facebook / OpenGraph default image and homepage image input fields to use the media uploader.

Dynamic Image for Facebook Opengraph og:image meta tag

I am trying to share an image from my website on facebook. The image can be dynamic, but other meta will remain the same.
Is there a way I can have dynamic data in OG:IMAGE tag, or will I have to go with the other option of FB Post APIs.
Yes and no. Facebook scrapes your site once, and cached the metadata that it finds, unless you specifically go here and force the scraper to crawl your site again. The cache does generally expire (perhaps after 1-2 days?), so when requested again outside of this cache period, Facebook will crawl the site again.
You can have a dynamically generated og:image meta tag, but it will only be read the one time (per cache period), and only that instance of the image will be saved.
For example, if user A shares your page, and your page returns imageA.png in the og:image tag, then that is the image that will be associated with your page's metadata.
If user B then shares the same page within the same cache period, Facebook will forgo the metadata scraping and assume that imageA.png is still a valid og:image.
Take a look at this Gist.
You should ping facebook to recrawl your page again every time you update your og:image tag.
def share_facebook_fanpage(link,msg,PAGE_ID,OAUTH_ACCESS_TOKEN,apiversion='v2.8'):
BASE_URL = "https://graph.facebook.com/%s" % apiversion
POST_URL = "%s/%s/feed" % (BASE_URL, PAGE_ID)
# force facebook scape the link first to avoid not showing thumb
f = requests.post(BASE_URL, data={
'id': link,
'scrape': True,
'access_token': OAUTH_ACCESS_TOKEN
})
# share the link
r = requests.post(POST_URL, data={'access_token': OAUTH_ACCESS_TOKEN, 'link': link, 'message':msg})

Google+ Sharer - preview image

I am using links like this : https://plus.google.com/share?url=www.myurl.com to share articles on Google+ from a website.
This works fine but the preview image of the share is not right.
I read in the Google doc that you need to specify an image like this:
<img itemprop="image" src="thumbnail.jpg" />
The thing is, the image I want to use is not being displayed on the page I want to share. I have specific thumbnail images (of smaller size than the images displayed in the article) that I'd like to use.
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
https://developers.google.com/+/plugins/snippet/:
2. Open Graph protocol
If the page contains Open Graph properties for the title, image, and description, they will be used for the +Snippet.
Additionally, the schema.org tag that defines your page's preview image does not need to be displayed on the page, you could instead define it within your HEAD as metadata:
<meta itemprop="image" content="thumbnail.jpg" />