Skip to content

Commit

Permalink
[Added] Added the ability to set separate images for Twitter Cards an…
Browse files Browse the repository at this point in the history 
…d Facebook OpenGraph images
  • Loading branch information
@khalwat
khalwat committed Sep 5, 2016
1 parent 30b8d3f commit 95b4cea
Show file tree
Hide file tree
Showing 9 changed files with 39 additions and 26 deletions.
16 changes: 12 additions & 4 deletions DOCS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,13 @@ You can also dynamically change any of these SEO Meta fields in your Twig templa
* **Site SEO Name Separator** - The character that should be used to separate the Site SEO Name and Title in the `<title>` tag
* **Site SEO Description** - This should be between 70 and 160 characters (spaces included). Meta descriptions allow you to influence how your web pages are described and displayed in search results. Ensure that all of your web pages have a unique meta description that is explicit and contains your most important keywords.
* **Site SEO Keywords** - Google ignores this tag; though other search engines do look at it. Utilize it carefully, as improper or spammy use most likely will hurt you, or even have your site marked as spam. Avoid overstuffing the keywords and do not include keywords that are not related to the specific page you place them on.
* **Site SEO Image** - This is the image that will be used for display as the global website brand, as well as on Twitter Cards and Facebook OpenGraph that link to the website. The image must be in JPG, PNG, or GIF format.
* **Site SEO Image** - This is the image that will be used for display as the global website brand, as well as on Twitter Cards and Facebook OpenGraph that link to the website, if they are not specified. The image must be in JPG, PNG, or GIF format.
* **SEO Image Transform** - The image transform to apply to the Site SEO Image.
* **Site Twitter Card Type** - With Twitter Cards, you can attach rich photos and information to Tweets that drive traffic to your website. Users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.
* **Site Twitter Image** - This is the image that will be used for display on Twitter Cards in tweets that link to the website. If no image is specified here, the Site SEO Image will be used for Twitter Cards instead. The image must be in JPG, PNG, or GIF format.
* **Twitter Image Transform** - The image transform to apply to the Twitter SEO Image. Twitter recommends: 120 x 120 pixels minimum size, 1:1 aspect ratio, 1mb max size for Summary Card images, and 280x150 pixels minimum size, 1.86:1 aspect ratio, 1mb max size for Summary Card with Large Image images.
* **Site Facebook Open Graph Type** - Adding Open Graph tags to your website influences the performance of your links on social media by allowing you to control what appears when a user posts a link to your content on Facebook.
* **Site Facebook OpenGraph Image** - This is the image that will be used for display on Facebook posts that link to the website. If no image is specified here, the Site SEO Image will be used for Facebook posts instead. The image must be in JPG, PNG, or GIF format.
* **Facebook Image Transform** - The image transform to apply to the Facebook SEO Image. Facebook recommends: 1200 x 630 pixels minimum size, 1.9:1 aspect ratio, 8mb max size.
* **Site Robots** - The [robots meta tag](https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=en) lets you utilize a granular, page-specific approach to controlling how an individual page should be indexed and served to users in search results. Setting it to a blank value means 'no change'.

Expand All @@ -100,7 +102,7 @@ SEOmatic automatically handles requests for `/robots.txt`. For this to work, mak
If you are running Nginx, make sure that you don't have a line like:

location = /robots.txt { access_log off; log_not_found off; }

...in your config file. A directive like this will prevent SEOmatic from being able to service the request for `/robots.txt`. If you do have a line like this in your config file, just comment it out, and restart Nginx with `sudo nginx -s reload`.

The **Preview Robots.txt** button lets you preview what your rendered robots.txt file will look like.
Expand Down Expand Up @@ -287,11 +289,13 @@ You can also dynamically change any of these SEO Meta fields in your Twig templa
* **SEO Title** - This should be between 10 and 70 characters (spaces included). Make sure your title tag is explicit and contains your most important keywords. Be sure that each page has a unique title tag.
* **SEO Description** - This should be between 70 and 160 characters (spaces included). Meta descriptions allow you to influence how your web pages are described and displayed in search results. Ensure that all of your web pages have a unique meta description that is explicit and contains your most important keywords.
* **SEO Keywords** - Google ignores this tag; though other search engines do look at it. Utilize it carefully, as improper or spammy use most likely will hurt you, or even have your site marked as spam. Avoid overstuffing the keywords and do not include keywords that are not related to the specific page you place them on.
* **SEO Image** - This is the image that will be used for display as the webpage brand for this template, as well as on Twitter Cards and Facebook OpenGraph that link to this page. The image must be in JPG, PNG, or GIF format.
* **SEO Image** - This is the image that will be used for display as the webpage brand for this template, as well as on Twitter Cards and Facebook OpenGraph that link to this page, if they are not specified. The image must be in JPG, PNG, or GIF format.
* **SEO Image Transform** - The image transform to apply to the Site SEO Image.
* **Twitter Card Type** - With Twitter Cards, you can attach rich photos and information to Tweets that drive traffic to your website. Users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.
* **Twitter Card Image** - This is the image that will be used for Twitter Cards that link to this page. If no image is specified here, the Site SEO Image will be used for Twitter Cards instead. The image must be in JPG, PNG, or GIF format.
* **Twitter Image Transform** - The image transform to apply to the Twitter SEO Image. Twitter recommends: 120 x 120 pixels minimum size, 1:1 aspect ratio, 1mb max size for Summary Card images, and 280x150 pixels minimum size, 1.86:1 aspect ratio, 1mb max size for Summary Card with Large Image images.
* **Facebook Open Graph Type** - Adding Open Graph tags to your website influences the performance of your links on social media by allowing you to control what appears when a user posts a link to your content on Facebook.
* **Facebook OpenGraph Image** - This is the image that will be used for Facebook posts that link to this page. If no image is specified here, the Site SEO Image will be used for Facebook posts instead. The image must be in JPG, PNG, or GIF format.
* **Facebook Image Transform** - The image transform to apply to the Facebook SEO Image. Facebook recommends: 1200 x 630 pixels minimum size, 1.9:1 aspect ratio, 8mb max size.
* **Robots** - The [robots meta tag](https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=en) lets you utilize a granular, page-specific approach to controlling how an individual page should be indexed and served to users in search results. Setting it to a blank value means 'no change'.

Expand Down Expand Up @@ -319,11 +323,13 @@ You can also dynamically change any of these SEO Meta fields in your Twig templa
* **SEO Title** - This should be between 10 and 70 characters (spaces included). Make sure your title tag is explicit and contains your most important keywords. Be sure that each page has a unique title tag.
* **SEO Description** - This should be between 70 and 160 characters (spaces included). Meta descriptions allow you to influence how your web pages are described and displayed in search results. Ensure that all of your web pages have a unique meta description that is explicit and contains your most important keywords.
* **SEO Keywords** - Google ignores this tag; though other search engines do look at it. Utilize it carefully, as improper or spammy use most likely will hurt you, or even have your site marked as spam. Avoid overstuffing the keywords and do not include keywords that are not related to the specific page you place them on.
* **SEO Image** - This is the image that will be used for display as the webpage brand for this template, as well as on Twitter Cards and Facebook OpenGraph that link to this page. The image must be in JPG, PNG, or GIF format.
* **SEO Image** - This is the image that will be used for display as the webpage brand for this entry, as well as on Twitter Cards and Facebook OpenGraph that link to this page, if they are not specified. The image must be in JPG, PNG, or GIF format.
* **SEO Image Transform** - The image transform to apply to the Site SEO Image.
* **Twitter Card Type** - With Twitter Cards, you can attach rich photos and information to Tweets that drive traffic to your website. Users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.
* **Twitter Card Image** - This is the image that will be used for display on Twitter Cards for tweets that link to this entry. If no image is specified here, the Site SEO Image will be used for Twitter Cards instead. The image must be in JPG, PNG, or GIF format.
* **Twitter Image Transform** - The image transform to apply to the Twitter SEO Image. Twitter recommends: 120 x 120 pixels minimum size, 1:1 aspect ratio, 1mb max size for Summary Card images, and 280x150 pixels minimum size, 1.86:1 aspect ratio, 1mb max size for Summary Card with Large Image images.
* **Facebook Open Graph Type** - Adding Open Graph tags to your website influences the performance of your links on social media by allowing you to control what appears when a user posts a link to your content on Facebook.
* **Facebook OpenGraph Image** - This is the image that will be used for display on Facebook posts that link to this entry. If no image is specified here, the Site SEO Image will be used for Facebook posts instead. The image must be in JPG, PNG, or GIF format.
* **Facebook Image Transform** - The image transform to apply to the Facebook SEO Image. Facebook recommends: 1200 x 630 pixels minimum size, 1.9:1 aspect ratio, 8mb max size.
* **Robots** - The [robots meta tag](https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag?hl=en) lets you utilize a granular, page-specific approach to controlling how an individual page should be indexed and served to users in search results. Setting it to a blank value means 'no change'.

Expand Down Expand Up @@ -372,6 +378,8 @@ The SEOmetrics feature in SEOmatic allows you to analyze your pages to measure t

### SEOmetrics in the Admin CP

![Screenshot](resources/screenshots/seomatic08.png)

SEOmetrics Content Analysis will run a variety of tests on your web page, and offer you analysis with helpful tips on how to correct any problems it finds. For each test, there is a `Learn More` link that will offer details on the thing being tested.

You can enter any arbitrary URL in the **URL to Analyze** field, even URLs to external websites, should you wish to.
Expand Down
3 changes: 2 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,9 @@ Some things to do, and ideas for potential features:

## Changelog

### 1.1.34 -- 2016.08.31
### 1.1.34 -- 2016.09.05

* [Added] Added the ability to set separate images for Twitter Cards and Facebook OpenGraph images
* [Improved] Do more sanity checking when building the breadcrumbs
* [Improved] We don't swap in the element->title for mainEntityOfPage anymore
* [Added] Added a variable for craft.seomatic.getTemplateMeta()
Expand Down
35 changes: 19 additions & 16 deletions controllers/SeomaticController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,22 +183,25 @@ public function actionRenderMetrics()
$pagespeedJson = json_decode($pagespeedDesktopResult, true);
if ($pagespeedJson)
{
$pageSpeedPageStats = $pagespeedJson['pageStats'];
if (empty($pageSpeedPageStats['htmlResponseBytes']))
$pageSpeedPageStats['htmlResponseBytes'] = 0;
if (empty($pageSpeedPageStats['cssResponseBytes']))
$pageSpeedPageStats['cssResponseBytes'] = 0;
if (empty($pageSpeedPageStats['imageResponseBytes']))
$pageSpeedPageStats['imageResponseBytes'] = 0;
if (empty($pageSpeedPageStats['javascriptResponseBytes']))
$pageSpeedPageStats['javascriptResponseBytes'] = 0;
if (empty($pageSpeedPageStats['otherResponseBytes']))
$pageSpeedPageStats['otherResponseBytes'] = 0;
$pageSpeedPageStats['totalResponseBytes'] = $pageSpeedPageStats['htmlResponseBytes'] +
$pageSpeedPageStats['cssResponseBytes'] +
$pageSpeedPageStats['imageResponseBytes'] +
$pageSpeedPageStats['javascriptResponseBytes'] +
$pageSpeedPageStats['otherResponseBytes'];
if (!empty($pagespeedJson['pageStats']))
{
$pageSpeedPageStats = $pagespeedJson['pageStats'];
if (empty($pageSpeedPageStats['htmlResponseBytes']))
$pageSpeedPageStats['htmlResponseBytes'] = 0;
if (empty($pageSpeedPageStats['cssResponseBytes']))
$pageSpeedPageStats['cssResponseBytes'] = 0;
if (empty($pageSpeedPageStats['imageResponseBytes']))
$pageSpeedPageStats['imageResponseBytes'] = 0;
if (empty($pageSpeedPageStats['javascriptResponseBytes']))
$pageSpeedPageStats['javascriptResponseBytes'] = 0;
if (empty($pageSpeedPageStats['otherResponseBytes']))
$pageSpeedPageStats['otherResponseBytes'] = 0;
$pageSpeedPageStats['totalResponseBytes'] = $pageSpeedPageStats['htmlResponseBytes'] +
$pageSpeedPageStats['cssResponseBytes'] +
$pageSpeedPageStats['imageResponseBytes'] +
$pageSpeedPageStats['javascriptResponseBytes'] +
$pageSpeedPageStats['otherResponseBytes'];
}

if (isset($pagespeedJson['responseCode']) && ($pagespeedJson['responseCode'] == "200" || $pagespeedJson['responseCode'] == "301" || $pagespeedJson['responseCode'] == "302"))
{
Expand Down
3 changes: 2 additions & 1 deletion releases.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
{
"version": "1.1.34",
"downloadUrl": "https://github.com/nystudio107/seomatic/archive/master.zip",
"date": "2016-08-31T11:00:00-11:00",
"date": "2016-09-05T11:00:00-11:00",
"notes": [
"[Added] Added the ability to set separate images for Twitter Cards and Facebook OpenGraph images",
"[Improved] Do more sanity checking when building the breadcrumbs",
"[Improved] We don't swap in the element->title for mainEntityOfPage anymore",
"[Added] Added a variable for craft.seomatic.getTemplateMeta()",
Expand Down
Binary file modified resources/screenshots/seomatic01.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/screenshots/seomatic05.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added resources/screenshots/seomatic08.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions templates/field.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@
<div class="field comboField-wrapper" id="{{ id }}seoImageId-field">
<div class="heading">
<label for="{{ id }}seoImageId">{{ "SEO Image"|t}}{% if locale %}<span class="locale">{{ locale }}</span>{% endif %}</label>
<div class="instructions"><p>{{ "This is the image that will be used for display as the webpage brand for this template, as well as on Twitter Cards and Facebook OpenGraph that link to this page. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
<div class="instructions"><p>{{ "This is the image that will be used for display as the webpage brand for this entry, as well as on Twitter Cards and Facebook OpenGraph that link to this page, if they are not specified. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
</div>
<div class="source-container"{% if not seoImageIdSourceChangeable %} style="display: none;"{% endif %}>
<div class="source-item">
Expand Down Expand Up @@ -332,7 +332,7 @@
<div class="field comboField-wrapper" id="{{ id }}seoTwitterImageId-field">
<div class="heading">
<label for="{{ id }}seoTwitterImageId">{{ "Twitter Card Image"|t}}{% if locale %}<span class="locale">{{ locale }}</span>{% endif %}</label>
<div class="instructions"><p>{{ "This is the image that will be used for display as the webpage brand for this template, as well as on Twitter Cards and Facebook OpenGraph that link to this page. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
<div class="instructions"><p>{{ "This is the image that will be used for display on Twitter Cards for tweets that link to this entry. If no image is specified here, the Site SEO Image will be used for Twitter Cards instead. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
</div>
<div class="source-container"{% if not seoTwitterImageIdSourceChangeable %} style="display: none;"{% endif %}>
<div class="source-item">
Expand Down Expand Up @@ -422,7 +422,7 @@
<div class="field comboField-wrapper" id="{{ id }}seoFacebookImageId-field">
<div class="heading">
<label for="{{ id }}seoFacebookImageId">{{ "Facebook OpenGraph Image"|t}}{% if locale %}<span class="locale">{{ locale }}</span>{% endif %}</label>
<div class="instructions"><p>{{ "This is the image that will be used for display as the webpage brand for this template, as well as on Twitter Cards and Facebook OpenGraph that link to this page. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
<div class="instructions"><p>{{ "This is the image that will be used for display on Facebook posts that link to this entry. If no image is specified here, the Site SEO Image will be used for Facebook posts instead. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
</div>
<div class="source-container"{% if not seoFacebookImageIdSourceChangeable %} style="display: none;"{% endif %}>
<div class="source-item">
Expand Down
2 changes: 1 addition & 1 deletion templates/site/_edit.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@
<div class="field" id="siteSeoTwitterImageId-field">
<div class="heading">
<label for="siteSeoTwitterImageId">{{ "Site Twitter Image"|t}}{% if craft.isLocalized and siteMeta.locale %}<span class="locale">{{ siteMeta.locale }}</span>{% endif %}</label>
<div class="instructions"><p>{{ "This is the image that will be used for display on Twitter Cards that link to the website. If no image is specified here, the Site SEO Image will be used for Twitter Cards instead. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
<div class="instructions"><p>{{ "This is the image that will be used for display on Twitter Cards in tweets that link to the website. If no image is specified here, the Site SEO Image will be used for Twitter Cards instead. The image must be in JPG, PNG, or GIF format." |t |raw}}</p></div>
</div>
<div class="input">
{% if assetsSourceExists %}
Expand Down

0 comments on commit 95b4cea

Please sign in to comment.