{"id":19674294,"url":"https://github.com/pratheeshrussell/angular-ogtags-with-php","last_synced_at":"2026-05-03T11:32:22.417Z","repository":{"id":138404128,"uuid":"593505335","full_name":"pratheeshrussell/angular-OGtags-with-php","owner":"pratheeshrussell","description":"Trying to set OG Tags that can be used by FB, whatsapp etc., without full SSR.","archived":false,"fork":false,"pushed_at":"2023-01-27T04:02:45.000Z","size":225,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-27T05:39:49.992Z","etag":null,"topics":["angular","og-tags","php"],"latest_commit_sha":null,"homepage":"https://medium.com/@pratheeshrussell/setting-og-tags-in-angular-with-php-95828423f714","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pratheeshrussell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-26T06:53:37.000Z","updated_at":"2023-01-27T04:17:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5a379d63-068c-4ee8-927c-2797d019d1d0","html_url":"https://github.com/pratheeshrussell/angular-OGtags-with-php","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pratheeshrussell/angular-OGtags-with-php","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratheeshrussell%2Fangular-OGtags-with-php","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratheeshrussell%2Fangular-OGtags-with-php/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratheeshrussell%2Fangular-OGtags-with-php/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratheeshrussell%2Fangular-OGtags-with-php/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pratheeshrussell","download_url":"https://codeload.github.com/pratheeshrussell/angular-OGtags-with-php/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pratheeshrussell%2Fangular-OGtags-with-php/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32567221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","og-tags","php"],"created_at":"2024-11-11T17:17:48.636Z","updated_at":"2026-05-03T11:32:22.412Z","avatar_url":"https://github.com/pratheeshrussell.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Ogtag with php\n\nI was trying to set OG Tags that can be used by FB, whatsapp etc., without full SSR.  \n\n## How to\n### Rename index.html file\nRename index.html to index.php \n\n### Setup webpack configs\n* Install [@angular-builders/custom-webpack](https://www.npmjs.com/package/@angular-builders/custom-webpack/v/latest) (Just make sure you use the right versions)\n* Create a file **extra-webpack.config.js** with the following code  \n```\nmodule.exports = {\n    devServer: {\n      devMiddleware: {\n        mimeTypes: {                                                                                                                          \n          'php': 'text/html',                                                                                         \n        }  \n      },\n    },\n};\n```\n* In **angular.json** file, make the following changes  \nunder architect -\u003e build change the builder\n```\n\"builder\": \"@angular-builders/custom-webpack:browser\",\n```\nunder architect -\u003e build -\u003e options add *customWebpackConfig* and also modify *index* to use php file\n```\n\"customWebpackConfig\": {\n              \"path\": \"./extra-webpack.config.js\"\n},\n\"index\": \"src/index.php\",\n```\nunder architect -\u003e build -\u003e configurations -\u003e production, add \n```\n \"optimization\": {  \n    \"styles\": {\n        \"inlineCritical\": false\n    }\n    }\n```\nThe above step is required to prevent HTML tags from being commented out. If you dont want to add this, you may have to manually uncomment each time after build.  \nunder architect -\u003e serve change the builder\n```\n\"serve\": {\n...\n\"builder\": \"@angular-builders/custom-webpack:dev-server\",\n...\n\n```\n\n### Writing the php functions\nAdd a folder named *php-includes* and add all support functions. Make sure to add a .htaccess file with the line `Deny from all`. This will prevent anyone from accessing the files directly from browser. Import files in **index.php** and call the functions.   \nIn **angular.json**  add the folder to assets array\n```\n\"assets\": [\n    ...\n    \"src/php-includes\"],\n```\n\n## Running the demo\n* add your unsplash api key in settings.app.ts.\n* build and host at some free shared hosting.\n\n## Limitations\n* Can be used to set only headers. Content itself will not be prerendered.  \n* Needs a server with PHP setup.\n* It will not work in dev server. You may thy something like `http-server-php`\n\n\n## Versions\n[Angular CLI](https://github.com/angular/angular-cli) version 14.1.3.   \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpratheeshrussell%2Fangular-ogtags-with-php","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpratheeshrussell%2Fangular-ogtags-with-php","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpratheeshrussell%2Fangular-ogtags-with-php/lists"}